Changing the Appearance of WebWorks Reverb
Most customizations to WebWorks Reverb rely upon changing one of three file types:
*Page Templates - Found in the Pages folder and have the extension .asp. Users may create overrides for these files in their project to change overall layouts
*skin.css - Found in the Pages\css folder. Users may change the color, icons, and other layout specific behaviors of the skin with this file. The skin settings also include the layout behaviors of breadcrums and the company information that appears above the toolbar. Changes to this file, will not have an affect on the content pages.
*webworks.css - Found in the Pages\css folder. This file is very similar to the skin.css file except that it only controls the layout behaviors of the content pages. This includes the mini-TOC and Related Topic styling behaviors.
*skin.png - Found in the Pages\images folder. This file works as a CSS sprite file, which means that it contains multiple images. Users can quickly modify colors within this file to meet branding requirements.
In the Pages folder there are sample files that can be used to preview customizations to the skin.css, webworks.css, and skin.png files. After making changes to any of these files, load the Skin.html file directly into a browser and view all aspects of the Reverb skin.
For easy reference, here are a list of page template files and their corresponding output files:
Page Template
Entry point to the Reverb run-time. This file controls the placement of the toolbar buttons, table of contents/index panels
Data file for each Reverb parcel (help set)
Data file for each Reverb parcel’s Index information
Defines the layout and appearance of the Reverb splash page
Defines the layout and appearance of generated pages
Search integration page
Finally, WebWorks Reverb makes use of CSS classes to identify elements which should perform special actions. These elements may occur in the entry page (default to index.html) or in generated pages.
CSS Class
Related Action
Displays merged TOC
Displays all defined Indexes
Displays search system
Enables/disables Google Translate
Navigates to the first page in the browse sequence
Navigates to the previous page in the browse sequence
Navigates to the next page in the browse sequence
Prints the current page
Emails feedback on the current page URL
Display related PDF for the current page