Build Table-less CSS Layouts with eZ publish

Finally, we change the colors of the links in our theme. This is achieved simply, via the following CSS snipped.

a  
{  
   color: #c40017;  
}

Toollist Curves

As an example of how images can be used in a CSS-based design, I'll make some of the corners in our design round by adding background images to the layout. The first curved corner is defined for the right corner of the tool list, showing the latest news.

The screenshot below shows what the toollist looks like after we have applied these CSS changes.

We create an image that has a red foreground color and a white background color. The image is aligned to the top right in the header of the tool list. If we additionally make the borders white and tint the background color of the whole box, the corner of our tool list will appear nicely rounded. Add the CSS code shown below to the site-colors.css file. The image needs to be placed in a sub-folder called images.

div.toollist-design  
{  
   background-color: #eee;  
   border-color: #fff;  
}  
 
div.toollist-design h2  
{  
   color: #ffffff;  
   background-color: #c40017;  
   background-image: url(images/rounded_right.gif);  
   background-repeat: no-repeat;  
   background-position: top right;  
}

Toolbox Curves

Next, we modify the tool box.

The following CSS code adds a border and sets the background color to white. I did this to make the display of the tool box a little different from the tool list, since they hold different types of content.

div.toolbox-design  
{  
   background-color: #fff;  
   border: 1px solid #c40017;  
}  
 
div.toolbox-design h2  
{  
   color: #ffffff;  
   background-color: #c40017;  
}

I want to add two more rounded corners at the upper right corner of the main content area and the lower left corner. This is done with the same technique: just create an image with the respective curve, and add it as a background image. The CSS statements that are used to set the background images are shown below.

div#topcontent  
{  
   background-image: url(images/rounded_top.gif);  
   background-repeat: no-repeat;  
   background-position: top right;  
}  
 
div#allcontent  
{  
   background-image: url(images/rounded_bottom.gif);  
   background-repeat: no-repeat;  
   background-position: bottom left;  
}

Finally, let's change the image of the search button. Since it's a blue bitmap, I replace it with a simple white dot on a red background. This submit button is also changed to reflect a vertical alignment.

input.searchimage  
{  
   width: 17px;  
   height: 17px;  
   vertical-align: middle;  
   margin-left: 5px;      
   background-image: url(images/bullet.gif);  
   background-repeat: no-repeat;  
}

The Result

We have achieved some fairly simple CSS changes and created our own theme -- the result is shown in the screenshot below. If you are a Web designer, you can now envisage the possibilities of easily theming eZ publish sites using CSS.

Creating a Package

Having changed the CSS files, we must wrap them into a reusable site style package for eZ publish. This is done in the administration interface: click on the setup tab and from there on click on packages. You'll see a list of wizards. Choose the site style wizard, a screenshot of which is shown below.

The second screen of this wizard asks you for a thumbnail image, which should be a screenshot or an icon that depicts the look and feel of your theme. Make it 120px wide and 103px high.

The third screen requests that you provide the CSS files. Here you need to supply the site-colors.css and classes-colors.css files (note that these file names are not shown in the screenshot).

If you use images in a theme, you can upload them in the fourth screen. In my theme, I used some images, such as those used for rounding the edges. The following screenshot shows the uploaded files.

Now, it's time to enter some information about the site style package. Give it a name and enter some text to describe the package, as shown below.

The eZ publish package system also needs to contain some information about the package maintainer. Enter that in the sixth screen:

In the last step, you can optionally enter some information about the changes you applied to this version of the package.

After you're done, a summary of the package will prompt you to export the package to a file. I've exported this theme and uploaded it to the contribution area on http://ez.no. You can download the package from http://ez.no/community/contributions/site_styles.

Importing Packages

Once you have a ready-made site style package, you can import it directly into eZ publish. This is again achieved via the Administration interface. Go to the Setup tab and select Packages from the menu on the left side. Then, click the button to import a new package. All you need to do now is to upload the package file and follow the instructions provided on the screen.

After importing the package you can select it directly from the Look and Feel settings found under the Design tab in the eZ publish Administration interface.

Conclusion

We've now seen how easy it is to customize an eZ publish CMS solution just by changing some CSS files. This site style, or theme, can also easily be distributed to other eZ publish users in the form of a package.

Much of the demonstrated CSS work is very simple. This article is not intended as a tutorial in advanced CSS, but rather, explains how you can use general CSS tricks for an out-of-the-box installation of eZ publish.