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

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

.inmplayer-panel

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

.inmplayer-panel-header

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

.inmplayer-panel-body

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.

.inmplayer-list-item

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.

.inmplayer-active

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

.inmplayer-highlight

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.

.inmplayer-panel-footer

It contains branding information.

.inmplayer-panel-custom-footer

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

.inmplayer-panel-footer-branding

It contains "Powered by Inline Manual" message.

Popover (step)

It’s where the main content is.

.inmplayer-popover

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

.inmplayer-popover-wrapper

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

.inmplayer-popover-content

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

.inmplayer-popover-title

It’s the title inside the step.

.inmplayer-popover-inner-content

It’s the container for description inside the step.

.inmplayer-popover-buttons

It’s the container for guide flow buttons.

.inmplayer-popover-button-previous

It’s the previous button.

.inmplayer-popover-button-next

It’s the next button.

.inmplayer-popover-button-end

It’s the end button.

.inmplayer-popover-progress

It’s the progress indicator between buttons.

.inmplayer-popover-scroll_message

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.

.inmplayer-popover-orphan

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.

.inmplayer-popover-pointer-holder

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

.inmplayer-popover-pointer-shape

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 */
        }

Other

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