In this article, we explain 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 certain 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. You just need to log in to your UserGuiding panel and go to Themes under Customization.

You will see four 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.

Learn How To Define a Custom Font in UserGuiding


There are You can decide on what kind of color and style you want for the hotspots' beacons and set custom conditions here.


You can translate common instructions present in the buttons and other elements.

How to apply a Custom Theme to your Guides and Hotspots?

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 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 apply your changes to the guide completely, you need to change the theme of the guide, not the step-by-step design.

Related Articles:

How To Define a Custom Font in UserGuiding?

What is the purpose of the "Language" option while customizing a Theme?

Did this answer your question?