Originally Posted by
DogTags
Very nice, clean, easy to read....like it :-)
Is there a version that has a simpler header, no clickable images?
Thanks :-)
I'll give you instructions to get rid of that section totally, and how to also just make them text links only.
To get rid of the clickable image header altogether:
Step 1.
Open up includes/templates/simple_zen/css/stylesheet_new.css and delete or comment out this section:
Code:
#tagline ul{
list-style-type:none; /*removes bullets from the list*/
text-align:center; /*aligns the text to what should end up as the center of each graphical button*/
}
#tagline ul li{
display:inline; /*extra step to get IE to display link list horizontally*/
}
#tagline ul li a{
display:block; /*makes the anchor fill the list item so clicking any part of the graphical button will work, also allows the anchor to take a width*/
float:left; /*the key to making the list horizontal*/
margin-left:14px;
width:100px; /*set to the width of each button part of the image, make sure the combined width doesn't exceed the total width of the navbar*/
height:69px; /*set equal to the height of the navbar image. Using line-height, rather than height, will get the text aligned to the vertical center of the button*/
}
#tagline ul li a:link, #tagline ul li a:visited{text-decoration:none;color:#333}
#tagline ul li a:link:hover, #tagline ul li a:visited:hover{color:#000;}
#tagline ul li a i{padding-top:50px; visibility:hidden}
/*end of top navigation buttons*/
Step 2.
In the same file, just above what you just deleted or commented out change this:
Code:
#tagline {
color:#fff;
font-size: .9em;
text-align : center;
background:url(../images/topnav.gif) no-repeat 98% 70%;
height:80px;
z-index:10;
}
to this:
Code:
#tagline {
color:#000;
font-size: 1.5em;
text-align : center;
height:80px;
}
Step 3.
Open up includes/languages/english/simple_zen/header.php and change the define for HEADER_SALES_TEXT to either be blank, or to be a site tagline.
DONE!
To change the clickable header image area to be text links only:
Step 1. Open up includes/templates/simple_zen/css/stylesheet_new.css
and find /*beggining of top navigation buttons (shopping cart/contact us/my account*/
replace that section with this:
Code:
/*beggining of top navigation buttons (shopping cart/contact us/my account*/
#tagline {
color:#000;
font-size: 1.5em;
text-align : center;
height:80px;
z-index:10;
}
#tagline ul{
list-style-type:none; /*removes bullets from the list*/
text-align:center; /*aligns the text to what should end up as the center of each graphical button*/
}
#tagline ul li{
display:inline; /*extra step to get IE to display link list horizontally*/
}
#tagline ul li a{
float:left; /*the key to making the list horizontal*/
margin-left:14px;
width:100px; /*set to the width of each button part of the image, make sure the combined width doesn't exceed the total width of the navbar*/
}
#tagline ul li a:link, #tagline ul li a:visited{text-decoration:none;color:#333}
#tagline ul li a:link:hover, #tagline ul li a:visited:hover{color:#000;}
#tagline ul li a i{font-style:normal}
/*end of top navigation buttons*/
DONE!
Bookmarks