Customizing WebWorks Reverb Skin

WebWorks Reverb allows you to customize all aspects of its user interface (UI).

Customizing the UI is not something new for WebWorks output formats, however, what is new is the fact that you can now modify all the icons and buttons used in the UI by simply editing one file.

Objective

In this solution, you will be shown how to easily change all the icons and buttons used in your Reverb Help skin.

For a detailed recorded webinar, see the following Power Hour:

• http://www.webworks.com/Recordings/2012/08/Power%20Hour%20-%20August%202012/

Example Implementations

• http://www.webworks.com/Documentation/Reverb/

• http://www.webworks.com/Info/CABB/1/The_Evolution_Of_Online_Help/

One Skin File

Just modify the graphics within each dashed-box as you desire.

Steps for ePublisher users

1. Create an ePublisher Pro project and create overrides for the following files in the WebWorks Reverb format.

   • Targets/WebWorks Reverb/Pages/
       Skin.html
       Skin_Lightbox.html
       Skin_Search.html
     
     Targets/WebWorks Reverb/Pages/images/
       skin.Fireworks.png
       skin.png
       splash.png
     
     Targets/WebWorks Reverb/Pages/css/
       skin.css

2. For best results, modify the skin.Fireworks.png file using the Adobe Fireworks software program.

   1. After your modifications, save the file.

   2. Overwrite the existing skin.png by performing a Save As PNG (flat).

3. Or, if you do not have access to Adobe Fireworks, you can directly modify the actual skin.png file using any image editing program.

4. Test each state of your icons by opening the file: Skin.html in a standard web browser.

5. Now you can update your Stationery and begin publishing with your new icons.

   • For more information, see http://www.webworks.com/Documentation/Reverb/index.html#page/02.Designing%2520Templates%2520and%2520Stationery/Customizing%2520Stationery.4.27.htm

Designers

If you have a graphic designer that does not use ePublisher assisting you with creating a new skin.png file, then you can provide them the files in this zip file: reverb_skin_files.zip.

Make sure they provide you with updates for:

• CSS files (skin.css, webworks.css, etc.)

• skin.Fireworks.png and skin.png