Most styling can simply be done with our player appearance settings. However, if you’re looking for more advanced customization, you might want to use CSS.

With CSS, you can customize:
- Trigger (minimized widget),
- Panel (open widget),
- Popover (step).

All the elements have specific class names. All class names begin with inmplayer - so there should be no clash between the page's style and style of the Inline Manual.

In this article, we’ll cover specific CSS selectors and classes that you can target.

Trigger (minimized widget)

Widget (by default) is located in the bottom right corner of your website/application. When clicked, it opens a panel with all available topics. This minimized widget button is called a trigger.


.inmplayer-trigger is the only element in the minimized widget. You can format it in any way, including its size. However, we don't recommend trying to customize its position. If you want to change the position of the widget, take a look at this article.

Panel (open widget)

When users click on the widget button, it opens a list of available topics. This open widget is called a panel. It contains a list of topics and some branding information.


It’s the wrapper for the whole panel. You can set the width of the panel, but don't adjust its height. If you need to set the height, use the max-height property in .inmplayer-panel-body (see below).

Please also note that playing with panel's position may lead to glitches. Its position is defined based on the site’s settings in Inline Manual portal and corresponds with the position of trigger element (minimized widget).


When users click on the panel header, the panel is closed and users see the minimized widget.


It contains a list of available topics. You can control the size of the panel by setting max-height of the panel body. If you do so, make sure the height is not divisible by the height of a single item of the list. It will ensure that the last visible element in the list is cut in half, so the user will see it as an indicator that list is not complete and should be scrolled. Modern browsers hide the scrollbars, so there's no indicator to scroll otherwise.


Each item in the list has this class. It can be combined with two special classes below. It is possible for the list item to have both these classes at the same time.


This class is added to an item containing a currently active topic.


This class is added to all topic items if their context path matches the current path. All such items are moved to the top of the list.


It contains branding information.


It contains customizable HTML content displayed in the left part of the footer.


It contains "Powered by Inline Manual" message.

Popover (step)

It’s where the main content is.


It’s the wrapper for the whole step. This is a good place to set the z-index attribute.


It’s the wrapper for the whole step box. It doesn’t include the pointer shape.


It’s the wrapper for regular step's content. It doesn’t include the scroll message (see below).


It’s the title inside the step.


It’s the container for description inside the step.


It’s the container for guide flow buttons.


It’s the previous button.


It’s the next button.


It’s the end button.


It’s the progress indicator between buttons.


This message is displayed, when step's target is scrolled out of the viewport. Clicking the message scrolls the viewport so that it fits the target element.


This class is added to the step element when there's no associated element with the current step. Such step is displayed at a fixed position in the middle of the viewport.


It’s SVG element, inside which the pointer shape is drawn.


Its pointer shape is an SVG element connecting the popover with an associated element. You can format it via CSS just like any other HTML element. For example:

.inmplayer-popover-pointer-shape {
          fill: #ffffff;      /* fill color */
          stroke: #000000;    /* border color */
          stroke-width: 1px;  /* border width */


.inmplayer-lang-direction-ltr & .inmplayer-lang-direction-rtl

Inline Manual Player adds these classes to the core UI elements, based on the text direction (LTR is the default). If you want to do additional changes to the UI based on text direction, use these classes. When text direction is set to RTL, text-align, and order of the controls in popover is automatically changed.

Related articles