Category: "Demos"

eZ publish sitestyle color mapping was used on the eZ publish Website Interface to recolor the CSS.


  1. Copied a static version of the eZ Web Interface files. The demonstration does not require a full installation of eZ.
  2. Made a backup of the .css files
  3. Used the first set of sed commands, but didn’t like the results
  4. Used the second set of sed commands
  5. Tinted bg.jpg, the background image, with Jasc Paint Shop Pro
  6. Changed background color of body to white
  7. Changed background color of usermenu to light brown


  • The design relies heavily on images. This is a disadvantage when using, because it can be difficult to recolor the images. It is important to remember the objective of is to replace the mechanical task of updating the CSS, it can’t redesign the images site. The tool is intended to help a person reskin or redesign the site. This link: lists the images, with their dimensions, to help a designer select those that should be updated.
  • There are eight CSS files. In this case, allowed them to be modified very quickly and accurately. Adjustments were made manually (steps 5 and 6 above) using Firebug to identify the CSS file.
  • The impact of can be subtle. It does a good job recoloring the CSS, and it is easy to forget how long it can take to the same work manually, and without missing anything. For a large eZ publish site, with many content classes, this can be tremendous timesaver.


Prior to choosing as a design tool for eZ webin, it would be better to create a greyscale version of the eZ web interface images. This would allow the images to support a wide range of colors. Another option would be to develop a custom skin.


A very real possibility would be to integrate a tool similar to into eZ. It is a simple, mechanical substitution process, the image processing software required is usually installed on the server with eZ, and it is an extremely cost-effective way to update the CSS files. It would fit well under the design settings.

Side by Side Demo

This page shows an HTML page before and after runs.

blog skin

This is the same blog skin as the web notes blog, except that it was run through the color mapper.

The only manual change required was to source the common CSS files (from /rsc/css) out of the local directory, so they could be mapped, too.

Other than that, the colors on this page were read from another site’s CSS file and substituted into the CSS files using the code and process described.