Floris
10-06-2004, 10:00 PM
[HowTo] [3.0.3] Split the navbar from the breadcrumb; and revamp it all!
By: Floris - http://www.vBulletin-Fans.com/ (http://www.vbulletin-fans.com/)
Description: This tutorial will show you how to modify your default navbar template so you can put your own logo in the breadcrumb and split the navbar and navigation (breadcrumb) to its own box and end up with an alternative header.
Installation instructions.
* Before you continue, first install this tempate modification: [HowTo] [3.0.3] Match the navbar to default style (http://www.vbulletin.com/forum/showthread.php?t=117608)
* Installed the above tweak? Good, now open the navbar template again and find this code:
<td class="alt1" width="100%">
<if condition="is_array($navbits)">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1)"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
<td> </td>
<td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php?$session[sessionurl]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><a href="$scriptpath"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink.gif" alt="$vbphrase[reload_this_page]" border="0" /></a> <strong>$navbits[lastelement]</strong></td>
</tr>
</table>
<else />
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php?$session[sessionurl]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
</if>
</td>
* And replace it with this code:
<td class="alt1" width="100%"><a href="$vboptions[forumhome].php?$session[sessionurl]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
* Find the following code:
<!-- nav buttons bar -->
* And above it, on a new line, add this code:
<br />
* Now find this code:
</td></tr></table>
<!-- / nav buttons bar -->
* And it, on a new line, add this code:
</td></tr>
<tr><td class="alt1" width="100%">
<if condition="is_array($navbits)">
<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0"><tr><td>
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1)"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
<td> </td>
<td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php?$session[sessionurl]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><a href="$scriptpath"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink.gif" alt="$vbphrase[reload_this_page]" border="0" /></a> <strong>$navbits[lastelement]</strong></td>
</tr>
</table>
</td></tr></table>
<else />
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php?$session[sessionurl]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
</if>
* Find this code:
<table class="tborder" cellpadding="0" cellspacing="1" border="0" width="100%" align="center" style="border-top-width:0px">
* And replace it with this code:
<table class="tborder" cellpadding="0" cellspacing="1" border="0" width="100%" align="center">
* You are nearly done, save the navbar template.
* Now open the header template, and find this code and delete it:
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php?$session[sessionurl]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
<!--
NEW HEADER & NAVBAR
Now that the nav buttons are in the
navbar template, you can stick whatever
you like into this space.
This makes it much easier for novice
admins to customize their header
template without affecting important
navigation elements.
-->
</td>
</tr>
</table>
* Now you are done! Save the header template and go check it out.
By: Floris - http://www.vBulletin-Fans.com/ (http://www.vbulletin-fans.com/)
Description: This tutorial will show you how to modify your default navbar template so you can put your own logo in the breadcrumb and split the navbar and navigation (breadcrumb) to its own box and end up with an alternative header.
Installation instructions.
* Before you continue, first install this tempate modification: [HowTo] [3.0.3] Match the navbar to default style (http://www.vbulletin.com/forum/showthread.php?t=117608)
* Installed the above tweak? Good, now open the navbar template again and find this code:
<td class="alt1" width="100%">
<if condition="is_array($navbits)">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1)"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
<td> </td>
<td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php?$session[sessionurl]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><a href="$scriptpath"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink.gif" alt="$vbphrase[reload_this_page]" border="0" /></a> <strong>$navbits[lastelement]</strong></td>
</tr>
</table>
<else />
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php?$session[sessionurl]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
</if>
</td>
* And replace it with this code:
<td class="alt1" width="100%"><a href="$vboptions[forumhome].php?$session[sessionurl]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
* Find the following code:
<!-- nav buttons bar -->
* And above it, on a new line, add this code:
<br />
* Now find this code:
</td></tr></table>
<!-- / nav buttons bar -->
* And it, on a new line, add this code:
</td></tr>
<tr><td class="alt1" width="100%">
<if condition="is_array($navbits)">
<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0"><tr><td>
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1)"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
<td> </td>
<td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php?$session[sessionurl]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><a href="$scriptpath"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink.gif" alt="$vbphrase[reload_this_page]" border="0" /></a> <strong>$navbits[lastelement]</strong></td>
</tr>
</table>
</td></tr></table>
<else />
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php?$session[sessionurl]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
</if>
* Find this code:
<table class="tborder" cellpadding="0" cellspacing="1" border="0" width="100%" align="center" style="border-top-width:0px">
* And replace it with this code:
<table class="tborder" cellpadding="0" cellspacing="1" border="0" width="100%" align="center">
* You are nearly done, save the navbar template.
* Now open the header template, and find this code and delete it:
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php?$session[sessionurl]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
<!--
NEW HEADER & NAVBAR
Now that the nav buttons are in the
navbar template, you can stick whatever
you like into this space.
This makes it much easier for novice
admins to customize their header
template without affecting important
navigation elements.
-->
</td>
</tr>
</table>
* Now you are done! Save the header template and go check it out.