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
- In the Rich HTML design screen, click View
- Next click Source code
- This will open up the Source code window:
- This is where you will paste your CSS code.
Walkthrough Help item
- With WalkThrough selected as your Media Type, click on Walkthrough Steps under Settings, then in the Content editor window, click on View.
- Then click on Source code:
- This will open up the Source code window:
- 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.