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.

Note: You may find instructions for vB 4.1.2 over here (https://vborg.vbsupport.ru/showpost.php?p=2154634&postcount=49).
------------------------------

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

[sulasno]

tagged and thanks

[abdulbasitsaeed]

You're welcome, sulasno. :)

[New Joe]

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]

Well, I'm not really sure about this particular mod, since I'm not using it. The one I'm using is here (https://vborg.vbsupport.ru/showthread.php?t=228507).

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.

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

tag 1st.. thanks

[Da-Vinci]

How do I add this to my Arcade tab?

[abdulbasitsaeed]

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]

Well, I'm not really sure about this particular mod, since I'm not using it. The one I'm using is here (https://vborg.vbsupport.ru/showthread.php?t=228507).

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.

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

Great! *thumbsup*

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

:)

[Da-Vinci]

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

You were absoloutley right, I'd managed to find my donate tab in it's own template and was just totally stuck on the Arcade, the tab code is at the very bottom of the plugin. Thanks for your help. Installed and rated.

http://www.hostmypics.org/pictures/f97d0c0d229223e8ec402f63e0f8e1dc.png (http://www.hostmypics.org)

[cloferba]

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?

simple:
add the html code image on the left of the text you want to show in the tab

[abdulbasitsaeed]

You were absoloutley right, I'd managed to find my donate tab in it's own template and was just totally stuck on the Arcade, the tab code is at the very bottom of the plugin. Thanks for your help. Installed and rated.



Great! Congratulations. :)

[ozzy47]

<font color="Red">Nevermind I found it!</font>

Where did you change the code at for DownloadsII?

I can't seem to get it to show up.

[abdulbasitsaeed]

Nevermind I found it!

Where did you change the code at for DownloadsII?

I can't seem to get it to show up.

Glad you did! :)

[New Joe]

Great! *thumbsup*

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

:)

Marked as installed, although what i posted in my above post was a problem, the icon show But the name of the Tab doesn't, any ideas why?

[abdulbasitsaeed]

Oh. I think there's some problem with the code you entered.

Could you post the exact code which you are using now?

[Toxic2]

Oh....This is Nice....Tagged for when I get caught up and get a chance to Play with it. Tks for the Mod/edits :) although, it would be nice for one to donate a couple of Icons LOL

[trackpads]

Holy crap this is a great idea, thanks for posting the mod!

-Jason

[abdulbasitsaeed]

Thanks for liking it. :)

[K4GAP]

Where can I get a good set of icons to use with this?

[cloferba]

on firefox the icon is centered...but on chrome, the icon is show up the line of the text

how can i fix that?

[abdulbasitsaeed]

Could you post a screenshot?

[cloferba]

fixed...i have left a blank space up the icon

[Da-Vinci]

Where can I get a good set of icons to use with this?

http://www.iconfinder.com

The best icon site around in my opinion.

[rrudeboy]

can't find vbcms_navbar_link :(

[abdulbasitsaeed]

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

I wonder if they've made any template change(s) in 4.0.4. Otherwise, it is supposed to be as mentioned above. :)

[Dr.osamA]

Excellent

installed + 5 stars

keep it up bro

[abdulbasitsaeed]

Thank you for liking and rating, Dr. Osama. :)

[Kendsl]

The code does not work with Version 4.0.4. Do you update it?

[Matite]

can't find vbcms_navbar_link :(

I cannot find it either... I think it is because I am using VB Forum v4.0.4 without the CMS so the code and template names are different.

Maybe the author could check this.

:)

[abdulbasitsaeed]

The code does not work with Version 4.0.4. Do you update it?

I haven't upgraded to 4.0.4 yet but plan to do so soon. Once I do, I'll have a look at this again and see what needs to be changed. :)

[abdulbasitsaeed]

I cannot find it either... I think it is because I am using VB Forum v4.0.4 without the CMS so the code and template names are different.

Maybe the author could check this.

:)

My friend, if you don't have CMS, then you wouldn't have a "Home Tab" either. Hence, you don't need to make any changes listed under "Home Tab". That's the only place where you need to make changes to vbcms_navbar_link.

[Kendsl]

Thank you very much!

[Bobbo]

This mod is great. Simple to apply to my other custom navbar items, etc.

One of the things I try to remain concious of is the 'look and feel' for my private user base. About 80% of my members are Internet Explorer users. Of those, 47% use IE8, the rest are running IE6 or IE7. So in general, I try to ensure that at least the major elements of the site look reasonable for IE7, while attempting to push my customers to IE8, Chrome, or Firefox.

