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.
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 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.
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 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 Topic Options tab on the left of the main editor window, 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 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 and click on Add to create a new template. See HTML topic page templates for full details and instructions.
Using multiple topic page templates in skins:
You can create multiple topic page templates in skins. However, to be able to use them you must also create additional page templates with exactly the same names in all the projects you use with the skins. This is necessary so that you can select the template name in the Topic Options tab to associate it with individual topics. The contents of the additional templates in the project are irrelevant because they are not used. You only need the names so that you can make the association with the topics.
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 , 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 source 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.
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.
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.
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
1.Select the template you want to edit then select the Edit HTML Code tab in the editor window.
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.
|
The HTML template source code window is a basic HTML code editor with syntax highlighting that makes it easy to see the different components of your template code.
In addition to all the normal editing functions it also has a number of additional features available in the right-click context menu:
In addition to standard editing features there are two useful tools:
Insert Color Code:
Displays a color picker and inserts the color value as a standard HTML hex triplet (e.g. #ffffff for white).
Pixel < > Em Calculator:
Converts values between pixels and ems. This is very useful when you are converting traditional pixel-based layouts to responsive ems-based layouts.
Important: Ems are relative!
Ems is actually a relative value. When converting between pixels and ems you need to enter the base font percentage value first. This percentage represents the size of your base font relative to the base font of most browsers, which is 16 pixels.
For example, if your main body text font is 11 points, that is equivalent to 15 pixels. To get the same base font size in your output in the majority of browsers you need to set the base font percentage to 95%, and that will then be equal to 1 em within the context of your project.
|
See also:
Templates and Secondary Windows
Help Windows (Reference)
