How to Skin an eZ Publish Now Site
Wednesday 13 June 2007 3:00:00 pm
By default, the footer looks like this:
Default footer style
The footer div is easily identified and then modified in site-colors.css:
div#footer {
background-image: url(images/footer_bg.png); /* background image and other adjustments */
font-size: 11px;
margin-top: 3em;
margin-bottom: 2em;
}We get the following result:
Footer style complete
newpage
The target design has some additional content on the front page.
First, we add the additional pictures in the Media/Images node via the Administration Interface. Then, we can edit the front page to add some static text with h2 titles. Insert the corresponding pictures for both the middle and right blocks. It is important to add a separator between the fetch icon and the new text. To do this, click on the Custom tag icon in the Online Editor and choose the separator tag.
Select the separator tag
The Online Editor text areas should now look as follows:
Add new content with the Online Editor
After publishing the content, the site now looks like this:
Front page with new content
The final step is to style the titles and the separators. The two sections involved (as identified by Firebug) are h3 and the separator div. (The reason why it is h3 instead of the h2 that was previously added is that the XML header tags in the Online Editor are one level above the equivalent XHTML tags. h1 in XML in the Online Editor is equivalent to h2 in XHTML; h2 in XML in the Online Editor is equivalent to h3 and so on.) We then add the following code to site-colors.css:
/* SEPARATOR */
div.separator {
background-image: url(images/separator.png);
background-repeat: no-repeat;
clear: both;
}
h3 {
font-family: Tahoma;
font-size: 14px;
background-image:url(images/dot.png);
background-repeat: no-repeat;
background-position: left 10px;
padding-left: 10px;
margin-bottom: 1em;
}We are done applying the new design!
Target design complete
This design can now be reused for other websites and specifically for eZ Publish Now projects.