I've noticed that when I add icons to the navbar elements, the align='top' results in the actual navbar text being aligned to the top rather than centered properly (in IE7 or IE8 compatability mode).

Has anyone come up with a method to eliminate this issue for that browser version without impacting the rest?

Bob :)

[TheSupportForum]

please make this as a product, you can simply use find and replace or add before or add after.

this would be worth a better product then, but sorry i dont know the code for all this customisation, and hope you can do it

[sulasno]

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.

what is the size of the image that you use ?

[abdulbasitsaeed]

24px x 24px

[Winter Sonata]

where can I get those Icons ?

[8thos]

Love this thread, unfortunately, Home Tab Icon won't show when your viewing the site under a different navtab.

[BioWaffen]

I have a question:
Is it possible that I can see all 4 Images, no matter in which of those 4 tabs I am?
Because if I use the CMS for example, I can only see the home button (and not the other ones)
when I use the Forum, I can only see the forum button (and not the other ones)
I guess it needs more templates to edit, but which ones?

With best regards
BioWaffen

[thanasis1]

where can we find well desinged icons??

[risky91]

Anyone have a tip on how to apply this to the tabs created by Sstab mod by vBSoporte?

[motorola]

Its this good for vb4.1.0 PL2?

[OldSchoolDSL]

Its this good for vb4.1.0 PL2?

I'm going to guess, no. I could not find the complete code needed in 4.1 PL2

An example is my vbcms_navbar_link seems different.

<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'">
<li class="selected">
<vb:if condition="$vboptions['vbcms_url']">
<a class="navtab" href="{vb:raw vboptions.vbcms_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a>
<vb:else />
<a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a>
</vb:if>
<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>
<vb:if condition="$vboptions['vbcms_url']">
<a class="navtab" href="{vb:raw vboptions.vbcms_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a>
<vb:else />
<a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a>
</vb:if>
</li>
</vb:if>

[horussjr]

update to 4.1.1?

[OldSchoolDSL]

update to 4.1.1?

I 2nd the question

Please & thank you

[OldSchoolDSL]

Installed (kind of)

4.1.1

I have all the icons listed showing, except the HOME icon only shows on the CMS page & no where else.

Will attempt to learn how to apply this on a few other tabs I have.

[abdulbasitsaeed]

Ok, I'll be honest with you guys. I have not upgraded to 4.1.1 (still at 4.0.6), so can't really test this anymore but I'll try to guide you guys a bit in the hope that you'll be able to manage the rest. :)

"Home" Tab:

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

In this template, look for the text {vb:rawphrase site} and insert the code given below BEFORE this text, wherever and as many times as you find it.

<img src="path_of_image" border="0" align="top" alt="" />Remember to press "Save" after making these changes to the template.
------------------------------

"Forum" Tab:

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

In this template, look for the text {vb:rawphrase forum} and insert the code given below BEFORE this text, wherever and as many times as you find it.

<img src="path_of_image" border="0" align="top" alt="" />Remember to press "Save" after making these changes to the template.
------------------------------

"Blogs" Tab:

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

In this template, look for the text {vb:rawphrase blogs} and insert the code given below BEFORE this text, wherever and as many times as you find it.

<img src="path_of_image" border="0" align="top" alt="" /> Remember to press "Save" after making these changes to the template.
------------------------------

"What's New" Tab:

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

In this template, look for the text {vb:rawphrase getnew_tab} and insert the code given below BEFORE this text, wherever and as many times as you find it.

<img src="path_of_image" border="0" align="top" alt="" /> Remember to press "Save" after making these changes to the template.
------------------------------

[OldSchoolDSL]

Confirmed.

Was basically what I did on mine. Was going to report the fix, but you got to it before me. lol

Installed & working

4.1.1

[abdulbasitsaeed]

Thank you for confirming, OldSchoolDSL. Glad that it works. :)

[New Joe]

Working fine as well.

I still have this problem.
I have Picture and Album Gallery for vB4 https://vborg.vbsupport.ru/showthread.php?t=237931&highlight=Album installed
I want to add a picture to the Tab but I don't know how to.

I also have this installed: https://vborg.vbsupport.ru/showthread.php?t=233629&highlight=double+tabs

