Inline Manual is very flexible when it comes to making it look exactly as you wish. You can change font and colors with just a few simple clicks, and for more advanced customization you can use CSS code. The Player appearance settings have a Player live preview for easier customization. So you will see how your changes will look like right away.



In the Player appearance settings, you can change:


  • Step’s colors and font
  • Button’s colors
  • Pointer’s colors
  • Launcher’s colors
  • Backdrop colors and opacity


In this article, we’ll discuss what options you have to customize the look.


Accessing the player appearance settings tab

To access the settings:


  1. Go to Sites (A), choose the desired site and click Settings (B).




  1. Choose Player appearance from the left side menu.



Now, let’s discuss what you can change in each tab.


Popover tab

In the Popover tab, you can change the look of your steps.


Skin - there are two skins - Sidebar and Legacy, however, Legacy is about to be removed. This should give users a better view of your steps.



Player theme - here you can choose to use the default theme (uses the settings from Player appearance) or you can select the custom theme and add CSS in the CSS tab.



Z-Index - if your steps are covered by other elements of your page, you can bring them to the top by setting z-index to the higher number. The default is 1000.



Background color - it’s the background color of your step.



Text color - it’s the color of step content.



Border color - it’s the color of the step border. It’ll only be visible if the Border width is more than 0.



Border width - it’s the width/thickness of the step border.



Border radius - depending on the value it will make corners of the step either angled or rounded.



Font size - it’s the size of your font.



Font weight - it’s the thickness of your font.



Line height - it’s the amount of space above and below inline elements.



Font family - it’s the font family.



Buttons tab

In this section, you can customize the appearance of the step buttons.


Background color - it’s the background color of the buttons.



Text color - it’s the text color of the buttons.



Border color - it’s the border color of the buttons. It’ll only be visible if the Border width is more than 0.



Border width - it’s the width/thickness of the button border.



Border radius - depending on the value it will make corners of the step either angled or rounded.



Pointer tab

In this section, you can choose the type and customize the look of the step’s pointer.


Type: Arrow

Arrow is the default type. It displays a classic arrow like pointer from the step to point at the element.

Type: Line [beta]

Line displays a line from popover to the element. It can have plugs at the start and at the end. It can be dashed.

Available in beta Player.

Type: None [beta]

There is no pointer when None option is selected.

Available in beta Player.

Filling color - it’s the fill color of the pointer.



Stroke color - it’s the stroke/border color.



Stroke width - it’s the width/thickness of the stroke/border.



Launcher tab

In the launcher tab, you can change the look of your launchers (tooltips and hotspots).


Background color - it’s the background color of the launcher.



Text color - it’s the color of the launcher content, for example ?.



Border color - it’s the border color of the launcher. It’ll only be visible if the Border width is more than 0.



Border width - it’s the width/thickness of the launcher border.



Border radius - depending on the value it will make corners of the step either angled or rounded.



Backdrop tab

In this tab, you can change the look of the backdrop and outline (if you use one).


Version - is the version of the backdrop you will use. Version 1 is for the backdrop only. Version 2 has the options for Outline highlight (currently only available in BETA player version).



Color - it’s the color of the backdrop.


Opacity - here you can specify how visible you want the backdrop to be.



Padding - it’s the width/thickness of the padding.



Radius - it sets the radius of the selection’s corners.



Outline Highlight


Color - it’s the color of the backdrop Outline.



Opacity - here you can specify how visible you want the Outline to be.



Padding - it’s the width/thickness of the padding.



Stroke width - specifies the width of the stroke on the element.



Radius - it sets the radius of the selection’s corners.



CSS tab

In this section, you can apply custom styles for your steps.


Disable theme - if checked, the player theme and your color settings won't be used.



Custom CSS - you can paste your custom CSS here.



Related articles