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.

Create a Customization Skin

1. The starting point can be either one of the predefined 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, press the Reset button.
3. 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 Classic Transformation Scenario

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

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

1. Start Oxygen XML Developer plugin.
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.