Content Styling

Yes. You can specify several CSS style files for a Project. This may be useful when you want to use different style sheets for different output types or versions of your documentation. To learn more, refer to  Project Styles and Scripts .

All style files are saved in your ClickHelp File Storage, so you can open them from File Manager, or upload new files there. To manage the style files of a specific project, go to Current Project > Settings... > Basic Settings. Under Project Styles, you can create a new style file, add an existing one or edit it. To learn more, refer to Project Styles and Scripts .

Yes. After you click the save button in the CSS file editor, all the changes will be reflected in the project topics. To see the changes in a topic that is already open, just refresh the page. When a topic is in the editing mode, click Refresh CSS Styles in the Styles section on the Home tab of the Design View ribbon bar - this will reload the styles without leaving the editing mode.

By default, the navigation elements are displayed as text links. You can modify the text when inserting the elements. You can also use images instead of the text elements. To do this, you will need to add a few CSS styles in your project style file. Once you do this, all the navigation elements will get a new style, without a need to update every element. Below, you can see the CSS code you need to paste to your project CSS file, and correct the paths to the images in your File Storage:

/* Navigation element styles */

.CHNavLinkTop, .CHNavLinkTop:hover
{
background-image: url('/resources/storage/project-sample/home.gif');
background-repeat: no-repeat;
color: transparent;
width: 25px;
height: 25px;
display: inline-block;
overflow: hidden;
}

.CHNavLinkNext, .CHNavLinkNext:hover
{
background-image: url('/resources/storage/project-sample/next.gif');
background-repeat: no-repeat;
color: transparent;
width: 25px;
height: 25px;
display: inline-block;
overflow: hidden;
}

.CHNavLinkPrevious, .CHNavLinkPrevious:hover
{
background-image: url('/resources/storage/project-sample/prev.gif');
background-repeat: no-repeat;
color: transparent;
width: 25px;
height: 25px;
display: inline-block;
overflow: hidden
}