This article explains the Themes feature in UserGuiding, how you can create a custom theme for onboarding content such as guides, hotspots, etc., and how you can apply them.
Why use Custom Themes?
If you want to preserve the consistency and rhythm of your web page, you need to designate your specific theme within UserGuiding content. This way, you'll be able to keep the same look and feel of the experience you're providing all through your website.
How to create a Custom Theme?
It's easy to create a theme suitable for your platform. First, you need to log in to your UserGuiding panel and go to Themes under Customization.
You will see five sections you can work on, and you can always preview your theme in the making on the right side of the page.
Let's cover each of them:
You can decide on how the appearance of your guides should be by choosing a color, adjusting opacity, width, styling your buttons, etc.
You can customize the text color, size, and alignment. If you want to add the custom font type of your platform, you can also set it here.
You can decide on what kind of color and style you want for the hotspots' beacons and set custom conditions here.
You can translate standard instructions present in the buttons and other elements.
Here you can update the UserGuiding's native design for some onboarding materials with your own CSS styling.
How to apply a Custom Theme to your Guides and Hotspots?
Setting Themes to Guides & Hotspots within the Chrome Extension
While you're working on the Chrome Extension, you can set a custom theme to a guide either before or after creating a guide, as shown below:
Before creating a guide:
After creating a guide:
Do not forget to hit the Publish Changes button on your panel to make your changes live.
Setting Themes to Guides & Hotspots within your panel
You can use Advanced Settings of your Guide/Hotspot to change the theme, as shown below.
Why is the Custom Theme not applying to my Guide/Hotspot completely?
If you change the appearance of a guide or hotspot manually while working on the Chrome extension, they are considered retouches.
And, retouches within individual steps can override the functioning of the theme that is designated to a guide, and they will not stick to the guide completely.
If you want to thoroughly apply your changes to the guide, you need to change the guide's theme, not the step-by-step design.