The WebBrick Gateway uses CSS (Cascading Style Sheets) extensively to style the user interface. In this way the user interface pages can be made to look completly different without having to change the content of the pages, e.g. change colours, backgrounds, fonts etc. It is possible this way to produce styling for an WebBrick Gateway that tailors it for a specific installer or customer.
General
The main CSS source file is panel.css others may exist for bespoke developments, for bespoke copies these will be pointed to by /static/css in the configuration file.
Other CSS files and their functions are listed here
- media.css, contains extra definitions for interactions with A/V systems
- form.css, contains definitions for form elements, typically optimised for touch screen presentation
- diag.css, contains the simplest possible definitions for the diagnostics pages, designed to reduce overheads
- graph.css, contains extra definitions required for the monitoring and graphing module
- mobile.css, contains definitions optimised for mobile devices
Display Elements
A number of the user interface elements use distinct css class names and the user should refer to the section on display elements for the CSS class names.
Each of these classes can be modified to change the overall look and feel of the element.
E.g. for a button.
td.buttonOn
{
background-image : url("/static/images/on.png") ;
background-repeat : no-repeat ;
background-position: 96%;
text-align: left ;
border-style : outset ;
border-width: thin ;
padding: 1% 5% 1% 1%;
border-color: rgb(50%,50%,0%) ;
}
Refer to a good book on CSS for the possibilities, e.g:
- Cascading Style Sheets, Meyer, Pub: OReilly.
- Integrated Html and CSS, Virginia Debolt, Sybex.