Starting with Doc-To-Help 2013 v2 (December 2013), Responsive NetHelp is available in Doc-To-Help. This is essentially a new theme for NetHelp, our browser-based output, called “Responsive,” but it is much more than just a theme. It gives you a version of NetHelp that automatically adjusts itself to smartphone, tablet, and desktop screen sizes. This output is very clean and modern, but it may be a departure from the traditional tri-pane Help you are used to seeing. This article will explain the things you need to know and the options available to you.
Responsive NetHelp replaces Mobile Help
Since Responsive NetHelp is the recommended way to produce online Help for mobile devices, Mobile Help is no longer available. If you have projects with Mobile Help, Doc-To-Help will convert them to Responsive NetHelp.
Where to Find Responsive NetHelp
To generate Responsive Help, all you need to do is switch to the Responsive theme. To do so, drop down the Theme menu and choose Responsive.
The Theme Designer will open. If you want to use the default settings, click OK and you are ready to generate your new output.
Three Designs to Choose From
The Responsive Theme has three designs, or style sheets, to choose from. When you first choose the Responsive Theme as described above, the Theme Designer opens. You will see a message saying “This is a predefined theme. It cannot be modified,” but you can choose from three different style sheets. Your choices are Standard, Light, and Dark. To change the design, drop down the Style sheet menu and select the one you would like to use. Note that the Standard style sheet is recommended if you would like to customize (described later in this article).
Navigating the Table of Contents
The Table of Contents in Responsive NetHelp may be different from the tree view you are used to seeing in traditional help systems. The side bar always displays one level of topics. For example, when you first open Responsive NetHelp, the TOC will only display the top-level topics. If a topic has sub-topics, an arrow icon will appear the left of the topic title.
These TOC items are split buttons. If you click (or tap) the arrow, the side bar will display the sub topics and the parent topic title will appear in the side bar’s header, giving you a way to navigate back up a level. If you tap the topic title, the topic will load (and the side bar will collapse on small screens). This is designed to follow traditional mobile navigation practices.
Doc-To-Help includes a powerful Theme Designer to help you customize themes. To preserve the orginal theme, Doc-To-Help does not allow you to edit pre-defined theme, so you need to create a new one.
To create a new theme, drop down the Theme menu and select Add New Theme.
The Add New Theme dialog will open. All you need to do is name your theme and click OK. Your new theme will open in the Theme Designer.
Common Customizations Using the Theme Designer
The most common custmozations are toggling the project title in the header, adding a logo, and changing colors.
Toggling Header Text
Some users would prefer to leave the top toolbar blank, but it displays the project title by default. To turn the header text off select the pageHeader and clear the Show Text checkbox.
Note that you can set the header text in the Advanced section of the Target Properties dialog as shown below
Adding a Logo
Responsive NetHelp will show your logo at the top of the side panel when the top-level TOC is showing. To add your logo select the sidePanel, click the Logo Image button, and browse to your logo file.
Responsive NetHelp uses color swatches for virtually every element. These swatches are names with letters “A” through “E.” You can change the color of an element by selecting it and change the swatch. In the example below, the swatch for the side panel was changed to “E.”
Creating Your Own Design
Responsive NetHelp is based on jQuery Mobile which has its own theming tool called the ThemeRoller. The ThemeRoller lets you specify the design and then it generates a style sheet. To use your own style sheet, click the Add New Style Sheet Button and follow the instructions in the Add New Style Sheet dialog.