Website Deliverables - webworks.com Previous Next Index Print
Creating a Custom Theme for WebWorks Help 5.0

Creating a Custom Theme for WebWorks Help 5.0

Last Modified: October 12, 2006

ePublisher Pro

The purpose of this article is to describe how to create a custom WebWorks Help 5.0 theme by adjusting the color of the images used to build this output format.

Several different themes are offered by ePublisher Pro, but if none of the color schemes suits your needs, you can modify an existing theme to get the look you require. You’ll want to follow these steps:

Create a New Theme

A theme controls the colors, fonts, and buttons of a WebWorks Help 5.0 layout, so the first step is to copy the necessary files from an existing theme.

ePublisher Pro\Formats\WebWorks Help 5.0\Skins\

2)

Select the theme for which you’d like to change the colors and/or buttons. To give you a starting point, the theme layouts installed with ePublisher Pro are:

Classic

Aero

Architect

Freeform

Lobby Blue

3)

Create a copy of the chosen skin’s folder (the following example is based on the Lobby Blue theme) and rename it using the name you’d like to give to the new theme.

Modify the Theme’s Images

Since the colors of all the tabs, buttons, and panels are determined by images, you’ll have to adjust the color of those images to change the look of your theme. To accomplish this, you’ll need a graphics editing application that allows you to adjust the hue of an image. For this example, we used Adobe Photoshop Elements 2.0; consult your application’s documentation for more information.

Skins\My_Theme\Files\wwhelp\wwhimpl\js\images

b)

Adjust the color (hue/saturation/lightness) as desired. For best results, change each setting by the same value for each image.

\Skins\My_Theme\Files\wwhelp\wwhimpl\common\images\

Apply the Changes to Your Project

After creating the new theme and modifying the images to reflect the color scheme you’d like to use, you can integrate your custom theme into the settings of any WebWorks Help 5.0-based project.

2)

Perform a Project Target Override on a file called wwhelp_settings.fti, located by default in the ePublisher Pro installation directory, here:

ePublisher Pro\Formats\WebWorks Help 5.0\Transforms

3)

When wwhelp_settings.fti is copied correctly into your project directory, open it in a text editor, such as NotePad.

4)

In the <Class name=”wwhelp-skin”> section, add a new item for the theme you have created. For example:

<Item value="My_Theme" stringid="wwhelp-theme-my-theme" />

5)

Save and close wwhelp_settings.fti.

To define text attributes (font, color, size, etc.) for your new theme, modify wwhelp_settings.xml, as describe in “Customizing Tabs and Panels in WebWorks Help 5.0” on page 1.