Website layout

bluetronix software layout conception

Editing the layout – Layout and areas

Layout area settings – background settings

Editing stylesheets – CSS classes

Individual fonts

Style assistant – master colours and images

Design templates

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, widnoth, 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.