The Arcive of Official vBulletin Modifications Site.

Add Icons to the Navigation Bar Tabs · **Released**: 04-09-2010

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.

Note: You may find instructions for vB 4.1.2 over here.
------------------------------

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

sulasno · #2 04-10-2010, 01:46 AM

tagged and thanks

abdulbasitsaeed · #3 04-10-2010, 01:51 AM

You're welcome, sulasno.

New Joe · #4 04-10-2010, 01:53 AM

Tagged too.
I have this installed: Tabs Add System for vBulletin 4 > https://vborg.vbsupport.ru/showthread.php?t=233629
So I have a lot more added tabs, if I wanted to add icons to these extra tabs I have from using the above tab Mod would it be easy to do?

abdulbasitsaeed · #5 04-10-2010, 02:08 AM

Well, I'm not really sure about this particular mod, since I'm not using it. The one I'm using is here.

However, I'll tell you how I managed to make it work with it.

In the option where the mod asks you for the name of the tab, just add the following before it.

Code:

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

Make sure to insert the path of the image you want to show. It works for me.

ndut · #6 04-11-2010, 01:16 AM

tag 1st.. thanks

Da-Vinci · #7 04-11-2010, 07:52 PM

How do I add this to my Arcade tab?

abdulbasitsaeed · #8 04-12-2010, 12:08 AM

Quote:

Originally Posted by Da-Vinci

How do I add this to my Arcade tab?

Well, I can't be 100% sure since I am not using that mod, but I can try helping.

Go to Admin CP > Plugins & Products > Plugin Manager. Here you shall find various plugins listed under the products you have installed. Look for Arcade here and hopefully you'll find a plugin which adds a tab to the navigation bar. It may be named something like... Arcade: Add a Tab

You'll have to open and edit this plugin and see where does inserting the image code give you the best results.

Do let me know if this works for you.

New Joe · #9 04-12-2010, 05:04 AM

Quote:

Originally Posted by abdulbasitsaeed

Well, I'm not really sure about this particular mod, since I'm not using it. The one I'm using is here.

However, I'll tell you how I managed to make it work with it.

In the option where the mod asks you for the name of the tab, just add the following before it.

Code:

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

Make sure to insert the path of the image you want to show. It works for me.

What this did was to insert the image in the centre part of the Tab but the name which I had put in for the tab after the above code wasn't showing.
I put in the code then after the code the name of the Tab.

abdulbasitsaeed · #10 04-12-2010, 08:54 AM

Great! *thumbsup*

Hope you wouldn't mind marking it as installed too.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04744 seconds Memory Usage 2,349KB Queries Executed 24 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (24)bbcode_code (2)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (10)post_thanks_box (1)post_thanks_box_bit (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (10)post_thanks_postbit_info (9)postbit (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

2 благодарности(ей) от:
elsa23

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!