Share:
ClickHelp Documentation

Content Styling

Frequently asked questions about styling the topics content, or changing your portal UI.

[-] Can I style my content using CSS?
Yes. Content styles can be set either from a CSS file, or with inline styling. We recommend using CSS as, in the long run, the content maintenance will be easier this way. Learn more on project style files:  Project Styles and Scripts
[-] Can we have more than one style file for a project?

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 .

[-] How to add or modify a CSS or style file?

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 .

[-] If I update a CSS style sheet of my project, will that automatically update all topics in it?

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.

[-] How can I use custom icons for the Previous/Next/Top navigation elements?

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
}