Build Table-less CSS Layouts with eZ Publish

This article explains how you can modify the CSS in eZ publish for the purpose of creating a new eZ publish site style package. Such a package can be imported into any eZ publish 3.5 installation and will change the look and feel of the site instantly. The first step in this process is to get our hands on the CSS files. There are two CSS files that we'll need to change: site-colors.css and classes-colors.css. These are the files we'll use later to create our eZ publish CSS package.

There are two ways in which we can modify these files. The first possibility is to open the eZ publish site in a browser that's capable of saving a complete page containing HTML images and CSS. I used Opera for this example. Once you've loaded the default eZ publish user site, you can choose the "File->Save with images" menu as available in Opera. This saves the whole page as a static copy, which you can then use in applying the CSS.

Opera preserves all the CSS files, but renames the files. The file originally called site-colors.css is renamed site-col.css; classes-colors.css is renamed classes-.css. Opera does this to ensure compatibility with the older style file name sizes required in DOS, which have 8 letters before, and 3 after, the dot. This file is the offline copy of the page that I'll use to create the CSS package throughout the rest of the article.

The other approach is to access the CSS files directly should you have eZ publish installed - this, of course, requires access to a server that runs eZ publish. In a default installation, you can access the CSS files in the directory packages/styles/t01/files/default/file/design/base/stylesheets/t1/ of the eZ publish root.

Quick Overview of the Page

The image below shows what the eZ publish installation looks like after a default installation. The layout of all the single page elements is defined in the two mentioned CSS files. To make it a bit easier for you to customize the files, let me explain how the different parts of the page are named for CSS purposes

Starting from the top, we have the area that contains all the primary content, and is, accordingly, called "allcontent". The top of the page, called "topcontent", contains two elements: the "header" and "toolbar-top". The header is used to display the logo or title of the site, while the toolbar can contain various tools like the search box and login information.

The upper menu is called "topmenu"; potentially eZ publish can also provide a left menu, but this is hidden in this setup. As I mentioned above, you'll also need to hide the left menu in your setup in order to follow this tutorial.

The navigation's breadcrumbs element is called "path". The boxes on the right hand side are contained in the "rightmenu", and we call the items "toollist" and "toolbox". The "toollist" is usually a list of the latest news, for example, while the "toolbox" contains fixed information such as the count of visitors currently online, the search box and the logged-in user's details.

At the bottom of each page lies another toolbar called "toolbar-bottom", which is hidden in the default installation, but can be turned on in the administration interface. The last part of the page is called "footer," and contains the copyright information.