open up '/templates/CUSTOM/css/stylesheet.css', where 'CUSTOM' is your override template name.
Search for this:
Code:
#top_nav
background:url("../images/top_menu_left_bg.gif") no-repeat scroll 0pt 0pt transparent;
Comment out the background rather than delete for now just in case you want it back. This shoud remove the left background image on your menu.
Now search for:
Code:
.main_menu_panel
background:url("../images/top_menu_right_bg.gif") no-repeat scroll right 0pt transparent;
Comment out the background rather than delete for now just in case you want it back as well.
Now add this directly under your commented background of .main_menu_panel:
Code:
border:1px solid #cc0000;
border-radius: 5px;
background: #ff0000; /* Old browsers */
background: -moz-linear-gradient(top, #ff0000 0%, #cc0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#cc0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff0000 0%,#cc0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff0000 0%,#cc0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff0000 0%,#cc0000 100%); /* IE10+ */
background: linear-gradient(top, #ff0000 0%,#cc0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#cc0000',GradientType=0 ); /* IE6-9 */
Change the 'radius', border color' & 'gradient colors' to suit your needs. I have put in as close as I think you have.
Save it and lets see what happens... Let me now how you go.
Remember to either backup your file or comment out what you have changed so you can revert back to it.
Jay
Bookmarks