Navigation:  Basic Working Procedures > Creating Topic Files >

Using HTML page templates

Print this Topic Previous pageReturn to chapter overviewNext page
Show/Hide Hidden Text

Each topic in your project is also associated with an HTML page template, which defines everything in your topic pages outside of the main body of your topics in HTML-based output formats (HTML Help, Webhelp, Windows Exe and ePub eBooks, Visual Studio Help). HTML page templates are irrelevant for Winhelp, PDF, RTF and printed manuals.

New projects only have one HTML page template called Default, which is automatically assigned to every new topic. You can create as many additional templates as you like and assign them to individual topics in the tab behind the main editor window.

 

       Key Information

HTML page templates are only relevant for HTML-based output formats. They are ignored in all other output formats.

Topic and header background colors

In all HTML-based output formats the background colors of the topic and topic header are defined in the HTML page template. The colors you define in the template are also automatically displayed in the Help & Manual editor.

In the Project Explorer go to Configuration > HTML Page Templates > Default and set the background colors for the topic and topic header.
If you edit the HTML code of the template manually you can also set the header and background colors manually. The topic background color is set in the <body> tag, the header background color is the background of the main table in the section defined by the <IF_TOPIC_HEADER> condition.

The background colors in the obsolete Winhelp format are defined in the help window settings for Winhelp and are not displayed in the editor.

Navigation link texts or buttons

By default every topic in HTML-based output formats has Top, Previous and Next navigation links. These links can be deactivated and edited in the HTML page template and replaced with icons.

In the Project Explorer go to Configuration > HTML Page Templates > Default and edit the settings for the Top, Previous and Next Links in the Simple Template Layout tab.
If you edit the HTML code of the template directly you are completely free to make any additions you like. For example you could create icon buttons with mouseover effects and so on.

If you use icons for your navigation links it is a good idea to add the icon files to your Baggage Files in the Project Files section of the Project Explorer. This will ensure that the icons are exported correctly when you publish your output.

Adding headers and footers to your pages

You can also add "headers" and "footers" to your HTML page templates to display standard text, icons, logos or links above or below the main body of your text on every topic page.

Simple template layout tab:

1.In the Project Explorer go to Configuration > HTML Page Templates > Default and select the Simple Template Layout tab.
2.Insert text for your header or footer in the Text Above Topic or Text Below Topic boxes. You can also use HTML code, CSS formatting and JavaScript.

HTML source code tab:

If you have experience with editing HTML you can also edit the HTML code directly.

1.In the Project Explorer go to Configuration > HTML Page Templates > Default and select the HTML  Source Code tab.
2.The topic content from your project is inserted in the template with the <%TOPIC_TEXT%> variable. Everything directly above this variable is a "header", everything below it is a "footer".

See Using HTML Templates for more details.

Defining and using different HTML templates for individual topics

By default every topic you create is associated with the Default template. You can also create additional HTML page templates with different settings and apply them to individual topics for example to use different topic and header background colors or different navigation buttons etc. in some topics.

Creating new HTML templates:

1.In the Project Explorer go to Configuration > HTML Page Templates > Default and click on the Add button.
2.Enter a name for the template and click OK.
3.Edit the code of the template as you wish.

Applying HTML templates to individual topics:

1.In the Project Explorer select the topic you want to change.
2.Select the tab, then select the template in the HTML Page Template: field.

See also:

Help window settings

Using HTML templates

 


Page url: http://www.helpandmanual.com/help/index.html?hm_working_topics_ptemplate.htm