How to Skin an eZ Publish Now Site

The right block is an itemized list with the same title style as the middle block. We will modify the border-box div in site-colors.css.

div.itemized_sub_items {
 width: 100%; /* if you don't do that you will have the box stopping before the banner on the right */
}

div.itemized_sub_items div.content-view-embed h2 {
 background-image: url(images/high_h2_bg.png); /* clear gray background and the rest is adjustments and fonts */
 background-repeat: no-repeat;
 color: #FEE439;
 height: 22px;
 padding-top: 6px;
 padding-left: 25px;
 font-family: Tahoma;
 font-size: 12px;
 font-weight: bold;
}

This is the right block so far:

Right block after first few modifications

We now need to remove the border from the border-box div. Firebug shows that this border is built using 3 parts: top, middle and bottom:

Borders identified in Firebug

Next, add the following code to site-colors.css to remove the background frame:

div.itemized_sub_items div.border-box div.border-tl,
div.itemized_sub_items div.border-box div.border-tr,
div.itemized_sub_items div.border-box div.border-tc,
div.itemized_sub_items div.border-box div.border-ml,
div.itemized_sub_items div.border-box div.border-mr,
div.itemized_sub_items div.border-box div.border-bl,
div.itemized_sub_items div.border-box div.border-br,
div.itemized_sub_items div.border-box div.border-bc { 
background-image: none;
}
 
div.itemized_sub_items div.border-box div.border-mc {
background: none;
padding: 0;
}

This is the result so far:

Right block without background frame

The list items and their links need to be customized in site-colors.css:

/* the #main needs to be used since the we work on global styles defined in the main div */

div#main div.itemized_sub_items div.content-view-embed ul li {
 background-image: url(images/itemized_li.png); /* the dashes under each listed element */

/*adjustments*/
 
 background-position: bottom left;
 background-repeat: repeat-x;
 padding-top: 0.5em;
 padding-bottom: 0.5em;
}

div.itemized_sub_items div.content-view-embed ul li a {
 background-image: url(images/itemized_a.png); /* we add the yellow arrow on the left side of each link */
 text-decoration: none; /* we remove the underline of the links */
 color: #686868;
 font-size: 11px;
}

The new style for the right block is now ready:

Right block style complete