The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
[HOW TO - vB4] Add Icons to the Navigation Bar Tabs
![]() Hi there, everyone! ![]() Prior to the vBulletin 4.0 upgrade, I had these neat little icons in the navigation bar of my v 3.8 forum's theme. Since I upgraded the forums, I wanted to put these icons back once again. However, with the rewrite of the whole code, I was at a complete loss as to where to make these changes. After a lot of searching and hit and trial, however, I did manage to come up with something that suited my needs. So I thought I'd write an article myself, with the hope that it would help others trying to do something similar. ![]() These template modifications allow you to add icons to the tabs in the Navigation Bar, right below the logo, as shown in the image below: ![]() I'll stick with the default Navigation Bar tabs, i.e. Home, Forum, Blogs and What's New. Although you may use images of any size, but since I did not want to meddle too much with the default design / layout, I resized all the images to 24px ? 24px. Note: I have colour coded all code edits / additions in red to make it easier to see what has been added. ------------------------------ "Home" Tab: (2 modifications needed in only 1 template) In your Admin Control Panel (ACP), go to: ACP > Styles & Templates > Style Manager > Double arrows on the right of the style you want to edit (Expand Templates) > vBulletin CMS Templates > vbcms_navbar_link Here, look for the following code: Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'"> <li class="selected"> <a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a> Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'"> <li class="selected"> <a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase site}</a> Code:
<vb:else /> <li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a></li> Code:
<vb:else /> <li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase site}</a></li> ------------------------------ "Forum" Tab: (3 modifications needed in only 1 template) In your Admin Control Panel (ACP), go to: ACP > Styles & Templates > Style Manager > Double arrows on the right of the style you want to edit (Expand Templates) > Navigation / Breadcrumb Templates > navbar Here, look for the following code: Code:
<vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT != 'search'"> <li class="selected"><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}">{vb:rawphrase forum}</a> Code:
<vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT != 'search'"> <li class="selected"><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase forum}</a> Code:
<vb:elseif condition="$vboptions['selectednavtab']=='usercp'" /> <li class="selected"><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}">{vb:rawphrase forum}</a> Code:
<vb:elseif condition="$vboptions['selectednavtab']=='usercp'" /> <li class="selected"><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase forum}</a> Code:
<vb:else /> <li><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}">{vb:rawphrase forum}</a></li> Code:
<vb:else /> <li><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase forum}</a></li> ------------------------------ "Blogs" Tab: (2 modifications needed in only 1 template) In your Admin Control Panel (ACP), go to: ACP > Styles & Templates > Style Manager > Double arrows on the right of the style you want to edit (Expand Templates) > Blog Templates > blog_navbar_link Here, look for the following code: Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbblog'"> <li class="selected"> <a class="navtab" href="blog.php{vb:raw session.sessionurl_q}">{vb:rawphrase blogs}</a> Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbblog'"> <li class="selected"> <a class="navtab" href="blog.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase blogs}</a> Code:
<vb:else /> <li><a class="navtab" href="blog.php{vb:raw session.sessionurl_q}">{vb:rawphrase blogs}</a></li> Code:
<vb:else /> <li><a class="navtab" href="blog.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase blogs}</a></li> ------------------------------ "What's New" Tab: (4 modifications needed in only 1 template) In your Admin Control Panel (ACP), go to: ACP > Styles & Templates > Style Manager > Double arrows on the right of the style you want to edit (Expand Templates) > Navigation / Breadcrumb Templates > navbar Here, look for the following code: Code:
<vb:if condition="$show['member']"> <li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a> Code:
<vb:if condition="$show['member']"> <li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a> Code:
<vb:else /> <li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a> Code:
<vb:else /> <li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a> Code:
<vb:elseif condition="$show['member']" /> <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li> Code:
<vb:elseif condition="$show['member']" /> <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a></li> Code:
<vb:else /> <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li> Code:
<vb:else /> <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a></li> |
#2
|
||||
|
||||
![]()
Nice tip, however the img tag misses the required alt attribute
![]() This code: HTML Code:
<img src="path_of_image" border="0" align="top" />
Should be: HTML Code:
<img src="path_of_image" border="0" align="top" alt="" />
|
#3
|
||||
|
||||
![]()
Hello,
Are you sharing the images too, or just the code? Thanks for taking the time to document this! ![]() |
#4
|
||||
|
||||
![]() Quote:
![]() --------------- Added [DATE]1270357680[/DATE] at [TIME]1270357680[/TIME] --------------- Quote:
![]() I didn't add the images, thinking that everyone has his own liking and preference. There are plenty of sites where you can download free icons / images. Just google around a bit. If you're interested in the ones that I have, you can PM me. ![]() |
#5
|
|||
|
|||
![]()
Hi
on <img src="path_of_image" border="0" align="top" alt="" /> , where should i put the name of a image ? between alt=" here ", or src="menues/image.jpg."? Wich format should it be? JPG GIF or ??? |
#6
|
||||
|
||||
![]()
The name and extension of the image should replace path_of_image in the above code. e.g.
Code:
img src="http://forum.com/image.jpg" border........ |
#7
|
|||
|
|||
![]() Quote:
It works. Thank you. |
#8
|
||||
|
||||
![]()
You're welcome.
![]() |
#9
|
|||
|
|||
![]()
thanks 4 good & nice work
|
#10
|
|||
|
|||
![]()
How can i use it with this mod: https://vborg.vbsupport.ru/showthread.php?t=233629 ?
|
![]() |
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
![]() |
|
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|