HTML Page Templates

<< Click to Display Table of Contents >>

Navigation:  Reference > Project Configuration Settings >

HTML Page Templates

This section allows you to edit the HTML templates that define the layout and general appearance of your topic pages in all HTML-based output formats. See Using HTML Templates for full details.

HTML page templates are shared:

Note that the same HTML templates are used for most HTML-based output formats (HTML Help, WebHelp, Windows EWriter eBooks and both versions of Visual Studio Help). The only exception are ePUB and Kindle eBooks. The layout for these eBooks is extremely strict and they uses special template generated by Help+Manual. You can edit this template in Configuration > Publishing Options > eBooks, but please only do so if you are familiar with the eBook specifications.

If you are using an HTML skin you must edit your templates and settings in the skin!

Nowadays you will almost always choose an HTML skin to publish your project to WebHelp or HTML Help/CHM. A skin is a special kind of Help+Manual project without topics that only stores your HTML templates and all the settings relevant for HTML output to these two formats. When you choose a skin, the templates and settings in the skin completely replace those in your project.

Normally, a skin is pre-designed and you don't need to change anything. However, if you do want to change something, you must do all your editing in the .hmskin skin file. Editing in your Help+Manual project won't have any effect because those templates and settings are not used.

To edit a skin, make a copy of the .hmskin skin file in your project folder and then open it in Help+Manual by selecting .hmskin as the file type to open in the Open dialog. All the templates and settings are in the same places as in a normal Help+Manual project.

Exception: HTML Export Options

The HTML Export Options section is not stored in skins and needs to be edited in your project.

Simple Template Layout tab:

The Simple Template Layout tab hides the HTML code of the page template and allows you to make some simple changes and additions. This mode is recommended if you do not have experience with editing HTML code.

Disabled Simple Layout tab:
The Simple Layout tab will be disabled as soon as you edit source code to prevent accidental deletion of your custom code. It can only be re-enabled by clicking on the Reset Template button. This will delete the edited code and replace it with the standard template

Add / Delete

Create new HTML templates and delete existing ones. You can assign page templates to individual topics when you create them and in the Topic Options tab on the left of the main editor window.

Reset Defaults

Resets the current page template to the default settings.

Header /Text background color:

Defines the background colors of the topic header and text.

Text above topic:
Text below topic:

Any text you enter in these two editing boxes will be inserted on every page above and below the main text of your topic.

HTML code is permitted but you are responsible for the correct syntax.

Topics with headers have <Top>, <Previous> and <Next> links:

Activating this option adds additional navigation links to the headers of your topic. These links always point to the Top topic (the home topic defined in Configuration > Common Properties > Language Settings) and the Next and Previous topics in your help.

You can edit the captions of the links in the Caption column but you cannot change their functionality.

By default the links are text-only. You can create button links by selecting graphics files for your buttons in the Image File column. Use the BTN_Browse browse button to locate the graphics files.

HTML Source Code tab:

In this mode you can edit all the code of the HTML templates for your help window definitions manually with a basic HTML code editor with syntax highlighting. Experience with editing HTML code is needed please don't change or delete anything here unless you really understand what you are doing!

Disabled Simple Layout tab:
The Simple Layout tab will be disabled as soon as you edit source code to prevent accidental deletion of your custom code. It can only be re-enabled by clicking on the Reset Template button. This will delete the edited code and replace it with the standard template

See also:

Templates and Secondary Windows

Using HTML Templates