This site has been archived and you can no longer log in or post new messages. For up-to-date community resources please visit

eZ Community » Learn » eZ Publish » How to Skin an eZ Publish Now Site

How to Skin an eZ Publish Now Site

Thursday 14 June 2007 12:00:00 am

  • Currently 3 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Although there is lots of information about how to publish and manage content with eZ Publish Now (such as the Flash demos and the Website Interface documentation) until now there hasn't been much written about design issues. The purpose of this tutorial is to show that creating a custom design based on eZ Publish Now is as easy as publishing content.

In this tutorial, we will walk through an example that shows how to customize the skin of the default eZ Publish Now design. Note that the goal is not to show CSS best practices, but rather to demonstrate the process of modifying an eZ Publish Now site's CSS and the ease with which it can be done. The actual creation of a design is also beyond the scope of this tutorial, as we will use an existing design as the end goal.

This tutorial will help non-technical designers efficiently apply their creativity when working with eZ Publish. You can follow along step-by-step by using an eZ Publish 3.9.2 installatin.

Readers should have some basic knowledge about CSS; therefore, we will not provide detailed explanations for the CSS code used. You should also know how to perform basic editing tasks in eZ Publish; thus, specific instructions on how to edit content have been omitted.

Default and target designs

The following screenshot is the default design of eZ Publish 3.9.2:

Default design

We will work towards the following design:

Target design

Before we work on the design, we will make some simple content modifications and set up our working environment.


Printer Friendly version of the full article on one page with plain styles


Proudly Developed with from