[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>&nbsp;</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>&nbsp;</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]">
&nbsp;
<!--
NEW HEADER &amp; 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.

Nice job floris :) Thanks for sharing the mod with us.

(even know i know where you originally started working on this :p)

Hey, looks a little bit like what I did on my site. Thanks for sharing, Flo. You're on a roll wih your template mods as of late.

Hi I love this modification !

Nice job floris !

Floris.. 2419 Private messages! :D:D

Anyway, great mod! ;)

Nice! Thank you Floris! :)

Need some support for this one, get this error:

The following error occurred when attempting to evaluate this template:

Parse error: parse error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /home/ybskldmn/public_html/forum/includes/adminfunctions_template.php(3055) : eval()'d code on line 248

This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

Need some support for this one, get this error:Goto the style manager, select the template in question and click on revert button. Then re-apply the install instruction.

Goto the style manager, select the template in question and click on revert button. Then re-apply the install instruction.
But does this require a "clean" template?

Coool! I presume that you have already done this with the Alternate Professional Style

Question, does this take the place of the logo? The image in the after picture.

IF it does, is there a way for it to not take the place of the logo so I can put an ad in there? That would be....

breathtaking!
*apologies for bumping such an old old thread*

Can this be done on 3.6.x??

is there a way for it to not take the place of the logo so I can put an ad in there? That would be....

breathtaking!
*apologies for bumping such an old old thread*

Replace this:

<img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" />


With your own image.

alright, and is there anyway this could be updated for 3.6.x?

Great, thanks. Worked like a charm! (for 3.6.4)

Only one comment: Where you wrote this: "And it, on a new line, add this code"

it should say: "And ABOVE it, on a new line, add this code"

I tried with below first. Worked too, but not quite right ;)

(Of course only newbies like me don't know that)


Cheers,

the vBnewbie :)

This is an awsome hack and works great. I perfer it broken away than attached.