Site Design and Layout

The site design and layout for eZ Publish Website Interface sites were developed to provide the simplest and cleanest interface possible using table-less CSS layout. The main design goals were:

• to pr ovide a ready-to-use solution that is easy to customize and maintain
• to allow non-technical users to easily change the site design and layout using easy-to-install site style packages
• to ensure compliance with current web design standards and trends

General site design is implemented via templates, which dictate the layout of page elements. This ensures a consistent visual appearance that is easy to maintain. Refer to the tutorial “How to Skin an eZ Publish Now Site” for step-by-step instructions on how to modify the visual design and layout of an eZ Publish site.

Layout Structure

eZ Publish uses a “div”-based layout approach. Placement of page components isdictated by style elements defined in CSS files and implemented via HTML div tags. Thepicture below shows the layer structure used in the main template (pagelayout.tpl).

Layout Structure

Disabling Page Elements

By default, the layout displays a side menu beside the main content and an “extra information” area below the main content. These two page elements can be turned off (or turned back on) as needed by changing the additional classes in the 'div#columnselement'. Comment out the desired section from the following block:

/* COLUMNS */

div#columns

{

}

div.nosidemenu div#columns

{

}div.noextrainfo div#columns

{

}

Note that this feature only controls how CSS-enabled browsers render pages. The hidden content is still fetched by the browser and present in the source code (and thus visible in any browser that does not have CSS support enabled).