The markup in a nominated header file will be added to the top of the HTML body section of generated output topics. Likewise, the markup in a footer file will be added to the bottom of the HTML body section. The markup in a head block file will be added to the bottom of the HTML head section of the generated topics. A nominated CSS file will be linked (in the head section) in the generated topics, and the CSS file itself will be copied into the root of the ouptut folder. The CSS link uses a relative path, and will cope with output topics in sub-folders.

Header, footer and head block code snippets must be valid XML, using XHTML syntax. One of the rules required for an XML file to be valid is that there must be a root element. If your header code comprises two paragraphs, you must wrap these two paragraphs into a div element, for example, so that the div element serves as the root element of the snippet. If you need to use special characters, such as a non-breaking space, you must use XML syntax, not HTML (ie, &160; not  ).

When inserted into the HTML output files, the resultant code must be valid XHTML.

If you need to include empty elements, include a non-breaking space (&160;), or an empty span, otherwise the transformers will use shorthand syntax instead of complete syntax (eg, <div /> instead of <div></div>). Shorthand syntax may cause some rendering problems in some browsers; for example, background-image styling won't be correctly applied.

When coding header and footer snippets, do not place images using the standard <img> element. Relative locations of images are not maintained when the code is injected into the output. For example, an image in the root folder might be correctly referenced by the code <img src="abc.png" /> when a topic is in the root folder, but the reference will be incorrect if the topic is in a Concepts sub-folder. As an alternative, use CSS to place images, as the Open Toolkit transformers correctly manage the relative location of the nominated CSS files, and the location of an image referenced in a CSS rule will always be relative to the CSS file location, not the topic location.

If your CSS files uses referenced graphics (eg, h1 {background-image: url('swin-banner.png');}, you must include the paths to those image files in the include file so that the files get copied to the output folder during the build.

Although it is technically optional, it is best practice to include a simple winant metadata line in the head block code to record the project or company for which the custom configuration (header, footer, head block and CSS) files were created. The format of the metadata is:

<meta name="winant" content="Swinburne University"></meta>