Help Topics

Template Files

CSS Template Files

CSS

CSS stands for "Cascading Style Sheet" and is the standard means of applying styling (colours, fonts, layout, etc.) to web pages. This allows web page content (text, tables, etc.) to be largely separated from style. This in turn makes it easier to update or change web page styling effects without having to edit the entire web page.

CSS Template Files

Two CSS templates are provided. The differences between them are simply to accomodate differences in horizontal resolution.

pagelayout_top0850.css - For SVG files with a horizontal resolution of 850 pixels.
pagelayout_top1000.css - For SVG files with a horizontal resolution of 1000 pixels.

Rename the CSS File

The web page template expects a CSS file with the name pagelayout_template.css. Select the page layout template that you need, copy it to the hmi directory, and rename it to this exact name. If you edit the CSS file or create a new custom CSS file with different characteristics, it must use this name. Alternatively, you can edit the finished web page to import a CSS file with a different name. The file import happens near the top of the web page as shown below.


	<link rel="stylesheet" href="pagelayout_template.css" type="text/css"></link>

Page Colours

Page colours and background images are also defined in this CSS file. You are encouraged to change the colours and other characteristics to provide the appearance which suits your application. CSS is the standard styling method for web pages, and there is a great deal of standard reference material available to provide more information on it.