How to Skin an eZ Publish Now Site

In this step, we want to:

1. Add a yellow line to the top of the page.
2. Remove the language links.
3. Modify the user menu at the top right of the page.
4. Adapt the look of the search box.

To achieve #1, first identify the related div by hovering over the header with the cursor. A blue frame will mark the header, and you will see the following in Firebug:

Identify the header using Firebug

We now know that we have to override the div#header style from pagelayout.css in site-color.css. Similarly, we identify that div#usermenu is the corresponding section for the user menu at the top. This is where we will add the yellow line.

For #2, we proceed in the same way and find out that the div#languages section is the one we want to hide.

Add the following CSS code in site-colors.css:

div#header {
 padding-top: 1em;
 background-image: url(images/head_shadowR.gif); /* shadow on the right side. The rest is adjustments */
 background-position: right top;
 background-repeat: no-repeat;
 margin-right: -14px;
 padding-right: 15px;
 height: 115px;
}
 
div#usermenu {
 padding-top: 1em;
 background-image: url(images/body_top_bg.png); /* yellow line and adjustments */
 background-repeat: no-repeat;
 background-position: center top;
}
 
div#languages {
 background-image: none;
 display: none; /* hidden */
}

Here is the result so far:

Header styles 1 and 2 complete

For #3, we need to remove the background image of the links on the user menu at the top right, as well as the border to the left of those links (to remove the vertical lines between each link). We will then add a background image -- which has already been stored in the images folder -- for these links.

For #4, we need to change both the Search button and the text field. After having identified the right divs with Firebug (input#searchbutton and input#searchtext), we override the CSS to add our new background images for these elements.

Thus, add the following CSS code to site-colors.css:

div#links {
 background-image: none; /* background image removed */
}
div#links a {
 font-weight: normal; /* eliminates the bold */
 text-decoration: none;
 color: #686868; /* new color */
 font-size: 10px; /* size adjustment */
 font-family: Tahoma; /* chosen font */
 border: none; /* removes the vertical separator */
 background-image: url(images/links_bg.png); /* adds the yellow separators */
 background-position: left 5px; /* position of the separators */
 padding-left: 15px;
 background-repeat: no-repeat;
}
input#searchbutton {
 background-image: url(images/search_button.png); /* adds the right search button given by the designer and the rest is font and adjustments */
 width: 47px;
 height: 17px;
 border: none;
 <padding: 0;
 text-align: center;
 font-size: 10px;
 color: #3D3D3D;
}
/* the text field */
input#searchtext {
 background-image: url(images/search_text.png); /* a text field a bit more gray */
 background-repeat: no-repeat;
 width: 151px; /* adjustments based on the size of the target design */
 height: 17px; /* idem */
 border: none;
}

The header modification is now complete:

Header styles complete