vb.org Archive - [HOW TO - vB4] Add Icons to the Navigation Bar Tabs

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=242)

- - [HOW TO - vB4] Add Icons to the Navigation Bar Tabs (https://vborg.vbsupport.ru/showthread.php?t=239710)

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

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:

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:

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>

Now find:

Code:

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

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>

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:

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:

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>

Now find:

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>

Replace with:

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>

Finally find:

Code:

<vb:else />

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

Replace with:

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>

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:

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:

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>

Now find:

Code:

<vb:else />

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

Replace with:

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>

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:

Code:

<vb:if condition="$show['member']">

            <li  class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a>

Replace this with:

Code:

<vb:if condition="$show['member']">

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

Now find:

Code:

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

Code:

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

Code:

<vb:elseif condition="$show['member']" />

            <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li>

Replace with:

Code:

<vb:elseif condition="$show['member']" />

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

Finally find:

Code:

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

Code:

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

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="" />

Hello,

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

Quote:

Originally Posted by borbole (Post 2015382)

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="" />

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

--------------- Added [DATE]1270357680[/DATE] at [TIME]1270357680[/TIME] ---------------

Quote:

Originally Posted by NashChristian (Post 2015434)

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

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

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

The format should be the same as that of the image itself, which can be either bmp, jpg, gif, png etc.

Quote:

Originally Posted by abdulbasitsaeed (Post 2030373)

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

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.

thanks 4 good & nice work

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

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.

Code:

<img src="path_of_image"> Label

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?

Try changing the image code to something like this:

Code:

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

Hope it works for you. :)

Only the image gets displayed, tekst is gone..

Thanks for your help anyhow.

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?

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.

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:

Quote:

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

This is what I was using before 4.0.4:

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

Code:

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

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

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

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

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

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

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="" />

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

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01415 seconds Memory Usage 1,833KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (28)bbcode_code_printable (4)bbcode_html_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (25)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: