ClickHelp Documentation

Styling Projects Created From Templates


ClickHelp offers 6 ready-to-use templates to choose from when creating a Project. A ClickHelp template includes CSS files, script files, images. Each template has its unique responsive design. The templates are tested to work smoothly on various screen sizes including tablets and mobile screens.  

After you create a Project, you get a copy of the chosen template (all its files). They can be found in the ClickHelp File Storage. Therefore, you can edit any of the files to change the Project's appearance. 

To return to a template's initial state, create another Project using the same template and copy the needed files from there, or simply do the back up of the files you are about to change.

Changing Font in a Project Created from a Template

In the example below, you will see how to change the default text font of a template. By default, Open Sans (an online font taken from Google Fonts) is used in the body of this template.

  • Click the Open For Editing button on the Styles section of the Home tab of the editor's ribbon bar to open the Project's style file in the Styles Editor.

  • In the Styles Editor, click the Lock & Edit button.

  • If you want to change the text font, you should look for the font-family property inside the body selector. 

  • Type in the necessary value. 

  • Save the changes.
  • Return to the help topic and click the Refresh CSS Styles button for a quick styles refresh.

This is how the help topic will look with the new font-family specified in the style file:

This new font will be applied to the whole Project.

In ClickHelp, alongside the default fonts, you can use external online fonts and also upload your own font files to the ClickHelp File Storage and reference them in your CSS file.

Learn more on how to style your online ClickHelp documentation by watching this 4-minute tutorial video: