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:

skin_icons_sm.png

Example Implementations

One Skin File

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

skin.png

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.

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:

TonyMcDow/@Solutions/Output/Reverb/CustomizingSkin (last edited 2015-01-27 16:23:29 by BenAllums)