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:
- Locate the following folder in your DITA-OT directory (DITA_OT_DIR):
DITA_OT_DIR/plugins/com.oxygenxml.webhelp/templates/dita/ - Duplicate the
bootstrapfolder and rename it to whatever you want your new template to be identified as (for example,myTemplate). - 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/variantsfolder and delete all of its subdirectories, except for that one (for instance, thetilesdirectory). 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. - 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
tilesvariant, open themyTemplate/variants/tilesfolder and delete all of its subdirectory skins, except for that one (for instance, thelightdirectory). You can also edit theskin.cssfile 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 theresourcesfolder at the same level with theskin.cssfile. - 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.