docs

Custom theming

You can customize the fonts, colors, backgrounds of your tours from the HelpHero Editor. The customizations you make will apply across all tours you create. The HelpHero Editor will show you a preview of your customizations live as you make changes. This makes effortless to get the look and feel of your tours just right.

Getting to your theme editor

Note: If you are editing a tour or step you will need to navigate back a few screens to get to the Theme Editor. Click on top left arrow to navigate back.

Editing your theme

You can edit the basic styling of the HelpHero UI components. Changes you make will apply across all of your tours.

Custom CSS

For more advanced styling customizations to the the HelpHero UI you can specify custom CSS. In this example we will show you how to use a custom font.

2.1 Change to the CSS tab

2.2 Add a CSS declaration

To tell the browser about our custom font, you will need to add a @font-face declaration.

@font-face {
  font-family: Muli;
  src: url(/examples/demo/fonts/muli.ttf);
}

Lets breakdown the above example:

src: url(/examples/demo/fonts/muli.ttf);
This should be a file that exists on your website.
font-family: Muli;
This is name you want to refer to your font as we will use this in the next step.

Alternatively you can import the font from a external source like Google Fonts

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

Google Fonts not loading?

CSP is a security feature that can be enabled on your website by your development team, it specifies what resources such as scripts, images, stylesheets can run on your website. If this is enabled it can block external stylesheets like Google Fonts from loading. If this is the case you will need to ask your development team to allow Google Fonts in your websites CSP.

2.3 Change the font family

Now change the font family on the General Tab to be the same as the name we gave in the CSS declaration.