|
|
|
|
|
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: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.
|
|
To change the look of the text in your layout, see “Customizing Tabs and Panels in WebWorks Help 5.0” on page 1. |
|
1) |
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. |
|
3) |
\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
|
|
See “Creating Project Target Overrides” on page 1 for details on this procedure. |
|
3) |
When wwhelp_settings.fti is copied correctly into your project directory, open it in a text editor, such as NotePad. |
|
4) |
In the |
<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.
