How To do a Graphic NavBar

[davidw]

Basically, you'll want to do these things.

1) Know what images you want to use.

2) Know what the navbar controls to use it for the new image navbar and save them.

* You can find them by going to your admincp => Styles & Templates => Style Manager => The style you want to do this on {Click on the drop down button next to All Style Options and choose Edit Templates} => Navigation/Breadcrumb Templates => navbar
* Find the information between <!-- nav buttons bar --> and <!-- / nav buttons bar --> and save this to notepad or create something in dreamweaver (just so you'll have a backup in case something goes wrong).

3) In your header, find out where you want your new navbar to go. You'll probably want to use something like <!-- nav buttons bar --> and <!-- / nav buttons bar --> (as seen in the navbar) to mark where you want the navbar to go.

4) Then you'll probably want to put something like this in your header (between the new<!-- nav buttons bar --> and <!-- / nav buttons bar --> in step 3):

<table>
	<tr>
		<td align="left" valign="top" width="100" height="87"><a href="     "><img src="     " width="100" height="87" border="0" alt="" /></a></td>
		<td align="left" valign="top" width="100" height="87"><a href="     " accesskey="1"><img src="     " width="100" height="87" border="0" alt="" /></a></td>
		<if condition="$show['registerbutton']">
		<td width="100" height="87"><a href="     " rel="nofollow"><img src="     " width="100" height="87" border="0" alt="" /></a></td>
		<else />
		<td width="100" height="87"  id="usercptools"><a href="     "><img src="     " width="100" height="87" border="0" alt="" /></a><script type="text/javascript"> vbmenu_register("usercptools" ,1); </script></td>
		</if>
		<td align="left" valign="top" width="100" height="87"><a href="     "><img src="     " width="100" height="87" border="0" alt="" /></a></td>
		<td align="left" valign="top" width="100" height="87"><a href="     "><img src="     " width="100" height="87" border="0" alt="" /></a></td>
		<td align="left" valign="top" width="100" height="87"><a href="     "><img src="     " width="100" height="87" border="0" alt="" /></a></td>
		<td align="left" valign="top" width="100" height="87"><a href="     "><img src="     " width="100" height="87" border="0" alt="" /></a></td>
		<td align="left" valign="top" width="100" height="87" id="navbar_search"><a href="     " accesskey="4" rel="nofollow"><img src="     " width="100" height="87" border="0" alt="" /></a><script type="text/javascript"> vbmenu_register("navbar_search" ,1); </script></td>
		<td align="left" valign="top" width="100" height="87"><a href="     " accesskey="5"><img src="     " width="100" height="87" border="0" alt="" /></a></td>
	</tr>
</table>

<if condition="$show['popups']">
<!-- NAVBAR POPUP MENUS -->
	
	<if condition="$show['searchbuttons']">
	<!-- header quick search form -->
	<div class="vbmenu_popup" id="navbar_search_menu" style="display:none">
		<table cellpadding="4" cellspacing="1" border="0">
		<tr>
			<td class="thead">$vbphrase[search_forums]</td>
		</tr>
		<tr>
			<td class="vbmenu_option" title="nohilite">
			<form action="search.php" method="post">
				<input type="hidden" name="do" value="process" />
				<input type="hidden" name="showposts" value="0" />
				<input type="hidden" name="quicksearch" value="1" />
				<input type="hidden" name="s" value="$session[sessionhash]" />
				<input type="text" class="bginput" name="query" size="20" />&nbsp;$gobutton<br />
			</form>
			</td>
		</tr>
		<tr>
			<td class="vbmenu_option"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[advanced_search]:</a></td>
		</tr>
	<if condition="$show['member']">	
		<tr>
<td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]:</a></td>
</tr>	
	<else />	
		<tr>
				<td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]:</a></td>
		</tr>
        </if>		
		</table>
	</div>
	<!-- / header quick search form -->
	</if>

	<if condition="$show['member']">
	<!-- user cp tools menu -->
	<div class="vbmenu_popup" id="usercptools_menu" style="display:none">
		<table cellpadding="4" cellspacing="1" border="0">
		
		<tr><td class="thead">$vbphrase[quick_links]</td></tr>		
		<if condition="$bbuserinfo['userid']"></if>
		<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>
		<tr><td class="vbmenu_option"><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></td></tr>
		<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_buddy_list]</a></td></tr>
		<tr><td class="vbmenu_option"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td></tr>
					
		<tr><td class="thead"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
		<if condition="$show['siglink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>
		<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_profile]</a></td></tr>
		<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
		
		<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
		<if condition="$show['pmstats']"><tr><td class="vbmenu_option"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
		<tr><td class="vbmenu_option"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
		<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[my_profile]</a></td></tr>
		<if condition="$show['wollink']"><tr><td class="vbmenu_option"><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></td></tr></if>
		
		</table>
	</div>
	<!-- / user cp tools menu -->
	</if>
<!-- / NAVBAR POPUP MENUS -->

<!-- PAGENAV POPUP -->

	<div class="vbmenu_popup" id="pagenav_menu" style="display:none">
		<table cellpadding="4" cellspacing="1" border="0">
		<tr>
			<td class="thead" nowrap="nowrap">$vbphrase[go_to_page]</td>
		</tr>
		<tr>
			<td class="vbmenu_option" title="nohilite">
			<form action="$vboptions[forumhome].php" method="get" onsubmit="return this.gotopage()" id="pagenav_form">
				<input type="text" class="bginput" id="pagenav_itxt" style="font-size:11px" size="4" />
				<input type="button" class="button" id="pagenav_ibtn" value="$vbphrase[go]" />
			</form>
			</td>
		</tr>
		</table>
	</div>

<!-- / PAGENAV POPUP -->
</if>

*** Please keep this in mind ***
What I have in the code is based loosely off my style (seen on my website). You can look at the navbar controls code you copied (step 2) and match them up with the code that is in the code box above. I have removed the links so that it can give you an idea of how it works and so that nothing gets accidentally linked back to my site lol ALSO, take note of your images. The image width and height is based on what I am using on my site, you need to change to match what you want to use on your site.

When in doubt in step 2, you can always just remove the --> in<!-- nav buttons bar -->
and remove <!-- in <!-- / nav buttons bar -->. When you do this, you won't remove the code, but it will result in the action of commenting out the entire nav buttons bar located in the navbar template.

Lastly, this won't show you exactly how to do what you are wanting, but should get you on the right track