I tried to add this: <img src="path_of_image" border="0" align="top" alt="" /> Live Poststo the Tab Label, but all that does is show the picture without the 'Live Posts' text, it actually takes away the text of 'Live Posts' when you click save after editing the Tab in the Mod.

Any help would be great, thanks.

[abdulbasitsaeed]

Well, I don't have either of the above mods installed. But if you could give me access to an admin account, perhaps I could have a look and see what can be done.

[mudmanc4]

Working fine as well.

I still have this problem.
I have Picture and Album Gallery for vB4 https://vborg.vbsupport.ru/showthread.php?t=237931&highlight=Album installed
I want to add a picture to the Tab but I don't know how to.

I also have this installed: https://vborg.vbsupport.ru/showthread.php?t=233629&highlight=double+tabs

I tried to add this: to the Tab Label, but all that does is show the picture without the 'Live Posts' text, it actually takes away the text of 'Live Posts' when you click save after editing the Tab in the Mod.

Any help would be great, thanks.

Sounds as if you are deleting the code after the image code ( code in red ) , when you should be inserting the code in red.

[fxwoody]

Ok, little adjustments here for those who are stuck with the icons on different tabs then HOME-BLOG etc etc
I have the tabs vbSoporte, Experience and V3Arcade in the navbar.
In order to get the icons to show in those, the easiest way is t o paste the code with in the Navbar link options from the MOD!

Example:
v3Arcade General Settings/Arcade Name
I pasted my code like this where you write the name of the tab

The Game Room<img src="images/misc/iconforums/156.png" align="top" hight="36px" width="36px" alt=""/>

Same thing in vbSoporte, code always after the title or else it will cut the text because of the maximum width of the tab.
I also pasted every code in the templates after the " {vb:rawphrase forum}" or other templates you add your icons! This way it will look more uniform and aligned.

Hope it help out a bit ;)

[abdulbasitsaeed]

Yup, that's absolutely right, fxwoody. I didn't suggest it on the thread because it may or may not work, depending on the mod. :)

I am using the same method with this mod as well. https://vborg.vbsupport.ru/showthread.php?t=228507

[fxwoody]

Played around a lot to figure out why it wasn't working well but...lol with patience ;)

[Merenguista]

شكرا عبد الباسط .. سيتم تجربة الأمر لاحقا .. تحياتي

[abdulbasitsaeed]

اهلا وسهلا بكم

[Mikevet1984]

The Home Nav bar button icon added successfully and works great!

I just followed the instructions of post 49.

Thank you, abdulbasitsaeed...

[abdulbasitsaeed]

You may show your thanks by clicking "Mark as Installed", Mikevet1984. ;)

[Mikevet1984]

Of course, done!

Forgive me for the delay!

One more request please....

How can we find he navbar template of the buttons if a user adds more tabs than the default ones? I use this modification https://vborg.vbsupport.ru/showthread.php?t=228507 to add more tabs in my forum. How can I find the template needed to to alter the script for new icons to be added?

You may change the instructions of you like just like the ones in post number 49 as this was the way that helped me understand what I have to alter in the templates for the icons to appear!

[OldSchoolDSL]

Would be wonderful if I could get this to work with:

https://vborg.vbsupport.ru/showthread.php?t=237931

[abdulbasitsaeed]

Of course, done!

Forgive me for the delay!

One more request please....

How can we find he navbar template of the buttons if a user adds more tabs than the default ones? I use this modification https://vborg.vbsupport.ru/showthread.php?t=228507 to add more tabs in my forum. How can I find the template needed to to alter the script for new icons to be added?

You may change the instructions of you like just like the ones in post number 49 as this was the way that helped me understand what I have to alter in the templates for the icons to appear!

No problem, and thank you. :)

I use vBH-Add new tabs (https://vborg.vbsupport.ru/showthread.php?t=228507) as well and adding an icon to its tabs is actually easier than the template modifications outlined above. :)

In your Admin Control Panel, go to Settings > Options > vBH New Tabs Options. This is the code that I am using for my added tab.

<img src="path_of_image" border="0" align="top" /> Text for Tab|URL for Tab=>blank

That's all that there's to it. Let me know whether it works for you or not. :)

[abdulbasitsaeed]

Would be wonderful if I could get this to work with:

https://vborg.vbsupport.ru/showthread.php?t=237931

I'm afraid I don't have that installed at my end. Perhaps you could give me admin access to your site and I could have a look around. Hopefully, it shouldn't be that hard. :)

