How to Skin an eZ Publish Now Site

We will now modify the three content blocks on the front page, starting with the left block.

The three articles on the left are contained within a light gray box with rounded corners. We will remove this box from a div called box-3 (as identified by Firebug):

/* Box 3 */

div.box-3 div.border-tl, div.box-3 div.border-tr, div.box-3 div.border-tc, div.box-3 div.border-ml, div.box-3 div.border-mr, div.box-3 div.border-bl, div.box-3 div.border-br, div.box-3 div.border-bc  {
 background-image: none; /* remove background of the box in all parts */
}

div.box-3 div.border-mc {
 background: none; /* for the center part of the box, we just need to remove the background with none */
 padding: 0;
}

Light gray box removed

We then need to add the background image behind the title "Grenland". We identify this div as vertically_listed_sub_items div.content-view-embed h2, and add a style item in classes-colors.css:

div.vertically_listed_sub_items div.content-view-embed h2 {
 background-image: url(images/vert_h2_bg.png); /* we add the black background and the arrow */
 color: #FEE439; /* yellow text */
 height: 22px; /* adjustments */
 padding-top: 6px;
 padding-left: 25px;
 font-family: Tahoma;
 font-size: 12px;
 font-weight: bold;
}

From the result below, you can see that each article title now has the same background image:

Article titles with background image

We need to override the h2 title of the Article class and also make some other modifications, such as the color of the link. Because these styles are content-class related, they are added to classes-colors.css:

div.vertically_listed_sub_items div.content-view-embed div.class-article h2 {
 background-image: none; /* we remove the introduced background */
 font-weight: normal;
 font-size: 14px;
 font-weight: bold;
}

/* this is the link property of the article title */

div.vertically_listed_sub_items div.content-view-embed div.class-article h2 a {
 color: #686868; /* we change the color according to the target design */
 text-decoration: none; /* we remove the underline */
 background-image: url(images/dot.png); /* the yellow element on the left of the link */
 background-repeat: no-repeat;
 background-position: left 10px; /* adjustments */
 padding-left: 10px; /* idem */
}

The block is almost complete:

Left block almost complete

The last style for this block is the yellow separator between articles. Using Firebug to select the text of one of the articles, we find the div: div.content-view-embed div.class-article div.attribute-short. In our case, we want to apply the separator as a background image for objects of the Article class. Add the following to classes-colors.css:

div.vertically_listed_sub_items div.content-view-embed div.class-article {
 background-image: url(images/separator.png); /* separator added. Rest is adjustments */
 background-repeat: no-repeat;
 background-position: left bottom;
 padding-bottom: 1.5em;
 margin-bottom: 1.5em;
}

Here is the result so far:

Left block styles complete