Overview

In this article, we explain the Themes feature in UserGuiding, how you can create a custom theme for onboarding contents such as guides, hotspots, etc. and how you can apply them.
   

Why use Custom Themes?

Preserving consistency and rhythm of a product adoption experience is only possible, if you blend all of third party tool content within your web application. 

The contents you create with UserGuiding can look native-like, if you designate a theme to them, befitting your web application. 

Thus, as you guess, Themes utilization has a huge impact on Customization. 

  

How to create a Custom Theme?

We'll show you how you can create a theme, suitable for a specific platform. As an example, we used playground.userguiding.com

Playground is our sample environment where we test our features' functionality.

  • First, login panel.userguiding.com.
  • 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. Notice, there is the default theme of UserGuiding. 

Important: If you don't designate a custom theme to a content, they utilize the default theme.

  • To create a new theme, click on +NEW THEME button on the top right. 
  • Give your theme a catchy name. This way, you can recognize it easily when you have more than one theme. 

We are creating a theme for playground.userguiding.com and we name it accordingly.

General

There are four 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.
  • Style your Buttons and adjust Modal and Tooltip Width.

Text

  • Switch to the Text section, and customize the text color, size and alignment. 
  • Follow the changes you make, whether it’s on headings or the body of the text.

Preview Language

Within the preview language section, you can decide on what is written on the proceeding buttons and directory tags.

If you want to create guides in another language rather than english. You should visit the Preview Language section to create the appropriate template.  

Hotspots

Besides for guides, in the hotspots section, you can create a custom theme for your hotspots and preview their look.

  • 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.

Important: You can find all these details in the Chrome Extension as well and make a change upon a hotspot while you’re creating it. Learn how to create hotspots.

  • If you finish creating the theme, you can SAVE it. Notice that its name has taken a place in the list of themes

    

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

Setting Themes to Guides&Hotspots with Chrome Extension.

Guides are made up of steps and you can create a guide by creating either one or more steps.

While you're working on the Chrome Extension, you can set a custom theme to a guide either before creating a guide or afterwards. 

Before creating the guide, if you open the theme dropdown, you will find your custom themes.

Afterwards, you can always use Settings > Design. 

Then, come back to panel.userguiding.com and click on Green Publish Changes Button to update the container code, meaning the live version of our guides and hotspots. If it has not turned to green yet, refresh the page and then, click on it. 

You can follow similar paths when the content you want to customize is Hotspot Group.

Setting Themes to Guides&Hotspots within panel.userguiding.com 

Find the guide you want to change its theme and go to its settings page. Here, scroll down until you notice Advanced Settings.

  1. If you open the Theme Dropdown, your existing themes will appear on the list. Select the theme you want this guide to have, save and publish changes again.
  2. Each time you create a new custom theme, it will appear in the Themes Dropdown.

You can follow similar paths when the content you want to customize is Hotspot Group.
  

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 Chrome extension, they are considered as retouches.

And, retouches can override the functioning of the theme that is designated to a guide. Because they have programmatic superiority over themes. 

That's why, the best practice is to change the theme of a guide rather than changing its design step by step. 

If you detect any imperfection in your guide and hotspot designs, this kind of practice could be the reason behind your issue.

 
Related Articles:
How To Define a Custom Font in UserGuiding?
What does "Preview Language" mean?

Did this answer your question?