Edit online

WebHelp Skin Builder

The WebHelp Skin Builder is a simple, easy-to-use tool, specially designed to assist users to visually customize the look and feel of the WebHelp output. It is implemented as an online tool hosted on the Oxygen XML website and allows you to experiment with various styles and colors over a documentation sample.

To be able to use the Skin Builder, you need:
  • An Internet connection and unrestricted access to Oxygen XML website.
  • A late version web browser.

To start the Skin Builder, use a web browser to go to https://www.oxygenxml.com/webhelp-skin-builder.

Skin Builder Layout

The left side panel of the Skin Builder is divided into 3 sections:
  • Actions - Contains the following two buttons:
    • Import - Opens an Import CSS dialog box that allows you to load a CSS stylesheet and apply it over the documentation sample.
    • Export - Saves all properties as a CSS file.
  • Settings - Includes a Highlight selection option that helps you identify the areas affected by a particular element customization.
    • When hovering an item in the customizable elements menu, the affected sample area is highlighted with a dotted blue border.
    • When an item in the customizable elements menu is selected, the affected sample area is highlighted with a solid red border.
  • Customize - Provides a series of customizable elements organized under four main categories:
    • Header
    • TOC Area
    • Vertical Splitter
    • Content
    For each customizable element, you can alter properties such as background color or font face. Any alteration made in the customizable elements menu is applied in real time over the sample area.

Creating a Customization Skin

  1. You can start with one of the built-in skins or a CSS stylesheet applied over the sample using the Import button.
  2. Use the elements in the Customize section to set properties that modify the look of the skin. By default, all customizable elements display a single property, but you can make more visible by clicking the Add button and choosing from the available properties.
    Note: If you want to revert a particular property to its initial value, click the Reset button.
  3. When you are happy with the skin customizations you have made, click the Export button. All settings will be saved in a CSS file.

Apply a Customization Skin to a DocBook to WebHelp Classic Transformation Scenario

  1. Start Oxygen XML Editor.
  2. Load the DocBook file you want to produce as a WebHelp output.
  3. In the Parameters tab, set the webhelp.skin.css parameter to point to the previously exported CSS.
  4. To customize the logo, use the following parameters: webhelp.logo.image and webhelp.logo.image.target.url.
  5. Run the transformation to obtain the WebHelp output.

Resources

For more information about using the WebHelp Skin Builder, watch our video demonstration: