Making menus look like Education Theme

[sue_k]

I am attempting to change the menu color scheme. I assumed that the teal background for the nav was the "default", but I guess the white background is the default, which is pretty boring against my white background.

I successfully changed the colors on the current menu item in the style.css, using a tan color (replacing the menu-active.png with menu-active-tan.png), but when I paste the code teal color

{
background: #469491 url(images/teal/menu-active.png) repeat-x;
color: #fff !important;
border-bottom: 3px solid #469491;
text-shadow: #397573 -1px -1px;
}

after this line: .education-teal a,

I lose the rounded corners. (Nor am I really sure that's where I would paste it.)

I've seen a couple other posts, but not finding quite the answer.

Any ideas, anyone?

http://enmchamber.org.previewdns.com

[Pixel Frau]

If you take a look at the CSS for the active menu item, you'll find this:

#header .menu li a:active, #header .menu .current_page_item a, #header .menu .current-cat a, #header .menu .current-menu-item a, #header .menu .current_page_item a:hover, #header .menu .current-cat a:hover, #header .menu .current-menu-item a:hover {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background: url(images/menu-active.png) repeat-x;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: 3px solid 
#386a8d;
color: 
#fff !important;
text-shadow: 
#2d5876 -1px -1px;
}

This bit adds the rounded corners:

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

To add the same rounded corners to the non-active menu items, change this:

#header .menu a {
border-bottom: 3px solid 
#44928f;
color: 
#d4bf95;
display: block;
padding: 16px 21px 10px;
position: relative;
text-decoration: none;
text-shadow: 
#2e6a67 1px 1px;
}

to this:

#header .menu a {
border-bottom: 3px solid 
#44928f;
color: 
#d4bf95;
display: block;
padding: 16px 21px 10px;
position: relative;
text-decoration: none;
text-shadow: 
#2e6a67 1px 1px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

[Author]

Posts