How to Skin an eZ Publish Now Site
Wednesday 13 June 2007 3:00:00 pm
The main navigation menu of the target design has no background image. It is plain text with a specific font and arrows to the left of each link. Thus, we first need to remove all design elements from the original design.
Using Firebug, we identify the appropriate section: div#topmenu ul. This is a frame for all the list elements of the main navigation menu.
The following CSS code in site-colors.css removes the gray areas from the right and left of the menu:
/* TOP MENU */
div<#topmenu {
margin-top: -20px;
padding-left: 0.5em;
background-color: #FFFFFF; /* white color + adjustments */
}
div#topmenu ul {
background-image: none; /* gray part removed on the right side of the menu */
}We achieve the following result:
Gray areas removed
Then, we will remove the background image behind each element of the top menu (using Firebug, div#topmenu li is identified as the appropriate section) and modify the style of each link (div#topmenu li a):
div#topmenu li {
background-image: none;
}
div#topmenu li a {
font-weight: normal;
font-family: Tahoma;
border-right: none; /* we remove the vertical line that was there as a separator */
background-image: url(images/topmenu_a.png); /* we add the small arrows */
background-position: left center;/* we position these arrows on the left of each link */
background-repeat: no-repeat;
font-size: 11px;
}When we hover over one of the menu items, there is still a hover effect with an underline. Firebug identifies this section as div#topmenu li a:hover. Also, when we click on a menu item, there is still a gray background (in the div#topmenu li.selected section):
Gray background on selected menu item
Here is the corresponding CSS code for site-colors.css:
div#topmenu li.selected {
background-image: none; /* remove the grey background when one item is selected */
}
div#topmenu li a:hover {
border-bottom: none; /* remove the line under each element /*
}The new main navigation menu design is now complete:
Main navigation menu styles complete