With Inline Manual, you can fully customize the look of your walkthroughs. Some basic changes can be made through the Player appearance settings, but for more advanced customization, you will need to use CSS. In this article, we provide you with advanced CSS that you can modify to suit your needs.


You can find CSS here:
Step with person image below.
Step with navigation - 2 columns.
Background color and font change


How to use CSS with Inline Manual

  1. Add the CSS under Sites > Site > Settings > Player appearance > CSS tab.
  2. 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. You can read more about IM selectors and classes here.
  3. You can add a custom class to the CSS and to the step in the Authoring tool to make sure this particular CSS will apply only to that particular step, and not to all. By default, when you add CSS under site's settings, it will apply to all topics within that site.
  4. The CSS changes won’t appear in the live preview in Player’s settings.
  5. You can use the HTML code of an element from your application - copy the HTML code into the Step through Source <> button.

Useful tools

  1. Hex color picker
  2. Chrome's dev tools