Content Styling FAQ

Yes. You can set content styles either from a CSS file or with inline styling. However, 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.

Yes. You can specify several CSS style files for a Project. This may be useful when using 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. 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. Just refresh the page to see the changes in a topic that is already open. When a topic is in the editing mode, click Refresh CSS Styles in the Styles section on the Home tab of the Design mode 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 text elements. To do this, you will need to add a few CSS styles to your project style file. Once you do this, all the navigation elements will get a new style without the 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;
}