WinANT Help

 

Working with WinANT Skins

This topic explains how WinANT skins work, and details some hints and tips for their use.

The standard WinANT installation includes a number of skins. Skins are a configuration of CSS, HTML head block, HTML header and footer blocks, and a support file list. Skin configurations are stored in an XML file in the WinANT resources folder (typically [program files]\HyperWrite\WinANT\resource\winant_skins.xml). The skins XML file is in the following format:

<winant_skins>
<skin name="Swinburne" 
			header="swin-header.html" 
			footer="swin-footer.html" 
			headblock="swin-headblock.html" 
	  css="swin_ditastyle.css"
   include="swin_include.txt">
</skin>
<skin.../>
<skin.../>
</winant_skins>

You can create your own skins by creating the necessary header, footer, headblock, CSS and include files, and then modifiying the skins XML file. When WinANT launches, it uses the winant_skins.xml file to build the Tools > Apply Skins menu. Selecting a skin from that menu will automatically complete the related fields on the Main tab of the WinANT window.

Typically, the skin settings refer to relative locations of the files. For example, nominating a CSS file of swin_ditastyle.css in the css attribute will result in the location [program files]\HyperWrite\WinANT\resource\swin_ditastyle.css being automatically entered in the Custom Stylesheet field. Accordingly, you should store your custom skin configuration files in the resources folder.

When naming skin configuration files, use a naming convention of skin prefix, then a hyphen, then the type of file, then the file extension, as in the following example of a Swinburne University skin:


Don't hard code image locations in header and footer blocks

If you need to include empty elements, include a non-breaking space (&160;), or an empty span, otherwise the transformers will convert <div></div> to <div/>, and some browsers won't apply background-image elements correctly to a shorthand empty element.

Change the metadata in the headblock (optional, but best practice).

Include any graphics referenced in a stylesheet in the include file so it gets copied to the output folder.

Make sure CSS files are compliant. Test against:

Make sure header and footer files are valid XML.