dharma:
I gave it a go, looks good but no wrapper now.
The links look better floating all the on the right anyway so I am going back to the original CSS.
I found the gif header links in the english folder and am going to experiment with adding another gif to the original set of 3, making it 4 gifs with links.
If I added another gif and then added an additional:
<ul><li><a id="sc" href="index.php?main_page=whatever_page"><i>Whatever Page</i></a></li>
``` to the header.php page
>
> how does ZC discern between each gif? is it the size of the gif?
Its kind of a complicated css trick. Its all done via this chunk of css (and there's only ONE image, by the way):
#tagline {
float:right;
height:70px;
width:336px;
}
#tagline ul {
height:86px;
margin:0;
width: 336px;
background:#fff url(../images/topnav.gif) no-repeat right top;
}
#tagline li {
list-style-type:none;
width:0;
height:67px;
position:absolute;
}
#tagline a {
float:left;
height:0;
position:absolute;
color:#000;
text-decoration:none;
padding-top:66px;
}
#tagline a#sc{
position:absolute;
left:30px;
top:0px;
width:90px;
}
#tagline a#cu {
position:absolute;
left:140px;
top:0px;
width:85px;
}
#tagline a#ma{
position:absolute;
left:250px;
top:0px;
width:85px;
}
#tagline i{visibility:hidden}
The #sc is for the shopping cart link, the #cu is for the contact us, and the #ma is for the my account link.
Basically, you'd need to first create your new image with the new picture added, and change the width for the tagline to the new width in two places, all you'd have to change is the width:
#tagline {
float:right;
height:70px;
width:336px;
}
#tagline ul {
height:86px;
margin:0;
width: 336px;
background:#fff url(../images/topnav.gif) no-repeat right top;
}
Then, you'd need to add your new link to includes/languages/english/simple_zen/header.php, In the example below, I'll give it the id of #nl.
<ul><li><a id="sc" href="index.php?main_page=shopping_cart"><i>Shopping Cart</i></a></li><li><a id="cu" href="index.php?main_page=contact_us"><i>Contact Us</i></a></li><li><a id="ma" href="index.php?main_page=account"><i>My Account</i></a></li><li><a id="nl" href="index.php?main_page=new_link"><i>New Link</i></a></li></ul>
Then you'll need to add a new code for #nl (this assumes you'll add it to the end of the image:
#tagline a#nl{
position:absolute;
left:360px;
top:0px;
width:85px;
}
