How To do a Graphic NavBar

[wezoo]

Hi All

I searched for this , but im not sure what its called so im not having much luck

Basicaly i have the basic navbar ( text) how can u customise it so its a graphical interface rather than the text

please help,

thanks
wez

www.cgempire.com

[threat]

You mean you want a button in the texts place right?

[Brandon Sheley]

just edit your navbar template

There's no direct way to tell you how to do this, it's completely up to you. If you look at my site, here, I've replaced some of the default backgrounds with images. I put text on top of them, but I could just as easily omit the text and use an image with the link text as part of it.

You'll need to rewrite the navbar template if you want a 100% graphical interface for it, and there's no real tutorial on that because it's completely subjective to what you want. Your best bet is to look for a skin that's close to what you're looking for, or just dive in and start learning to code.

[davidw]

Kind of like this? http://www.christianboards.org/?styleid=11

[wezoo]

yup Christian !
thats EXACTLY what i want, can you help ?

[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

[davidw]

Also, because I did not create that style and am not 100% sure, if someone else might want to review what I've written and make suggestions, feel free. This is to the best of my knowledge in this short period of time.