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. 

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

The default font of the content

  • 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.
    Click the Open for editing button on the Home tab of the Ribbon bar
  • In the Styles Editor, click the Lock & Edit button.
    The Lock&Edit button in the CSS file
  • If you want to change the text font, you should look for the font-family property inside the body selector. 
    Find the font-family property inside the body selector
  • Type in the necessary value. 
    Change the value of the font-family property to change the font
  • Save the changes.
  • Return to the help topic and click the Refresh CSS Styles button for a quick styles refresh.
    Click the Refresh CSS styles button on the Home tab of the Ribbon bar

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

New font of the content

This new font will be applied to the whole Project.

Note
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: