[HOW TO - vB4] Add Icons to the Navigation Bar Tabs

[abdulbasitsaeed]

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:

https://vborg.vbsupport.ru/external/2010/04/62.png


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:

<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>Replace this with:

<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>Now find:

<vb:else />
<li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a></li>Replace with:

<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>Remember to press "Save" after making these changes to the template.
------------------------------

"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:

<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>Replace this with:

<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>Now find:

<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>Replace with:

<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>Finally find:

<vb:else />
<li><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}">{vb:rawphrase forum}</a></li>Replace with:

<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>Remember to press "Save" after making these changes to the template.
------------------------------

"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:

<vb:if condition="$vboptions['selectednavtab'] == 'vbblog'">
<li class="selected">
<a class="navtab" href="blog.php{vb:raw session.sessionurl_q}">{vb:rawphrase blogs}</a>Replace this with:

<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>Now find:

<vb:else />
<li><a class="navtab" href="blog.php{vb:raw session.sessionurl_q}">{vb:rawphrase blogs}</a></li>Replace with:

<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>Remember to press "Save" after making these changes to the template.
------------------------------

"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:

<vb:if condition="$show['member']">
<li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_P ost" accesskey="2">{vb:rawphrase getnew_tab}</a>Replace this with:

<vb:if condition="$show['member']">
<li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_P ost" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a>Now find:

<vb:else />
<li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum _Post" accesskey="2">{vb:rawphrase getnew_tab}</a>Replace with:

<vb:else />
<li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum _Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a>Find:

<vb:elseif condition="$show['member']" />
<li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_P ost" accesskey="2">{vb:rawphrase getnew_tab}</a></li>Replace with:

<vb:elseif condition="$show['member']" />
<li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_P ost" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a></li>Finally find:

<vb:else />
<li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum _Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li>Replace with:

<vb:else />
<li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum _Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a></li>Remember to press "Save" after making these changes to the template.

[borbole]

Nice tip, however the img tag misses the required alt attribute :)

This code:

<img src="path_of_image" border="0" align="top" />


Should be:

<img src="path_of_image" border="0" align="top" alt="" />

[NashChristian]

Hello,

Are you sharing the images too, or just the code? Thanks for taking the time to document this! :)

[abdulbasitsaeed]

Nice tip, however the img tag misses the required alt attribute :)

This code:

<img src="path_of_image" border="0" align="top" />
Should be:

<img src="path_of_image" border="0" align="top" alt="" />

Thank you very much, borbole. I've added the alt tag to the replacement codes. :)

--------------- Added 1270357680 at 1270357680 ---------------

Hello,

Are you sharing the images too, or just the code? Thanks for taking the time to document this! :)

You're welcome. :)

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. :)

[Uskana]

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 ???

[abdulbasitsaeed]

The name and extension of the image should replace path_of_image in the above code. e.g.

img src="http://forum.com/image.jpg" border........The format should be the same as that of the image itself, which can be either bmp, jpg, gif, png etc.

[Uskana]

The name and extension of the image should replace path_of_image in the above code. e.g.

img src="http://forum.com/image.jpg" border........The format should be the same as that of the image itself, which can be either bmp, jpg, gif, png etc.


It works. Thank you.

[abdulbasitsaeed]

You're welcome. :)

[as7apcool]

thanks 4 good & nice work

[chriske]

How can i use it with this mod: https://vborg.vbsupport.ru/showthread.php?t=233629 ?

[abdulbasitsaeed]

Well, I'm not using this mod, but you can try like this:

Where it asks for "Tab Label", enter the path of the image you want to use along with the actual label for the tab. e.g.

<img src="path_of_image"> Label

[chriske]

Thanks for the fast reply!

I gave it a try and it actually works! Only the positioning is not correct. (see attachment) Any suggestion how to fix this?

[abdulbasitsaeed]

Try changing the image code to something like this:

<img src="path_of_image" border="0" align="top" /> Label

Hope it works for you. :)

[chriske]

Only the image gets displayed, tekst is gone..

Thanks for your help anyhow.

[CFodder]

Followed instructions (using VB 4.03) but only seems to show icons when the button is selected and am unsure how to make them persistent. Any ideas?

[abdulbasitsaeed]

That would most likely mean that you did not replace the code for the condition when the tab is not selected. Try to check all the codes again. I have also detailed the procedure on this thread (https://vborg.vbsupport.ru/showthread.php?t=240138).

[CFodder]

Well I've checked and double checked, am pretty sure I've done it all as you've described. Here's my code for the Home Tab:

<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'">
<li class="selected">
<vb:if condition="$vboptions['vbcms_url']">
<a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="/images/navbar/Home.png" Height="24" Width="24" border="0" align="top" title="Home" alt="Home" /> {vb:rawphrase site}</a>
<vb:else />
<li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="/images/navbar/Home.png" Height="24" Width="24" border="0" align="top" title="Home" alt="Home" /> {vb:rawphrase site}</a></li>
</vb:if>

[abdulbasitsaeed]

This is what I was using before 4.0.4:

<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="http://forums.pakfellows.com/images/icons/Homepage/home.png" border="0" align="top" /> {vb:rawphrase site}</a>
<ul class="floatcontainer">
{vb:raw template_hook.vbcms_navbar_start}
<vb:if condition="$links">
<vb:each from="links" value="link">
<li><a href="{vb:raw link.url}">{vb:raw link.title}</a></li>
</vb:each>
<vb:else />
<li class="hidden">&nbsp;</li>
</vb:if>
{vb:raw template_hook.vbcms_navbar_end}
</ul>
</li>
<vb:else />
<li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="http://forums.pakfellows.com/images/icons/Homepage/home.png" border="0" align="top" /> {vb:rawphrase site}</a></li>
</vb:if>

I think the 3rd line in your code is redundant (it is not part of the code I suggested), the one in red given below:

<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'">
<li class="selected">
<vb:if condition="$vboptions['vbcms_url']">
<a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="/images/navbar/Home.png" Height="24" Width="24" border="0" align="top" title="Home" alt="Home" /> {vb:rawphrase site}</a>
<vb:else />
<li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="/images/navbar/Home.png" Height="24" Width="24" border="0" align="top" title="Home" alt="Home" /> {vb:rawphrase site}</a></li>
</vb:if>

[CFodder]

Oh dear, oh dear. I tried commenting out the third line and got a "adding child to non-existent node" error when trying to save it.

So I thought I'd just try all the code you gave me, pasted it in, changed for my icons of course, and got the same error :(.

[abdulbasitsaeed]

Hmmm. I think your template may have got messed up.

Try reverting to the original template, and then make the changes suggested in the article from scratch.

To revert: Select the template "vbcms_navbar_link" (do not double click) and on the right side of the list of templates, you shall find a "Revert" button. Revert to the default template. Now make the changes as outlined in the article.

Hope that helps. :)

[CFodder]

yep, have reverted the template several times lol, still no luck tho :(

[XiTCLUB]

After adding icons i got this issue
when user not logged in please check the image
http://www.freeimagehosting.net/uploads/1e7be2c80a.jpg


and after logged in everything fine but 1 little error
http://www.freeimagehosting.net/uploads/94439978ce.jpg

Please Fix it

[abdulbasitsaeed]

That is a problem with the custom theme that you are using, not with the actual code provided.

[Alec W]

Thanks for the article.

Another little tip is to add style to vertically align the image.

<img style="vertical-align: middle;" src="../forum/images/site_icons/forum.png" border="0" align="top" alt="" />

[kootta]

thank u it works perfect with me
check it
http://www.al3abfree.com/vb (http://www.al3abfree.com/vb)