CSS and Graphic Design

The last step in this template is the design phase. We will now adapt the graphics used for the Nouvo Template to match the look and feel of this template.

Step 5: Modifying CSS and Graphic Files

We'll begin making graphic changes to the left menu buttons which are positioned by style.css to imitate the rollover effect. The only thing we need to modify is text color in style.css and buttons.gif.

/* Left Navigation Menu */

.leftnav1 a:link {
  display: block;
  border-top: 1px solid #FFFFFF; /* white*/
  padding: 2.5px 2.5px 2.5px 2.5px;
  text-indent: 15px;
  white-space: nowrap;
color: #3c3c3c; /* grey*/
text-decoration: none;
  width: 171px;
  background: url("images/buttons.gif") top left no-repeat;
  background-position: 0 -3px;
}

: Click to Enlarge

ADxMenu

These are the files we need to modify for the horizontal ADxMenu. Please note that little if anything needs to be done for Menu4IE.css. Menu4IE.css is used to enable hover in Internet Explorer .

Menu.css
Menu4IE.css
images/bg.png
images/inset.png
images/sep.png
images/subbg.png

You do not have to use the CSS drop down menu style provided in Nouvo. Nouvo uses a modified version of the ADxMenu Netymology. Here are other ADxMenu styles available.

In this template the ADxMenu simple was used. This menu is the easiest to work with.