Share:
ClickHelp Documentation

Project Styles and Scripts

When you create a Project from a template, a couple of CSS files and a Script file are automatically created for the Project - those files come from the template, and contain the template-specific style definitions. These files are stored in the ClickHelp File Storage. You can view the CSS files on the Styles tab of the File Storage, while the script files are located on the Scripts tab. Further in this help topic, you will learn how to work with these files in the ClickHelp File Storage, and how to share styles and scripts among different projects.

Information The explanation below uses the Styles tab as an example. All steps are identical for the Scripts tab.

To view a CSS file:

  • Open the File Manager and proceed to the Styles tab.

  • Choose your Project's folder, and, to the right, you will see related style files.
     

To add a new file, upload it from your PC by clicking the Browse... button. Or, drag and drop it right into the files list. 


This is where you can also open a CSS file for editing. Simply double-click the needed file, and it will be opened in the ClickHelp CSS Editor in a new window, or select your file and click the View File button (it will become active after you select the file) in the bottom-right corner.

The styles are conditional. This means that you can use different style files for different outputs. Note how we have two style files on the screenshots above: one for the regular output and the other one - for the printed version of the same documentation. 

Sharing Styles Between Projects

In ClickHelp, it is possible to share style files among Projects . For example, you can create a centralized folder to store all your CSS files, and use those files everywhere to control the styles in a centralized manner.

To assign an existing CSS file to a Project:

  • Go to Current Project > Settings > General > Basic Settings or click the Manage Project Style File  element on the Home tab of the editor as shown on the screenshot below.

  • On the Basic Settings page, you can view all the CSS  files applied to the current Project and edit them invoking the editing elements by hovering your mouse over a CSS file. You can Delete it, Open for editing , move it up or down and open its Publishing Properties .
     
  • On the same settings page, you can add any existing CSS file stored in your ClickHelp File Storage to the current Project by picking it in the drop-down box - just select an existing file in the list, or start typing the file name for quick search. You can also click the create and add a new file link, and a new empty CSS file will be added to the list below.
     
  • Save the changes when you are done.
So, you have control over the style files used by a project. If several projects need to have the same style, just create a common style file and add it to those project settings.

Learn more on project management