Build Table-less CSS Layouts with eZ publish

Whenever you read about design and HTML these days, you see references to so-called table-less CSS layout. This article covers how to use the power of CSS to theme eZ publish 3.5. Here, we'll walk through every step required to create a new theme using CSS.

Getting Started

To be able to follow these steps, you need to have eZ publish installed. I won't go into detail on how this is achieved, since it's already been explained at www.ez.no. During installation, you'll need to select the news package and turn off the left menu. You'll then have the same setup I use as an example during this article.

You should furthermore have read the article about configuring eZ publish here at SitePoint (Build a WebDav-enabled Intranet with eZ publish). In this article, I'll demonstrate how you can customize eZ publish even further than was explained there.

If you don't want to install eZ publish on your system, you can use the online demo of eZ publish available at http://devel.ezpublish.no/ for testing. The respective Website for the administration interface is found at http://admindevel.ezpublish.no/. You can login as the administrator with the login username admin and the password publish.

Modifying the Code

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.

Shuffling Elements

To demonstrate how we can change the overall layout simply by altering the CSS files, let's float the toolbars in a different way. Here's the result of this section's experimentation:

We could start with the header, which is divided into two parts: the logo on the left, and the toolbar with search box on the right.

To float the header to the right, we need to add the following CSS fragment to site-colors.css. You can add these at the bottom of the CSS file.

div#header-design
{
   float: right;
}

Then we float the top toolbar to the left to change the element's position. This is done by adding the following CSS codes to the site-colors.css file.

div#toolbar-top
{
   float: left;  
}
 
div#toolbar-top ul
{
   float: left;
}

Now, that was simple. We've already customized the layout in a way that would have been impossible if the HTML had been tagged with a table structure that specified the layout.

Let's continue with the right menu, which contains the latest news toolbar, and move it to the left. This is done in a similar way as the previous example: we add the CSS code shown below to site-colors.css. Note that we need to add some more padding on the left to create a space between the toolbar and the edge of the main layout.

div#rightmenu  
{
   float: left;
}

div#rightmenu-design
{
   padding-left: 10px;
}

You can see that the main content appears under the right menu. This occurs because the browser breaks the flow, as there's not enough room. To avoid breaking the design, we need to change the margins of the main content. If we add a 16em margin on the left, and 10px on the right, we have a CSS setting that works. For that reason, we need to change the CSS settings in site-colors.css as shown below.

div.maincontent-noleftmenu
{  
   margin-left: 16em;
   margin-right: 10px;
}

Colorizing

Tuning the colors of a site is probably the first thing many of us consider when we start customizing, because we want to make the design reflect the profile of our company or organization. It's also the simplest to do, because it basically involves changing some hex color codes that we can get from Photoshop. Here's the page after a little color experimentation:

Let's start at the top. We'll make the background color of the page grey and the background of the header red. This is achieved by adding the CSS shown below to site-colors.css.

body
{
   background-color: #999;
}

div#topcontent  
{
   background-color: #c40017;
}

Now that we've changed the background color, we need to alter the color of the text. You can make the top toolbar white by adding the following CSS to site-colors.css.

div#toolbar-top li.toolbar-item, div#toolbar-bottom li.toolbar-item a
{
   color: #fff;
}

The colors for the top menu also need to be changed. I decided to give them two different tints of grey. The selected menu items are made light grey, while the unselected items remain dark gray. The text color is also set to light and dark gray. The CSS code for site-colors.css is shown below.

div#topmenu li
{
   background-color: #6a6a6a;
   border-color: #c40017;
}

div#topmenu li.selected
{
   background-color: #d9d9d9;
}

div#topmenu li a
{
   color: #ddd;
}

div#topmenu li.selected a
{
   color: #555;
}

div#submenu
{
   background-color: #d9d9d9;
   border-color: #d9d9d9;
}

div#submenu li a
{
   color: #555;
}

To make the breadcrumbs gray, we can simply add the CSS code shown below to site-colors.css.

div#path p, div#path p a
{
   color: #555;
}

The header needs to be made red; thus the CSS below needs to be added to site-colors.css.

div#maincontent h1, div#maincontent h2, div#maincontent h3
{  
   
   color: #c40017;
}