Overview
This article will show you how you can create a Theme in UserGuiding.
First, access your UserGuiding panel.
Find the Themes under "Customization" in the left-hand menu, click and go to its page.
Here, you can always find existing Themes in the list view
Click on the + New Theme button on the top right to create a new theme.
Important: If you don't designate a custom Theme to your content, the default Theme will be utilized.
General
There are five subsections for Themes. You can start to work by deciding on how the general appearance of your Guides should be.
Choose any color for your Background and Backdrop, and adjust the opacity of the latter.
For the Step Progress Indicator, add a Bar and/or Numbers.
Preview your Theme in the making through the representative modal and tooltip residing on the left side of the page.
Adjust your content's Width and style your Buttons.
Typography
Here you can customize the text color, size, and alignment.
Follow the changes you make, whether it's on headings or the body of the text.
You can also choose one of the built-in fonts or set a custom one. You can learn more about setting a custom font here.
Hotspots
Besides Guides, you can customize your Hotspots and preview their look in the Hotspots section.
Decide on what kind of color and style you want for the hotspots' beacons and whether you want it to be in animation or not.
Set conditions for the hotspot tooltips to appear and disappear on the page.
You can also translate the dismiss option text.
Language
You can decide what is written on the tooltip and input buttons within the language section.
This section is very useful when creating multiple themes to support multilingual Guides. You can learn about it in detail from this article.
CSS
Here you can update UserGuiding's native design for some onboarding materials with your own CSS styling.
When you finish creating your new Theme, you can give it a different name, save and publish changes. For example, we'll create a theme for our playground website and name it accordingly.
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:
Please don't 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 designated to a guide, and they will not stick to the guide completely.
If you want to apply your changes to the guide thoroughly, you need to change the guide's Theme, not the step-by-step design.