Custom Themes

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: hipster;
  src: url(/examples/demo/fonts/hipster.ttf);
}

Lets breakdown the above example:

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

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.

2.4 Change the Letter Spacing

This particular font displays the letters in a very compact way. Let's fix that by adding an additional CSS declaration.

* {
  letter-spacing: 2px
}