WebHelp Responsive Template Mechanism

The WebHelp Responsive template mechanism is the base of the system and it is responsible for defining its output. It consists of a set of HTML template files and other additional resources (such as images, CSS, and JavaScript files). Each of the HTML template files contain one or more template components (such as title, table of contents, search input, etc.) whose placement inside the template will define the final layout of the output.

This mechanism allows you to create multiple layouts simply by creating templates that define the location of where the various components will be displayed.

Creating WebHelp Responsive Templates

To create a new WebHelp Responsive template, follow these steps:
  1. Locate the following folder in your DITA-OT directory (DITA-OT-DIR):
  2. Duplicate the bootstrap folder and rename it to whatever you want your new template to be identified as (for example, myTemplate).
  3. Customize the structure of the new template according to your needs. For example, if you only want to keep one of the template variants, open the myTemplate/variants folder and delete all of its subdirectories, except for that one (for instance, the tiles directory). Keep in mind that the structure of the template directory is important. The names of folders at certain levels correspond to the names of templates and skins, while components and resources are defined and referenced in certain files or folders at specific locations within the directory structure. For more information, see WebHelp Responsive Template Directory Structure.
  4. You can also customize the structure of the skins within the template variants. For example, if you only want to keep one of the skins in the tiles variant, open the myTemplate/variants/tiles folder and delete all of its subdirectory skins, except for that one (for instance, the light directory). You can also edit the skin.css file that is located in the skin directory to customize the styling. If your customization of the CSS file requires additional resources (such as images, fonts, or other CSS files), they need to be placed in the resources folder at the same level with the skin.css file.
  5. To customize the components that appear in the WebHelp Responsive output, you can modify the HTML template files that define the output. For more information, see WebHelp Responsive Template Files.