
Originally Posted by
Glamorousshoe
Iam trying to build a site based on the Default Zen Template.
I want to change the Navigation Bar to Look like the ones in the Cherry Template. I tryied to copy the StyleSheet from the Cherry to my site, which as you know changes the whole layout, SO the question is What do I need to change in my Stylesheet to be able to get the same Navigation bar without changing any other configuration for the header, I want to keep the white line between the logo area and the navigation bar. Also I want the Cherry Navigation bar to be centered.
The site is
www.coolcarpartsonline.com. Its not done yet but its a start.
Sorry, it's not just about moving the stylesheet over, and unless I've done it, I can't tell you how to do it, but I can give you a step in the right direction. Past that, you'll have to do some figuring out. You'll need to copy over the navMainWrapper section from includes/templates/cherry_zen/common/tpl_header.php, and then only use the related css:
Code:
#navMainWrapper {
background:url("../images/red/header.gif");
}
#navMainWrapper {
height:32px;
width:100%;
font-size:12px;
}
#navMain a {
background:url("../images/red/tableftE.gif") no-repeat left top;
}
#navMain a span {
background:url("../images/red/tabrightE.gif") no-repeat right top;
}
#navMain a span.last {
background:url("../images/red/tabrightE_last.gif") no-repeat right top;
}
#navMain a span {
color:#ffffff; /* color of header links, HOME, LOGIN, MY ACCOUNT, etc. */
}
#navMain a:hover span {
color:#ffffff; /* color of header links, HOME, LOGIN, MY ACCOUNT, etc. when hovered over */
}
#navMain {
float:right;
width:750px;
line-height:normal;
}
#navMain ul {
float:right;
list-style:none;
}
#navMain li {
display:inline;
}
#navMain a {
float:left;
text-decoration:none;
}
#navMain a span {
float:left;
display:block;
padding:7px 15px 10px 15px;
text-align:center;
width:90px;
cursor:pointer;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navMain a span {float:none;}
/* End IE5-Mac hack */
#navMain a:hover {
background-position:0% -32px;
}
#navMain a:hover span {
background-position:100% -32px;
}