Customize the look - the player appearance settings : Inline Manual

Customize the look - the player appearance settings Print

Modified on: Wed, 15 Nov, 2023 at 10:57 AM

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:

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

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).