Numerous articles have been written on how to work on the design of an eZ Publish site, including detailed How to Skin an eZ Publish Now Site and the official Website Interface documentation. However, they do not mention the specific working environment -- that is, how to develop and test changes without breaking a live site. This article will show you how to set up an efficient environment to work on customizing eZ Publish, based on what we did for ezsystems.ca.

It is very useful to have a local copy of your site, where you can test all the style changes on your computer. Only when you're satisfied with the look, you can create the site package with your two CSS files and design images, and upload it to your production site.

So, without further ado, here is how to set up an efficient environment on your local computer to work on your eZ website. These steps will ensure that you have a fully functioning working local copy of your production site:

1. Set up a local server to match the eZ software requirements

Rather than installing each individual component, Windows users can install XAMPP, which sets up Apache, PHP5 or PHP4 (you can pick and choose) and MySQL, all in one click.

Mac OS X users can get up and running with Apache, MySQL and PHP in no time by installing MAMP.

*nix users must simply make sure that PHP4 is running with MySQL and Apache.

2. Download and install the same version of eZ Publish that was used for your production site

Make sure you extract the eZ Publish files to your local root folder.

For Windows/XAMPP users, the main folder for all WWW documents is at \xampp\htdocs

Mac OS X/MAMP users can select the Document Root folder by clicking on MAMP->Preferences->Apache.

3. Write and edit your code

Install and work with any available HTML or text editor to write and edit your code

Install the Firefox add-on FireBug for quick and easy access to the source code of your site.

4. Locate two empty CSS files that you'll be using for the site's skinning process

In the var/storage/packages/ez_systems/ezwebin_design/files/default/file/ directory, create these two files:

- site-colors.css will overwrite pagelayout.css, which defines all the styles unrelated to content for the global pagelayout.

- classes-colors.css will overwrite content.css, which defines all the styles related to content and specifically to content classes in eZ Publish.

5. Create a directory for images

Create a directory called images (in the same subdirectory with the CSS files) and store all images used in the new design -- background, icons, and so on.

6. Upload your package

When you are ready to upload your changes online, you can either:

- go to eZ Publish Administration Interface and create a package from those two CSS files along with the images folder.

or

- Upload your updated and new files to your production's site FTP server, using any available FTP client (such as FileZilla or FireFTP).

You can also manipulate your site's structure and the layout -- not just the design -- on your local computer and repeat the same steps on the production site.

Stay tuned for the follow-up to this post, where we will look behind the scenes on the design process for ezsystems.ca. We will show you how it went from looking like the regular demo site to what it is now.