This article is part two of two, following the first article on How to Give Your Site a Makeover. Here, we show you how you can customize the look of an eZ Publish Website interface site, based on the changes we have been making to ezsystems.ca.

In the previous article I talked about customizing the styles of your global pagelayout template, by creating a site-colors.css file that overrides the default styles in pagelayout.css. Today I will guide you through the process of customizing your content-related styles defined in content.css, which are overriden in the newly created classes-colors.css. I will also explain how to customize the structural layout of the front page.

Front page alterations

The home or front page of your web site is built using an object of the Frontpage content class. It comes with a set of different content blocks that can be easily rearranged to fit your custom design: left column, center column, right column and bottom column. If your custom layout doesn't include the left and bottom columns, you can simply leave them blank when editing the front page, as the adjacent columns will automatically be resized to fill the space. For our site we've kept the center and right columns.

Removing the banner image and replacing it with the smaller banner

In order to remove the long banner that goes across the top of the page, log in to the Website Interface and click the Edit button on the Website Toolbar for your front page. Then, click the button to remove the banner image file. Finally, re-publish the object.

Next, we've added a new shorter banner by uploading an image as a new object, then inserting it as an embedded object at the top of the Center column (in edit mode). To calculate the correct width of the image banner, inspect the size of the right column with Firebug. It should be specified in a <div> tag with the class "right-column-position". In our case, the CSS code (for classes-colors.css, as is the case for all code samples in this article) is as follows:

div.right-column-position {
float:left;
margin-right:-246px;
width:246px;
}

By subtracting 246px for the right column from the total 808px of the main page width, we are left with 562px, minus 12px for the gap between the two columns. This gives us 250px for the banner image that can be placed in the center column (main content area).

Coding Steps

Removing the shadowed boxes

You've probably noticed the numerous use of shadows in the Website Interface. To remove these shadows, we used the following code:

div.highlighted_object {background-image: none; padding-bottom: 1px;}
/*to replace the grey background colour of the content blocks with 
your colour shade: */
div.box-2 div.border-mc {background-image: none; background: #F4F4F4;} 

Removing the boxes with the rounded corners

If you don't want to follow the latest fad in design, and tired of looking at the boxes with the rounded corners, then you might find the following style changes quite handy:

/*getting rid of the top round borders for boxes*/
div.box-2 div.border-tl, div.border-box div.border-tl, div.box-2 div.border-tr, div.border-box div.border-tr, div.box-2 div.border-tc, div.border-box div.border-tc, div.box-2 div.border-ml, div.border-box div.border-ml, div.box-2 div.border-mr, div.border-box div.border-mr {
background-image: none;
}

/*getting rid of the bottom round borders for boxes*/
div.box-2 div.border-bl, div.border-box div.border-bl, div.box-2 div.border-br, div.border-box div.border-br, div.box-2 div.border-bc, div.border-box div.border-bc {
background-image: none;
}

White on Orange section headings

To display our section headings as white text on an orange background, we added the following styles:

div.ez-office h1 {background-color: #F06020; color: #fff; margin-top:0.36em; padding-left:0.75em;}

div.class-blog h2, div.class-folder h2 {background-color: #F06020; color: #fff;}

div.itemized_sub_items div.content-view-embed div.class-blog h2 a,  div.itemized_sub_items div.content-view-embed div.class-folder h2 a{
color: #fff;
}

Customizing link colours and borders
We've also changed the colour of all the links and added borders to the blog summary section as follows:

/*changing link colours for the sub items (blog, etc)*/
div.itemized_sub_items div.content-view-embed ul li a  {color: #000;}

/*adding a border to the blog box*/
div.class-blog div.border-box {border: 1px solid #F4F4F4;}

/*changing link colours for Read more*/
div#main p a {
border-bottom:1px solid #D2D2D2;
color:#000000;
text-decoration:none;
}

/*link colour in the footer*/
div#footer a {color: #999;}

Modifying calendar and blog styles

Once you're done with the changes on the main page, do not forget to update the styles on all your subpages. For our calendar and blog pages we've added the following CSS code:

/*blog titles*/
div.attribute-header h1 , div.content-view-line div.class-blog-post div.attribute-header a {
color:#F06020;
text-decoration:none;
}

div.attribute-tags ul li a {
border-bottom:1px solid #D2D2D2;
color:#000000;
text-decoration:none;
}

div.attribute-archive ul li a {
border-bottom:1px solid #D2D2D2;
color:#000000;
text-decoration:none;
}

div.calendar div.month h2{ color: #000; }

div.calendar td a {color: #F06020;}

Be sure to inspect every part of your website with Firebug and customize the style to fit your design as planned. If you have any questions, please, feel free to ask them in the comments. Good luck and happy site skinning!