More Advanced Procedures > Using HTML Templates

All the various HTML templates used in your projects can be edited directly in the Configuration section of your project where they are stored. Help & Manual has an integrated HTML code editor with syntax highlighting, search and replace and spell checking.

Key Information

If you are publishing with a skin you must edit the templates in the skin, not in your project! Skins always replace all the HTML templates in your project. Changes made in HTML templates your project will not be reflected in your output when you use skins!

Editing HTML templates requires familiarity with HTML:

You must be familiar with manual HTML coding to edit the HTML templates yourself. Your code is also entirely your own responsibility – it is not syntax-checked in any way by Help & Manual. Only delete or change code in the standard templates if you really understand what you are doing, otherwise you may experience unexpected errors and malfunctions in your output!

When making code changes it is good practice to publish regularly to test the results of your changes, otherwise it can be difficult to localize and identify the changes that are causing a specific problem.

HTML template storage location:

All your HTML templates are stored in the main project XML file, inside CDATA sections. If you are working in uncompressed XML (HMXP mode) this is the file with the name of the project and the extension .hmxp. This is an XML file that can be edited directly with a text or XML editor, but it is actually much easier to access the templates directly in Help & Manual, where you have a code editor with syntax highlighting.

If you are using the compressed HMXZ format the project file containing the templates is called project.hmxp and it is stored inside the HMXZ file, which is really just a zip archive that you can unpack with any zip utility. Again, however, it is much easier to edit the templates directly in Help & Manual.

Topic page templates location:

In the Project Explorer go to Configuration > HTML Page Templates to edit the templates for your topics. By default there is just one template called Default that is used for all topics. However, you can define additional templates and assign them to individual topics in the tab, in the HTML Page Template: field.

These templates are used for all HTML-based output formats. The same templates are used for all formats, you cannot define different templates for specific output formats.

WebHelp templates location:

In the Project Explorer go to Configuration > Publishing Options > WebHelp to edit the additional templates for the help frameset (Layout), Table of Contents, Keyword Index and Search panes in your WebHelp output.

Topic page templates:

You can create as many topic page templates for your HTML output as you like and assign them to individual topics so that selected topics can use different layouts or include different features. Just go to Project Explorer > Configuration > HTML Page Templates > Default and click on Add to create a new template. See HTML topic page templates for full details and instructions.

WebHelp templates:

Unlike topic page templates, each project only has one copy each of the templates used for the main index page (the page containing the frames or iFrames into which navigation and topic pages are loaded) and the table of contents, keyword index and full-text search pages. You can edit these HTML pages in Configuration > Publishing Options > WebHelp, but if you want to create alternative versions you need to save your project as a skin. You can then edit the templates in the skin separately from the project and apply the template versions in the skin to any project when you publish it.

All the templates have two editing modes, in two tabs. In the simple mode tab you can make a number of changes without actually having to edit the HTML code directly. This is recommended for most users. The HTML code tab gives you direct access to all the code of the template – you should only use this option if you have experience with editing HTML and CSS code.

Very important warning:
Do NOT switch back to simple mode after editing the source code! If you do, your edits will be deleted and replaced with the standard template code. Once you switch to source code mode you need to stay there.

Simple editing mode:

Note that the Simple Template Layout tab is only available for the standard Default template. All additional topic page templates you create can only be edited in HTML Source Code mode.

1.Select the template you want to edit then select the Simple Template Layout tab in the editor window.

opt_htmltemplate_simple

2.Make your changes and additions, then save your project to save your changes.

See HTML Page Templates and WebHelp in the Reference section for details on the settings for each template type.

Editing the HTML code:

Note that user-created HTML page templates can only be edited in HTML Source Code mode.

1.Select the template you want to edit then select the Edit HTML Code tab in the editor window.

opt_htmltemplate_source

2.Edit the template in the editor window displayed. The editor supports syntax highlighting to make editing easier. See the other sections in this chapter for details on the contents of the different template types.

3.When you are finished save your project to store your changes.

The changes will be applied immediately but most of them may only be visible in your published output. However, any background colors you set for your topic body and header will be displayed in the editor directly.