[Mikevet1984]

Thank you one more time abdulbasitsaeed for sharing your tricks with us....

I was wondering if the same thing can be done with the links under the Navbar.

[abdulbasitsaeed]

I'm afraid that is out of the scope of this article. :)

The tabs all have unique names coded as phrases. However, links in the navbar are not unique per se. One can change the name of any link to anything else.

[OldSchoolDSL]

I'm afraid I don't have that installed at my end. Perhaps you could give me admin access to your site and I could have a look around. Hopefully, it shouldn't be that hard. :)

I'll be switching host soon. I'll give you access once I move host (allowing you to do what ever you want on the old host).

[Mikevet1984]

Hello,

I added this modification for user notes https://vborg.vbsupport.ru/showthread.php?t=247552

and one more tab appeared in the navbar!

Could sb please inform me which is the Navbar template of this mod to add an icon to this mod tab?

[abdulbasitsaeed]

Hello,

I added this modification for user notes https://vborg.vbsupport.ru/showthread.php?t=247552

and one more tab appeared in the navbar!

Could sb please inform me which is the Navbar template of this mod to add an icon to this mod tab?

Go to Admin Control Panel > Plugins & Products > Plugin Manager.

Here, under Product : IB myNotes, click Navbar Button.

Edit the last line of the code as follows:

<a href="forum.php?do=shownotes&amp;product=notes" class="navtab"><img src="path_of_image" border="0" align="top" alt="" />My Notes</a></li>';

[Mikevet1984]

Thank you, abdul!

https://vborg.vbsupport.ru/external/2011/03/25.jpg

[abdulbasitsaeed]

Sure. You're welcome. :)

[RedHacker]

I cant find in the navbar template this code...

I have vBulletin Version 4.1.2

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

[abdulbasitsaeed]

I cant find in the navbar template this code...

I have vBulletin Version 4.1.2

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

For 4.1.2, follow the instructions given here (https://vborg.vbsupport.ru/showpost.php?p=2154634&postcount=49).

I hope this would solve your problem. :)

[setishock]

Your 4.1.2 instructions are spot on. Thank you.
http://animeappeal.com/forum.php?styleid=93

[RedHacker]

For 4.1.2, follow the instructions given here (https://vborg.vbsupport.ru/showpost.php?p=2154634&postcount=49).

I hope this would solve your problem. :)

Thanks very much

[RedHacker]

I find some bugs. If not logged in site the tabs Home-Forum-Whats New no show any icon. If logged show all icons but if go to the Forum Tab not show Forum and Home Tab icon :(

[abdulbasitsaeed]

That is probably because you have not inserted the image code in all places required in the template. Please note that the instructions say:

In this template, look for the text {vb:rawphrase site} and insert the code given below BEFORE this text, wherever and as many times as you find it.

I would suggest you redoing the changes outlined in the article. :)

[DNN]

Good looking out on the useful tips on this. I'mma do just that when I have things setup nice & proper! =)

[nezr]

hi - thanks for the mod

one question, i find that the icon and the text are really close to one another. how do i add a space between them?

[abdulbasitsaeed]

For a space, add &nbsp; as many times as required. :)

[Merenguista]

i'll try this .. thank's ..

[spillage]

