Homepage layout

The bluetronix software creates layouts without frames in a search engine and browser friendly way. Any number of layouts can be created and assigned to a page and a directory. The pages are always loaded automatically (server-side) in this layout when they are called up.

Multilingual pages, pages with different layouts and areas can be easily implemented.

The design can be changed down to the last detail. Everything is changeable, complete in-house developments are possible.

Prefabricated, professional layouts can be loaded and individually adapted. The extensive settings give your creativity free rein.

Depending on the web package, you will find ready-made, professional layouts at �Design � Vorlagen� (at least one template is always included).

The bluetronix layout concept

The layout consists of a so-called layout mask, the CSS classes, which describe the layout in more detail, and a PHP script, which fills the layout mask with the contents of the pages and sends it to the client browser. This process is completely implemented on the server side and is therefore independent of the settings of the client browser (such as Javascript, cookie, etc.)

In the bluetronix software, a layout can be assigned to a page and a directory (including its subdirectories). The following example shows the process when a page (for example Home.html) is called. 

The layout is generated dynamically from the requested page, the layout and the additionally contained pages, such as the menu or the header field (upper window). The advantage of this is that the page is generated on the server side with all components and not as with the Frame concept the frameset may be lost in a so-called cross entry (for example via a search engine). Nevertheless, each page can be edited individually and a change, for example in the upper window, only has to be made once.

Edit layout � Window layout

In the main menu, open  Layout -> Edit layout. The layout settings define the window layout, the window names, the dimensions and the pages which are loaded into the windows.

*Saving the current layout settings
Save layout under a different name

      Layout name, name of the layout

Starting a new layout
Delete layout, the layout �Standard� and �Einzelne Seite� cannot be deleted!

      layout directory, apply this layout to a directory

*Window settings for each window, defining the background settings

      Scroll bar, displays a scroll bar in the corresponding window when this option is active

Home page for the window, specify a page to be loaded in the window
Preview of the currently set page to be loaded in the window

On the left side you will find the window layout. Windows can be activated and deactivated here. On the right side, the activated windows are displayed line by line with window name, width and height, the Scrollbar option and the page to be loaded.

The window names correspond to the class names in the style.css file. The class BodyWindow indicates the background of the page (outer white area in the window layout). The window dimensions can be set in pixels and dynamically in percent.

Not every window has to be assigned a page. The window can also be designed using the CSS class. Only windows that have content should be assigned. For example the left menu. In the main window, the page called up is always loaded.

Window settings - Background settings

For each window you can select the *Window settings settings for the background image, color, alignment and distance to the edge can be made.

Saving the window settings changes the classes of the style.css file.

Edit styles � CSS classes

The CSS editor is described in chapter CSS Editor introduced. Calling the CSS editor via Layout -> Edit styles activates additional options in the editor.

Next to the familiar class selection, the symbols for Create and Delete of a class.

To start a new class, click on the  create a new class symbol and enter a suitable name under Class name. Now make the appropriate settings as described in CSS example described, and click on Save.

To change a class, choose the class from the selection.

To copy a class, first select the class from the selection and then enter the new class name under Class name (the selection field is also an input field).

Own fonts

In the CSS editor under the tab Font you can also specify your own fonts in the selection (selection field is also an input field).

Style Wizard � global Change colors and images

The Style Assistant is an easy way to customize the layout. All colors and images available in the layout (style.css file) are listed and can be easily replaced and changed.

You can find the assistant under Layout -> Styles Assistant.

To change a color or an image, click on the change color or Change image Symbol.

Design templates

Depending on the web package you will find under Layout -> Design templates further completely premade templates for your web package. A template consists of the layout with the corresponding images, the CSS file (style.css) and the page contents used in the layout.

To load a template, click on the desired one and click Layout shop. Then check the result on your homepage.

 Generally, when loading a template, the current layout is saved beforehand.

Under the button Extended view other options such as Add Layout, Save Layout and Delete layout visible.

Homepage Software Chapter selection