How to Skin an eZ Publish Now Site
Wednesday 13 June 2007 3:00:00 pm
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.