For those using vBadvanced Links Directory (http://www.vbadvanced.com/products.php?do=productinfo&productid=2):

ACP > Styles & Templates > Style Manager > Double arrows on the right of the style you want to edit (Expand Templates) > vBadvanced Links Directory Templates > adv_links_navbar

Find;
{vb:raw vboptions.vba_links_title}

Add BEFORE (like all other instances);
<img src="path_of_image" border="0" align="top" alt="" />


Should look like this;
<a class="navtab" href="{vb:raw vboptions.vba_links_homeurl}/index.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" />{vb:raw vboptions.vba_links_title}</a>

Click Save.

[spillage]

For those using Picture and Album Gallery (https://vborg.vbsupport.ru/showthread.php?t=237931):

ACP > Plugins & Products > Plugin Manager > Gallery navtab popup menu

Find;
<a href="javascript://" class="popupctrl navtab">

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


Should look like this;
<a href="javascript://" class="popupctrl navtab"><img src="path_of_image" border="0" align="top" alt="" />' . $vbphrase['gallery']

Click Save

[duketxboy]

doesn't work on 4.1.5 version keep getting adding child to non-existent node?

[spillage]

It's working fine on 4.1.7 for me.

[spillage]

A further note on using this Mod with vBadvanced Links Directory;
For the images to show when viewing the Links Directory page, you must use the full URL.
ie;
<img src="/forums/images/misc/Tab-Image.png" border="0" align="top" alt="" />
This applies to all your tabs.

[Maxii]

is it working for 4.1.9?

[spillage]

Working on 4.1.10 for me.

[spillage]

For those using Downloads II (https://vborg.vbsupport.ru/showthread.php?t=231427):

ACP > Styles & Templates > Style Manager > Double arrows on the right of the style you want to edit (Expand Templates) > Downloads Templates > downloads2_navbar_link

Find;
{vb:rawphrase downloads2}

Add BEFORE (like all other instances);
<img src="path_of_image" border="0" align="top" alt="" />

There are two locations within this template to add this code.

Click Save.

[ged]

Does this work with vBulletin 4.2.x?

[fuldon]

Edit navbar_tabs<a class="navtab" href="{vb:raw tab.url}">{vb:raw tab.title}</a>Replace:<a class="navtab" href="{vb:raw tab.url}"><img src="images/buttons/{vb:raw tab.name}.png" width=24 height=24 border="0" align="top" alt="" /> {vb:raw tab.title}</a>

[initiald]

Can you update the instruction for Vbulletin 4.2?

[spillage]

I'd also appreciate an official update for 4.2.

"Home" (now Articles), "What's New", "Forum", and "Blogs" Tabs no longer display the icon/images on the Tab.

Any of the Tabs added by Mod's and subsequently tweaked to show Icons are still working.

It's only the default 4.2 Tabs that don't work.

Thanks in advance for your time... it is greatly appreciated.

[spillage]

fuldon, sorry, I thought your code was incomplete since there is no scroll down in the codebox.

Having seen the rest of it, I was able to implement it on my site.

The only changes I made was to use an images/misc/tabs/ subfolder, and edited the code to point to it.
<a class="navtab" href="{vb:raw tab.url}"><img src="images/misc/tabs/{vb:raw tab.title}.png" width=24 height=24 border="0" align="top" alt="" /> {vb:raw tab.title}</a>
And I also used vb:raw tab.title instead of vb:raw tab.name to simplify the renaming of the images.
Almost caught myself out on this, as I had to edit What's New? Tab to Whats New to avoid a file naming issue.

Anyway... THANKS!

[danycutu1]

any instructions for 4.2?

[Derwin]

I would love to install this on 4.2.

Any plans on updating this?

[dog-tag]

For guys using 4.2 PL3

Just follow these directions -
https://vborg.vbsupport.ru/showpost.php?p=2348344&postcount=92

No other edits are needed anywhere else. Worked very easily for me, thank you for making this modification, it brought alot of life to my forum!

[Spangle]

Edit navbar_tabs<a class="navtab" href="{vb:raw tab.url}">{vb:raw tab.title}</a>Replace:<a class="navtab" href="{vb:raw tab.url}"><img src="images/buttons/{vb:raw tab.name}.png" width=24 height=24 border="0" align="top" alt="" /> {vb:raw tab.title}</a>


Am I missing some thing, there's no closing tag in the replacement, and do we do this as another edit on top of those in the OP ...

Sorry but I am a noob to VB, and finding it a bit difficult to get up to speed with it.

[stevieb]

Edit navbar_tabs<a class="navtab" href="{vb:raw tab.url}">{vb:raw tab.title}</a>Replace:<a class="navtab" href="{vb:raw tab.url}"><img src="images/buttons/{vb:raw tab.name}.png" width=24 height=24 border="0" align="top" alt="" /> {vb:raw tab.title}</a>

Installed, really easy to do - thanks :)

[ku-med]

Edit navbar_tabs<a class="navtab" href="{vb:raw tab.url}">{vb:raw tab.title}</a>Replace:<a class="navtab" href="{vb:raw tab.url}"><img src="images/buttons/{vb:raw tab.name}.png" width=24 height=24 border="0" align="top" alt="" /> {vb:raw tab.title}</a>

Is there a way to add unique icons to each tab on 4.2 ?

This method will add the same icon for all the tabs. Thank you!

[concepts]

Looking great on 4.2.3 I though I wanted different icons next to each, but realized it's overkill. Having a simple clean icon next to each element helped me to highlight the navigation better, and offers a much more interactive look in my opinion.