Customize the look - the player appearance settings

Location: 
Sites > Site > Settings > Player appearance

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,
· Widget’s colors and position.

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. Login to Inline Manual portal with your e-mail and password.

  2. Go to Sites and choose the desired site.

  1. Go to the Settings tab and **choose* the player appearance from the left side menu.

Now, let’s discuss what you can change in each 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.

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.

In this section, you can customize the look of the step’s pointer or tail.

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.

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.

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

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.

In this section, you can change the look and the position of the help widget.

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

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

Position - it’s the position of the widget on the screen.

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.

Player
Appearance
Was this article helpful?