I haven't made much progress on creating version 1.2 so I've decided to give instructions here on how to add the header nav that you can see on my site.
Add the images in the attached zip to the TypoXP Reloaded images folder called 'img'
- Add tabs to style.css in your theme folder
Add the following lines to the bottom of your style.css file in the TypoXP Reloaded theme folder:
[/list]
/**********************************/
/* Navigation */
/**********************************/
/*- Menu Tabs 6--------------------------- */
#tabs6 {
float:left;
width:980px;
background: transparent url(img/typoxp-reloadedX-bg.gif) repeat-x fixed;
font-size:93%;
line-height:normal;
border-bottom:1px solid #000;
}
#tabs6 ul {
margin:0;
padding:10px 10px 0 30px;
list-style:none;
}
#tabs6 li {
display:inline;
margin:0;
padding:0;
}
#tabs6 a {
float:left;
background:url(img/tableft6.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs6 a span {
float:left;
display:block;
background:url(img/tabright6.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs6 a span {float:none;}
/* End IE5-Mac hack */
#tabs6 a:hover span {
color:#FFF;
}
#tabs6 a:hover {
background-position:0% -42px;
}
#tabs6 a:hover span {
background-position:100% -42px;
}
#tabs6 #current a {
background-position:0% -42px;
}
#tabs6 #current a span {
background-position:100% -42px;
}
#tabs6 .current_page_item a {
background-position:0% -42px;
}
#tabs6 .current_page_item a span {
background-position:100% -42px;
}
#tabs6 #current {
background-position:0% -42px;
}
#tabs6 #current span {
background-position:100% -42px;
}
#tabs6 .current_page_item {
background-position:0% -42px;
}
#tabs6 .current_page_item span {
background-position:100% -42px;
}
- Add The Tabs you want to header.php in your theme folder
near the end of your header.php file you should see:
<body>
<div id="container">
Directly below this is where you need to add the tags. the tabs need to be wrapped in div and a ul like below - basically it's just a 'list'. e.g.
<div id="tabs6">
<ul>
<li><a href="/Subscribe/" title="Subscribe Now"><span>Subscribe</span></a></li>
<li><a title="Home Page" href="
<?php bloginfo('siteurl'); ?>"><span>Home</span></a></li>
<li><a href="/about/"><span>About</span></a></li>
<li><a href="/archives/"><span>Archives</span></a></li>
<li><a href="/forum" target="_blank"><span>Forum</span></a></li>
</ul>
</div>
Will create tabs for subscribe, home, about, archives, forum. You can add as many tabs as you like.
If you have any problems then post them here.
