vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=239710

[HOW TO - vB4] Add Icons to the Navigation Bar Tabs
by abdulbasitsaeed
03 Apr 2010 07:58

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace this with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Now find:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace this with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Now find:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Finally find:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace this with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Now find:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace this with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Now find:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Find:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Finally find:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Remember to press "Save" after making these changes to the template.

borbole 04 Apr 2010 02:07

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

This code:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Should be:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


NashChristian 04 Apr 2010 05:23

Hello,

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

abdulbasitsaeed 04 Apr 2010 06:05

Quote:

Originally Posted by borbole (Post 2015382)
Nice tip, however the img tag misses the required alt attribute :)

This code:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Should be:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

--------------- Added 04 Apr 2010 at 06:08 ---------------

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

Uskana 01 May 2010 22:52

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 02 May 2010 01:26

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Uskana 02 May 2010 08:56

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.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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 02 May 2010 10:01

You're welcome. :)

as7apcool 04 May 2010 04:17

thanks 4 good & nice work

chriske 11 May 2010 01:08

How can i use it with this mod: http://www.vbulletin.org/forum/showthread.php?t=233629 ?

abdulbasitsaeed 11 May 2010 01:15

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.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


chriske 11 May 2010 02:16

1 Attachment(s)
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 11 May 2010 02:29

Try changing the image code to something like this:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Hope it works for you. :)

chriske 11 May 2010 04:48

Only the image gets displayed, tekst is gone..

Thanks for your help anyhow.

CFodder 06 Aug 2010 01:35

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?


All times are GMT. The time now is 05:37.

Powered by vBulletin® Version 3.8.14
Copyright © 2020, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.