How to Skin an eZ Publish Now Site
Wednesday 13 June 2007 3:00:00 pm
We will begin by editing site-colors.css (any CSS editor can be used) to design the front page. See the comments beside each style element in the CSS snippet below for an explanation:
body {
background-image: none; /* This will remove the default background image */
margin-top: 1em; /* we adjust the margin at the top of the page */
font-family: Tahoma; /* font chosen for the global site */
font-size: 11px; /* font size for the global site */
line-height: 125%; /* amount of space between the text lines */
}
a {
color: #C80000; /* color for links */
}
/* we also want to add shadows on the sides of the header */
div#page {
background-image: url(images/head_shadowL.gif);
background-position: left top;
background-repeat: no-repeat;
padding-left: 10px;Using the code above, we achieve the following result:
Global style changes
We can also change the company logo and the banner, but this does not require any CSS modifications. To add a new logo, log in to the Website Interface as an Administrator and click the Site settings link in the top right. You can upload the logo image from this page. For the banner, you need to first upload the banner in the Media/Banners location via the Administration Interface:
Add a banner in the Administration Interface
Then you can edit the front page to add the banner via either the Administration Interface or Website Interface.
We now have the following result:
Global font style changes complete