Homepage layout

The bluetronix software creates search engine and browser friendly layouts without frames. Any number of layouts can be created and assigned to a page and a directory. The pages are always loaded automatically (on the 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 can be changed, complete in-house developments are possible.

Ready-made, professional layouts can be loaded and customized. The extensive settings let your creativity run wild.

Depending on the web package, you will find ready-made, professional layouts under “Design – Templates” (at least one template is always included).

The bluetronix layout concept

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

A layout can be assigned to a page and a directory (including its subdirectories) in the bluetronix software. The following example shows the process when a page (e.g. Home.html) is called up.  

The layout is generated dynamically from the requested page, the layout and the additional pages included, such as the menu or the header (upper window). The advantage of this is that the page is generated on the server side with all components and not as in the frame concept the frameset can be lost in the case of a so-called lateral entry (e.g. 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

Open in the main menu   Layout -> Edit Layout . The window layout, the window names, the dimensions and the pages that are loaded in the windows are defined under the layout settings.

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

Layout name, designation of the layout

Restart layout
Delete layout, the "Standard" and "Single Page" layouts cannot be deleted!

layout directory, assert this layout for a directory

* Window settings for each window, setting the background settings

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

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

The window layout is on the left. Windows can be activated and deactivated here. On the right side, the activated windows are displayed line by line with window names, width and height, the scroll bar option and the page to be loaded.

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

A page does not have to be assigned to every window. The design of the window can also be done using the CSS class. Only windows that have content should be assigned. For example this left menu . The page called up is always loaded in the main window.

Window Settings - Background Settings

To each window can use the * window settings Settings for background image, color, alignment and the 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 the chapter CSS editor presented. Calling the CSS editor via Layout -> Edit Styles activates additional options in the editor.

In addition to the well-known class selection, the symbols for the class now appear Create and Extinguish a class.

To start a new class, click on this   create new class Symbol and enter an appropriate designation under Class name. Now set the appropriate settings as below CSS example described, fixed and click Save on computer .

To change a class, select the class from the chooser.

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).

Styles Assistant – change colors and images globally

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

The wizard can be found at Layout -> Styles Assistant .

To change a color or image, click next to the component change color or. change picture Symbol.

design templates

Depending on the web package, see Layout -> Design Templates more completely ready-made templates for your web package. A template consists of the layout with the associated images, the CSS file (style.css) and the page content that is used in the layout.

To load a template, click on the one you want and on layout store . Then check the result on your homepage.

In general, the current layout is saved before loading a template.

Below the button extended view will be more options like Add layout , layout save and Layout Delete visible.

Homepage software chapter selection