Add CSS to a Help item

Applies to: VisualSP
Print Friendly, PDF & Email

CSS can be used in the design and layout of VisualSP Rich HTML and Walkthrough Help items. There are some limitations to styling a Rich HTML help item so for full control, we recommend using a Walkthrough for your help item. Just follow these steps:

Rich HTML Help item

  1. In the Rich HTML design screen, click View
  2. Next click Source code

  3. This will open up the Source code window:

  4. This is where you will paste your CSS code.

Walkthrough Help item

  1. With WalkThrough selected as your Media Type, click on Walkthrough Steps under Settings, then in the Content editor window, click on View.
  2. Then click on Source code:

  3. This will open up the Source code window:

  4. This is where you paste the CSS code.

Your code would look similar to this:

<style>.myCustomBGWalkthrough { background-image: url("//mydomain.net/Content/Screenshots/blue_snowflake_background.png"); width: 400px; height: 350px; background-repeat: no-repeat } p { line-height: 1.4 } table.padded-table td { padding: 2px 0px 2px 10px }</style> <div class="myCustomBGWalkthrough"> text </div>
Note

You can use your browser's devtools to inspect the walkthrough bubble to determine what elements you can style with CSS.

Updated on January 3, 2024

Related Articles