= 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/]]

{{attachment:skin_icons_sm.png}}


=== 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.

{{attachment: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
}}}

 1. For best results, modify the '''skin.Fireworks.png''' file using the ''Adobe Fireworks'' software program.
   1. After your modifications, save the file.
   1. Overwrite the existing '''skin.png''' by performing a '''Save As PNG (flat)'''.

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

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

 1. 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:
[[attachment: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''