MBLogic
for an open world in automation
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 styling "cascades", which means that nesting the styles (inside "div" tags) causes inner features to inherit the characteristics of outer styles. This means that styling can be cumulative.
CSS features which are common to all the web page templates are held is a separate file from those features which are specific to individual web templates. A table is provided below to show which CSS (and SVG) templates go with which web templates.
The features which are template specific are:
- Page width. The HTML screens are defined to have a "fixed width". These widths are defined in the CSS.
- HTML Menu orientation. Pages with vertical menus down the left need a special style ("MBT_HTMLScreensSide") to cause the HTML screen content to appear in a column on the right, instead of below the menu.
- HTML screen background colour.
- Peripheral background colour. This colour is overlaid by the HTML screen background colour, so it appears around the edges of it.
- The name of the file used for the background image. If you have to change the file name for some reason, you can do so here.
CSS Templates
The following CSS files are provided:
| CSS Template | Description |
|---|---|
| pagelayout_side800.css | For pages with a vertical menu and an SVG width of 800. |
| pagelayout_side850.css | For pages with a vertical menu and an SVG width of 850. |
| pagelayout_top1000.css | For pages with a horizontal menu and an SVG width of 1000. |
| pagelayout_topheader1000.css | For pages with a top "header", a horizontal menu and an SVG width of 1000. |