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 Editor website and allows you to experiment with different styles and colors over an inert documentation sample.

To be able to use the Skin Builder, you need:

An Internet connection and unrestricted access to Oxygen XML Editor website.
A late version web browser.

To start the Skin Builder, do one of the following:

For DocBook or DITA WebHelp systems, use a web browser to go to http://www.oxygenxml.com/webhelp-skin-builder.
For DITA WebHelp systems, you can click the Online preview link in the Skins tab of a DITA OT transformation scenario. In the upper section of the preview, click the Select Skin button, then choose Customize Skin.

The 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.

Create a Customization Skin

The starting point can be either one of the predefined skins or a CSS stylesheet applied over the sample using the Import button.
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, press the Reset button.
When you are happy with the skin customizations you have made, press the Export button. All settings will be saved in a CSS file.

Apply a Customization Skin to a DITA Map to WebHelp Transformation Scenario

Start Oxygen XML Editor.
Load the DITA map you want to produce as a WebHelp output.
Edit a DITA Map to WebHelp-type transformation scenario. Set the previously exported CSS file in the Custom section of the Skins tab.
Run the transformation to obtain the WebHelp output.

Apply a Customization Skin to a DocBook to WebHelp Transformation Scenario

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