How to Skin an eZ Publish Now Site
Wednesday 13 June 2007 3:00:00 pm
Adapting the content
The front page (which uses the Frontpage content class) has different content elements that we can easily adapt. The left column of the target design displays the three latest articles from the Company/Press Room/Grenland section without any corresponding pictures. The center column displays a welcome article (which we will create under the root node). The right column displays boxes from the Products section.
Readers who are unfamiliar with the basic concepts of the Website Interface can consult the documentation (see the user guide under the Website Interface 1.2 section).
After making the content modification, we now have the following front page:
After content modification
Working environment
In this tutorial, we will use the Mozilla Firefox browser and two useful Firefox extensions: the Web Developer tool-kit (including a toolbar) and Firebug (which enables us to visualize and identify the CSS elements to be changed):
Firefox with Firebug
CSS files in eZ Publish
The following screenshot shows the different CSS files that are used in eZ Publish, using the Web Developer extension mentioned above:
Folder for target design files
The general process will be to edit (via a CSS editor of your choice) the two empty CSS files to override the elements of the default design. Where images are needed, simply point the style item to the images folder.
You should now have Firefox open (with Firebug installed and enabled) on your eZ Publish installation and be connected to the server in order to update the CSS files.