How to Skin an eZ Publish Now Site
Wednesday 13 June 2007 3:00:00 pm
Similar to what we did with the left block, we identify the box (box-2) with Firebug, then remove the background with the following CSS code in site-colors.css:
/* Box 2 */
div.box-2 div.border-tl, div.box-2 div.border-tr, div.box-2 div.border-tc {
background-image: none;
display: none;
}
div.box-2 div.border-ml, div.box-2 div.border-mr, div.box-2 div.border-bl, div.box-2 div.border-br, div.box-2 div.border-bc {
background-image: none;
}
div.box-2 div.border-mc {
background: none;
padding: 0;
}This gives the following result:
Middle block with background removed
There is a graphic element under the box, which is identified as the highlighted_object div. Remove this background with the following code in site-colors.css:
div.highlighted_object {
background-image: none;
}We can now focus on the new style for the box. We need to add the background image for the title of the article as well as the link properties in site-colors.css:
div.highlighted_object h2 {
background-image: url(images/high_h2_bg.png); /* image for the target design */
background-repeat: no-repeat;
color: #FEE439; /* color followed by adjustments */
height: 22px;
padding-top: 6px;
padding-left: 25px;
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
}
div.highlighted_object h2 a {
text-decoration: none; /* to remove the underline */
}The new middle block is now done:
Middle block styles complete