This guide will show you how to change the background color and font color of a step using custom CSS. Below is a step with red background and white font.



Changing the color of a step with custom CSS

To change the color of a step with custom CSS, follow the steps below:


  1. Copy the following custom CSS


.inm-player-step-red.inmplayer-popover-wrapper {
  background-color: #ff0000;
  color: #ffffff;
}


  1. Paste the custom CSS in your site settings. In your Inline Manual account, navigate to Sites > Settings > Player appearance > CSS tab. Paste the copied snippet of code above into the Custom CSS text area. Make sure to click the Save button to save your changes.



  1. Add the custom CSS class to the step. In the Authoring tool, open the topic and the step, expand the Advanced panel and paste the text "inm-player-step-red" into the Custom class text field and clicl the Preview step button at the button of the Authoring tool.



  1. Make sure to click the Save button at the bottom of the Authoring tool when you are satisfied with the changes.


Related articles