Build Table-less CSS Layouts with eZ Publish
Monday 25 April 2005 1:46:00 am
Tuning the colors of a site is probably the first thing many of us consider when we start customizing, because we want to make the design reflect the profile of our company or organization. It's also the simplest to do, because it basically involves changing some hex color codes that we can get from Photoshop. Here's the page after a little color experimentation:
Let's start at the top. We'll make the background color of the page grey and the background of the header red. This is achieved by adding the CSS shown below to site-colors.css.
Now that we've changed the background color, we need to alter the color of the text. You can make the top toolbar white by adding the following CSS to site-colors.css.
The colors for the top menu also need to be changed. I decided to give them two different tints of grey. The selected menu items are made light grey, while the unselected items remain dark gray. The text color is also set to light and dark gray. The CSS code for site-colors.css is shown below.
To make the breadcrumbs gray, we can simply add the CSS code shown below to site-colors.css.
The header needs to be made red; thus the CSS below needs to be added to site-colors.css.
Finally, we change the colors of the links in our theme. This is achieved simply, via the following CSS snipped.