Category: "Demos"

eZ publish sitestyle color mapping

robots.design was used on the eZ publish Website Interface to recolor the CSS.

Steps

  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

Observations

  • The design relies heavily on images. This is a disadvantage when using robots.design, because it can be difficult to recolor the images. It is important to remember the objective of robots.design 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: http://www.wirehopper.com/eZ/eZ_files/images/images.htm lists the images, with their dimensions, to help a designer select those that should be updated.
  • There are eight CSS files. In this case, robots.design 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 robots.design 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.

Conclusion

Prior to choosing robots.design 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.

Opportunities

A very real possibility would be to integrate a tool similar to robots.design 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 robots.design runs.

blog skin

This is the same blog skin as the http://know-waste.com 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.