Joeychgo
04-11-2006, 11:52 AM
My automotive forums tend to have many additional features. Photo Galleries, race track timeslips, tech article pages, chat room, etc etc etc. My navbar gets crowded.
I looked around at a few hacks that automatically added a second level of links, but didnt like them. They didnt seem to fit the 'look I wanted. So I came up with this:
http://www.vbulletin-faq.com/joey/navbar-sm.JPG (http://www.vbulletin-faq.com/joey/navbar.JPG)
(Click for larger Image)
I use this navbar on www.team-2g.com (http://www.team-2g.com), and similar ones on www.lincolnvscadillac.com (http://www.lincolnvscadillac.com) and www.forabodiesonly.com (http://www.forabodiesonly.com).
Also, this is going to take some coding. This isnt a cut and paste deal, you'll have to do a little work on this one.
Before you start coding. You will need a background image for the navbar. Mine is this for team-2g.com
http://www.team-2g.com/mitsubishi-eclipse/images/nav_bg_repeat.gif
It needs to be thin, just a few pixles. That one is 10 pixles wide and thats really wider then it needs to be. 5 picles would be better.
Also, this is going to take some coding. This isnt a cut and paste deal, or just upload a product. You'll have to do a little work and thought on this one. Your welcome to use that one if you like. Just save it from this thread by right cliking on it and choosing 'Save As".
The basic steps are as follows:
Backup your site (always do this before hacking code)
Construct the new navbar
Add it to the header template
Add CSS definitions
Remove the old navbar from the navbar/breadcrumb templateFirst thing to do is add the CSS definitions.
To do this, go to your Admin CP> Styles & Templates> Style Manager> Choose GO for the appropriate style.
Scroll down to Additional CSS Definitions add the following code to the bottom of the code in the box. Be sure not to disturb any of the current code. Add this AFTER everything that is already there.
.new_navbar
{
background: #000000 url(http://www.yoursite.com/forum/images/nav_bg_repeat.gif)
repeat-x;
background-position: center;
color: #000000;
padding: 0px 0px 0px 0px;
white-space: nowrap;
}
You need to change the url in the code above to the location of the background image on your server.
Next.
The basic code for the new navbar is this.
<!-- New Navigation -->
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td align="center" width="100%" class="new_navbar" height="46">
NAVIGATION ELEMENTS WILL GO IN HERE
</td>
</tr></table>
<!-- / New Navigation -->
Now, you have to decide what elements will go in your navbar. Each element should look similar to this:
<span class="bullet">•</span> <a class="nav" href="<A href="http://www.YourSite.com/">HOME</a">http://www.YourSite.com/">HOME</a>
Here are a few common elements:
USERCP / REGISTER
This element shows the USERCP if the user is logged in, and shows the REGISTER button if the user is not logged in.
<span class="bullet">•</span>
<if condition="$show['member']"><a class="nav" href="$vboptions[bburl]/usercp.php?$session[sessionurl]">USER CP</a> </if>
<if condition="$show['registerbutton']"> <a class="nav" href="register.php?$session[sessionurl]">REGISTER</a>
</if>
SEARCH
This gives you the search Button. Not a dropdown search, just a link to the advanced search page
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?">SEARCH</a>
New Posts
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?do=getnew">NEW POSTS</a>
Today's Posts
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?do=getdaily&days=1">TODAYS POSTS</a>
Just add these elements, and whatever other elements you want to add, in succession. So a navbar with just these elements would look like this:
<!-- New Navigation -->
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td align="center" width="100%" class="new_navbar" height="46">
<span class="bullet">•</span> <a class="nav" href="<A href="http://www.YourSite.com/">HOME</a">http://www.YourSite.com/">HOME</a>
<span class="bullet">•</span>
<if condition="$show['member']"><a class="nav" href="$vboptions[bburl]/usercp.php?$session[sessionurl]">USER CP</a> </if>
<if condition="$show['registerbutton']"> <a class="nav" href="register.php?$session[sessionurl]">REGISTER</a>
</if>
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?">SEARCH</a>
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?do=getnew">NEW POSTS</a>
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?do=getdaily&days=1">TODAYS POSTS</a>
</td>
</tr></table>
<!-- / New Navigation -->
You should keep the number of elements on each line about even. To start a new line you need only to place <br /> where you want the new line to start. You can have unlimited number of lines. Just remember, the height of your background image has to be enough to cover those lines of links. The background image I dislayed earlier is tall enough for 2 lines comfortably.
Now - Take the code for the new navbar you just made and place it after this code in your HEADER template. (yes, HEADER template)
<!-- /logo -->
<!-- content table -->
Your new navbar should appear on the bottom of your header now. Go look and make sure its all working properly before going on to the next step.
Now, lets get rid of the old nav bar.
The issue here is keeping the breadcrumb information. You cant just delete the whole navbar.
Go to the navbar template and replace the current code with this code:
<script type="text/javascript">
<!--
function log_out()
{
ht = document.getElementsByTagName("html");
ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grays cale=1)";
if (confirm('$vbphrase[sure_you_want_to_log_out]'))
{
return true;
}
else
{
ht[0].style.filter = "";
return false;
}
}
//-->
</script>
<!-- breadcrumb, login, pm info -->
<table cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td width="100%">
<if condition="is_array($navbits)">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1); return false;"><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_q]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px; color:#000000" 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_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
</if>
</td>
<if condition="$bbuserinfo['userid']">
<td valign="top" nowrap="nowrap">
<div class="smallfont" style="color:#000000">
<strong><phrase 1="$bbuserinfo[username]">$vbphrase[welcome_x]</phrase></strong><br />
<phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>
<if condition="$show['pmstats']"><br /><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></if>
</div>
</td>
<else />
<td nowrap="nowrap" style="padding:0px">
<!-- login form -->
<form action="login.php" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont">$vbphrase[username]</td>
<td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
<td class="smallfont" colspan="2" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label></td>
</tr>
<tr>
<td class="smallfont">$vbphrase[password]</td>
<td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" size="10" accesskey="p" tabindex="102" /></td>
<td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<!-- / login form -->
</td>
</if>
</tr>
</table>
<!-- / breadcrumb, login, pm info -->
<if condition="THIS_SCRIPT!='adv_index'">
<!-- Right Column Code -->
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="5" border="0">
<tr>
<td valign="top">
<!-- End Left Column Code -->
</if>
That is basically it.
I looked around at a few hacks that automatically added a second level of links, but didnt like them. They didnt seem to fit the 'look I wanted. So I came up with this:
http://www.vbulletin-faq.com/joey/navbar-sm.JPG (http://www.vbulletin-faq.com/joey/navbar.JPG)
(Click for larger Image)
I use this navbar on www.team-2g.com (http://www.team-2g.com), and similar ones on www.lincolnvscadillac.com (http://www.lincolnvscadillac.com) and www.forabodiesonly.com (http://www.forabodiesonly.com).
Also, this is going to take some coding. This isnt a cut and paste deal, you'll have to do a little work on this one.
Before you start coding. You will need a background image for the navbar. Mine is this for team-2g.com
http://www.team-2g.com/mitsubishi-eclipse/images/nav_bg_repeat.gif
It needs to be thin, just a few pixles. That one is 10 pixles wide and thats really wider then it needs to be. 5 picles would be better.
Also, this is going to take some coding. This isnt a cut and paste deal, or just upload a product. You'll have to do a little work and thought on this one. Your welcome to use that one if you like. Just save it from this thread by right cliking on it and choosing 'Save As".
The basic steps are as follows:
Backup your site (always do this before hacking code)
Construct the new navbar
Add it to the header template
Add CSS definitions
Remove the old navbar from the navbar/breadcrumb templateFirst thing to do is add the CSS definitions.
To do this, go to your Admin CP> Styles & Templates> Style Manager> Choose GO for the appropriate style.
Scroll down to Additional CSS Definitions add the following code to the bottom of the code in the box. Be sure not to disturb any of the current code. Add this AFTER everything that is already there.
.new_navbar
{
background: #000000 url(http://www.yoursite.com/forum/images/nav_bg_repeat.gif)
repeat-x;
background-position: center;
color: #000000;
padding: 0px 0px 0px 0px;
white-space: nowrap;
}
You need to change the url in the code above to the location of the background image on your server.
Next.
The basic code for the new navbar is this.
<!-- New Navigation -->
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td align="center" width="100%" class="new_navbar" height="46">
NAVIGATION ELEMENTS WILL GO IN HERE
</td>
</tr></table>
<!-- / New Navigation -->
Now, you have to decide what elements will go in your navbar. Each element should look similar to this:
<span class="bullet">•</span> <a class="nav" href="<A href="http://www.YourSite.com/">HOME</a">http://www.YourSite.com/">HOME</a>
Here are a few common elements:
USERCP / REGISTER
This element shows the USERCP if the user is logged in, and shows the REGISTER button if the user is not logged in.
<span class="bullet">•</span>
<if condition="$show['member']"><a class="nav" href="$vboptions[bburl]/usercp.php?$session[sessionurl]">USER CP</a> </if>
<if condition="$show['registerbutton']"> <a class="nav" href="register.php?$session[sessionurl]">REGISTER</a>
</if>
SEARCH
This gives you the search Button. Not a dropdown search, just a link to the advanced search page
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?">SEARCH</a>
New Posts
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?do=getnew">NEW POSTS</a>
Today's Posts
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?do=getdaily&days=1">TODAYS POSTS</a>
Just add these elements, and whatever other elements you want to add, in succession. So a navbar with just these elements would look like this:
<!-- New Navigation -->
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td align="center" width="100%" class="new_navbar" height="46">
<span class="bullet">•</span> <a class="nav" href="<A href="http://www.YourSite.com/">HOME</a">http://www.YourSite.com/">HOME</a>
<span class="bullet">•</span>
<if condition="$show['member']"><a class="nav" href="$vboptions[bburl]/usercp.php?$session[sessionurl]">USER CP</a> </if>
<if condition="$show['registerbutton']"> <a class="nav" href="register.php?$session[sessionurl]">REGISTER</a>
</if>
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?">SEARCH</a>
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?do=getnew">NEW POSTS</a>
<span class="bullet">•</span>
<a class="nav" href="$vboptions[bburl]/search.php?do=getdaily&days=1">TODAYS POSTS</a>
</td>
</tr></table>
<!-- / New Navigation -->
You should keep the number of elements on each line about even. To start a new line you need only to place <br /> where you want the new line to start. You can have unlimited number of lines. Just remember, the height of your background image has to be enough to cover those lines of links. The background image I dislayed earlier is tall enough for 2 lines comfortably.
Now - Take the code for the new navbar you just made and place it after this code in your HEADER template. (yes, HEADER template)
<!-- /logo -->
<!-- content table -->
Your new navbar should appear on the bottom of your header now. Go look and make sure its all working properly before going on to the next step.
Now, lets get rid of the old nav bar.
The issue here is keeping the breadcrumb information. You cant just delete the whole navbar.
Go to the navbar template and replace the current code with this code:
<script type="text/javascript">
<!--
function log_out()
{
ht = document.getElementsByTagName("html");
ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grays cale=1)";
if (confirm('$vbphrase[sure_you_want_to_log_out]'))
{
return true;
}
else
{
ht[0].style.filter = "";
return false;
}
}
//-->
</script>
<!-- breadcrumb, login, pm info -->
<table cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td width="100%">
<if condition="is_array($navbits)">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1); return false;"><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_q]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px; color:#000000" 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_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
</if>
</td>
<if condition="$bbuserinfo['userid']">
<td valign="top" nowrap="nowrap">
<div class="smallfont" style="color:#000000">
<strong><phrase 1="$bbuserinfo[username]">$vbphrase[welcome_x]</phrase></strong><br />
<phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>
<if condition="$show['pmstats']"><br /><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></if>
</div>
</td>
<else />
<td nowrap="nowrap" style="padding:0px">
<!-- login form -->
<form action="login.php" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont">$vbphrase[username]</td>
<td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
<td class="smallfont" colspan="2" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label></td>
</tr>
<tr>
<td class="smallfont">$vbphrase[password]</td>
<td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" size="10" accesskey="p" tabindex="102" /></td>
<td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<!-- / login form -->
</td>
</if>
</tr>
</table>
<!-- / breadcrumb, login, pm info -->
<if condition="THIS_SCRIPT!='adv_index'">
<!-- Right Column Code -->
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="5" border="0">
<tr>
<td valign="top">
<!-- End Left Column Code -->
</if>
That is basically it.
