The 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 later version web browser.

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

From a web browser navigate to http://www.oxygenxml.com/webhelp-skin-builder.
From the Oxygen XML Editor in the Skins tab, click the Online preview link. 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 two buttons:
- Import - allows you to load a CSS stylesheet and applies it over the documentation sample.
- Export - saves all properties as a CSS file.
Settings - contains the Highlight selection checkbox which 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 like 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 skin's look. By default, all customizable elements display a single property, but you can make more properties visible if you click the Add button and choose from the available ones.
Note: If you want to revert a setting of a particular property to its initial value, press the Reset button.
When you are happy with the skin customization 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.
Execute 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.
Edit a DocBook to WebHelp-type transformation scenario. Set the previously exported CSS file in the Custom section of the Skins tab.
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 - Specifies a path to an image displayed as a logo in the left side of the output header.
- webhelp.logo.image.target.url - Specifies a target URL that is set on the logo image. When you click the logo image, you will be redirected to this address.