As an option, the appearance of the wizard can be adapted to your company's design guidelines by uploading a customized HTML template into the device. The template can specify the basic structure of HTML pages and the design of colors, fonts, etc. by means of CSS rules.
Two fixed tags in the HTML template are used to insert the contents from the wizard into the respective HTML pages:
- <WIZARD_LOGO>: The wizard inserts the logo (GIF, JPEG or PNG format) as saved to the device.
- <WIZARD_CONTENT>: This tag marks the point where the wizard inserts the contents of the sections in the form of a two-column table with the corresponding buttons.
A very simple example of an HTML template looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title of the wizard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div>
<WIZARD_LOGO>
</div>
<WIZARD_CONTENT>
</body>
</html>
The wizard uses a selection of predefined CSS classes that you can easily customize by specifying appropriate values in your HTML template, including:
- class="header": The CSS class for the header with the logo.
- class="wizardName": The CSS class paragraph with the name of the wizard at the head of the page.
- class="headerLogo": The CSS class for the area for the logo in the header.
- class="wizardTable": The CSS class for tables with the displayed fields.
- class="footer": The CSS class for the footer with the buttons.
