Website layout
bluetronix software layout conception
Editing the layout – Layout and areas
Layout area settings – background settings
Editing stylesheets – CSS classes
Style assistant – master colours and images
The bluetronix software creates layouts compatible with search engines and browsers by not using frames. It is possible to create an unlimited amount of different layouts and assign them to pages or whole directories. The server always automatically loads web sites in their layouts.
It is easy to implement sites in multiple languages and layouts.
You can adjust the design for every single detail. Everything is editable, making it possible to create completely individualised designs.
Professionally designed template layouts can be loaded onto the server and can be customised individually. The extensive options give you free rein to your creativity.
Depending on your subscription you find a range of template designs (the minimum is one template with the Basic subscription)
bluetronix software layout conception
The layout consists of a so called layout mask, a CSS class, that defines the layout in detail and a PHP script, that fills the layout with content and sends it to the browser. This process is implemented on the server and does not rely on the client browser’s settings (like Java settings or cookies).
A layout can be applied to a page or a whole directory including its subdirectories. The following flow diagram shows the processes of loading ‘home.html’.
The layout is created dynamically while the page is loaded, with the advantage that the implementation is handled by the server and therefore prevents any possible problems that might arise by using frames and framesets, like linking to sub-sites by search engines. Nevertheless each website is editable and can used in a frame-like manner, so that it is not necessary to re-create the page when it is displayed at different locations more than once.
Editing the layout – Layout and areas
In the main menu open 
Layout -> Edit layout. Within the layout settings you can define the window division, area names, area size and pages loaded into each area.
Save current layout setting
Save layout as
Layout name
New layout
Delete layout, the standard layout a the single page layout is not deletable
Apply layout to directory
Area settings for each area, background settings
Scroll bar, enable or disable a scroll bar in the active area
Select Page - sets the source page for each area (each area has a starting page)
Preview the current set page which will be loaded into the area
The left third of the window the window division, which allows to activate/deactivate areas. The section to the right shows the active area’s name, width, height, the optional scroll bar and which page to load.
The area names correspond to a class name in the style.css file. The class BodyArea defines the background of a page (outside white area in the window division). The area size can be defined in pixels or percent.
Not all areas need a web site applied. The design can be done by the CSS class as well. Only areas that have contents should have a site applied.
The main area always displays the loaded page.
Layout area settings – background settings
At Area settings you can change the background image, the colour, the alignment and the offset for each area.
Saving modified area settings will change the content of the class of the style.css file.
Editing stylesheets – CSS classes
For a detailed description of the CSS editor, please refer to the chapter CSS editor. Starting the CSS editor with Layout -> Edit styles allows additional modification of settings in the editor.
Next to the class selection are the symbols for Create a new class and for Delete class. Then change settings as described in the CSS example and click on Apply.
To change a class, highlight it. To copy a class, highlight it and save it with a new class name.
Individual fonts
With the CSS editor, you can select your own fonts with the font field (this is a selection field as well as an input field).
Style assistant – master colours and images
The style assistant is a simple way to customise the layout. All existing colours and images listed in the layout file (style.css) get displayed and can be changed conveniently.
The assistant can be found at Layout -> Style assistant.
To change a colour or an image click the 
Replace colour or the 
Select image symbol next to the element.
Design templates
Depending on your subscription there are various templates available at Layout -> Design templates. A template consists of the layout with the used images, the CSS file (style.css) and the site contents used in the layout.
To load a template select it and click on load layout. Check the result at your website.
Generally the current layout will be saved before a new one is loaded.
By clicking the Extended options button further options like Add layout, Save layout and Delete layout will appear.
