ClickHelp Documentation

Reader Interface Settings

In the Reader Interface section of the Portal Settings, you can manage the look of your portal's reader UI in a convenient visual way with a real-time approximate preview of all changes made.

Tip
To learn how to preview your content as a reader, refer to the following topic: How to Preview My Content.

 Let's take a closer look at all available options.

Note
Different templates have different options available. Reader Interface settings do not affect the Author UI.

Portal UI Template

The select portal UI layout template dropdown list in the portal settings

The Select portal UI layout template drop-down list allows you to choose one of the six available reader UI templates: Clear Sky, Sunset Hour, Oxygen, Deep Space, Mountain Mist, Milk Oolong.
If the premade templates do not fulfill your needs, click the Need More Templates? button and describe your requirements in the opened pop-up window. We will get in touch and depending on the amount of work required, we will either provide you assistance in the scope of the Technical Support or with an estimate for a Branding service project. 

Portal UI Branding

The Portal UI branding section in the Reader Interface settings

The Portal Branding CSS field allows you to specify a particular style file used for customizing the Reader UI. The Portal Branding script field enables you to set a specific JavaScript file to add advanced functionality to the Reader UI. Next to each, there's an Open file in a new window button to open the existing Portal Branding CSS and Portal Branding script files for viewing and editing. Respectively, Create a new file buttons allow you to create new files. 

Tip
You can learn about style and script files from the following topic: Advanced Branding with CSS

The Show the 'Log In' link checkbox allows you to choose whether the Log In button will be available for unauthorized readers in the top right corner of the screen or not. If this option is unchecked, unauthorized readers still can use the direct URL link to the login page to authenticate.

UI Colors

The UI Colors section in the Reader Interface settings

This section allows you to choose the colors in which selected and hovered elements such as buttons, TOC nodes, menu items, etc., will be highlighted. Click the dropdown arrow near the value you want to change, and you will be able to select a predefined color from the palette or pick a custom color by using the color picker. You can also input a HEX color code directly into the input field.

Fixed Width Layout

The width layout section in the Reader Interface settings

When checked, the Limit content width checkbox enables limiting the content area width with the following Content width setting. The Content width field is where you input the actual content width in pixels.
The Page background first color and Page background second color fields allow you to choose the first and the second background colors in the same manner as described aboveThe easiest way to learn which area of reader UI is the first and second background is to change these colors and check out how the preview has changed because the result will be different in different templates.

Application Header

The Application header section in the Reader Interface settings

Application Header is the area at the top of your application. It remains the same across different projects and pages of your portal (except the Portal Home Page). You can see it highlighted on the following screenshot:

Application header in the Reader UI

The Show header checkbox toggles the display of this area on and off. It is also possible to set the Minimal heightText color, and Background color of the Application Header in the corresponding fields below.
The Background image preview area allows you to use an image as a background instead of a plain color. Click the preview area and browse the image file or simply drag&drop the file into it.

Application Footer

The Application footer section in the Reader Interface settings

Application Footer is the area similar to Application Header: it also remains the same across different projects and pages of your portal (except the Portal Home Page). However, this one is located at the bottom of your application, and by default,  it is switched off and has no content.

The Show footer checkbox toggles the display of this area on and off.

The HTML content field allows you to add various content into the Application Footer area. The content can be different: plain text or a full-fledged HTML code with styles and scripts.
It is also possible to predefine Text colorLink color, and Background color displayed within the Application Footer in the corresponding fields.

Right/Left Sidebar

The sidebar section in the Reader Interface settings

The Right Sidebar (depending on the chosen template, it can be a Left Sidebar) is located at the right side of a reader UI. It contains some additional useful features. The common features among most of the templates would be the Mini-TOC and See Also List. For more information about the Right/Left Sidebar element, refer to the Sidebar Navigation Element topic.

The Right sidebar in the Reader UI

The Show sidebar checkbox allows you to turn the display of this element on and off.

The Width field sets the width of the Right/Left Sidebar element.

It is also possible to predefine Text colorLink color, and Background color displayed within the Right/Left Sidebar element in the corresponding fields. 

Navigation Panel

The navigation panel section in the Reader Interface settings

The Show the navigation panel checkbox toggles the display of a Navigational Panel — a panel containing Table of Contents (TOC), the Show Index button, and the Topics filter field.

If the Allow readers expand/collapse the panel  checkbox is checked, your readers will be able to expand and collapse the Navigation Panel. If unchecked, they won't.

The Panel width and Background color fields allow you to set the Navigational Panel width and background color.

TOC Filter Visibility

The Show the TOC quick filter box above TOC checkbox toggles the display of the Topics filter field.

TOC Default State

This subsection allows you to choose the default state of nodes in your TOC. There are three options available:

  • All nodes collapsed.
  • Levels expanded. Sets the maximum node level at which all nodes will be open by default. Only levels 1-3 are available for selection.
  • All nodes expanded.

TOC Node Expand/Collapse Button Position

The TOC nodes section in the Reader Interface settings

This subsection allows you to choose whether the TOC Node Expand/Collapse button will be positioned to the left or right from the topic caption or to disable the button at all.
If the third option is chosen, it may be useful to allow expanding and collapsing unfocused nodes by clicking on their caption in the TOC Node Click Behavior subsection.

TOC Node Click Behavior

When the Expand/collapse nodes on caption click checkbox is checked, the unfocused nodes in TOC will expand or collapse upon their caption click in addition to becoming focused. If unchecked, the unfocused nodes will only become focused upon their caption click. 

If the caption of the already focused node is clicked, the node will change its expand/collapse state regardless of this option. 

Important
When checked, this option affects only desktop browsers.

Index Keywords

The Show Index Keywords checkbox allows you to show/hide the Show Index button. You can read about the Show Index button and Index Keywords in the following topic: Index Keywords.

Topic Viewer

This subsection allows you to manage various additional Topic Viewer options.

The elements in the Reader UI
  1. Breadcrumb items separator. Changes the view of the breadcrumb's items separator. You can use any set of characters you want. You can also use an HTML markup as the separator.
  2. Mini-TOC max heading level. Sets the maximum level of headings the system will display in the Mini-TOC.

Topic Viewer Header

Topic Viewer Header is the area above the content of a topic:

Topic viewer header in the Reader UI

The Show topic header in the Topic Viewer checkbox toggles the display of the Topic Viewer Header area.
It is also possible to change the Text color and Background color of this area in the corresponding fields.