WebHelp Template Resources

All templates are stored in the templates/dita folder located in the root folder of the oXygen XML WebHelp plugin. The structure of an WebHelp Responsive template is the following:

At the first level of the template directory we can find the following predefined files and folders:
  • resources folder - contains all additional resources used by the template, such as images, CSS, and JavaScript files.
  • variants folder - contains the template variants.
  • template files:
    • wt_index.html - Used to generate main page.
    • wt_topic.html - Used to generate HTML pages for each topic.
    • wt_search.html - Used to generate the HTML page for presenting the search result.
    • wt_terms.html - Used to generate the page for index terms.

After the transformation scenario is executed, the resources and variants folders are copied in the output in the {outDir}/oxygen-webhep/template directory.

Template, Variant and Skin Concept

A template could be seen as a set of WebHelp components that are put in a predefined HTML layout.

If we want to display one or more template components we could obtain one or more variants of the template. So, a WebHelp template variant is an instance of the template with a specific set of parameters. For instance, we could have two variants of the WebHelp main page, one that displays the topics as tiles and another one that displays the topics in a tree-like fashion.

Each variant has its own directory which gives the name of the variant. The name of the variant is also displayed in the user interface when the template's variants are displayed.

The variant's directory could contain the following resources:

  • params.properties - This file specifies the values for the parameters imposed by the variant.
  • resources - Optional directory. It contains resources that are specific to the current variant (images, CSS files, etc). They will be copied to the output directory.
  • one or more skin directories that represent skins of the current variant.

A variant's skin represents a CSS that allows you to alter the styling of the template. This skin might need additional resources (images, fonts) that must be stored in the resources directory in the skin's root folder. The name of the skin directory will give the name of the skin and it will be displayed in the UI when you choose a variant's skin.

The CSS associated with a skin must be named skin.css and it must be stored as first child of the skin's directory.

The skin directory can also contain a skin.png preview image, that will be displayed in the UI, and a properties file containing an URL for the online preview of the skin.