Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
[HOW TO - vB4] Add Icons to the Navigation Bar Tabs
abdulbasitsaeed
Join Date: Mar 2009
Posts: 182

by abdulbasitsaeed abdulbasitsaeed is offline 03 Apr 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.
------------------------------

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

Last edited by abdulbasitsaeed; 04 Apr 2010 at 06:04..
Views: 8357
Reply With Quote
Comments
  #2  
Old 04 Apr 2010, 02:07
borbole's Avatar
borbole borbole is offline
 
Join Date: Jan 2010
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.

__________________
My mods.
Reply With Quote
  #3  
Old 04 Apr 2010, 05:23
NashChristian's Avatar
NashChristian NashChristian is offline
 
Join Date: Jul 2007
Real name: Jeff
Hello,

Are you sharing the images too, or just the code? Thanks for taking the time to document this!
Reply With Quote
  #4  
Old 04 Apr 2010, 06:05
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Originally Posted by borbole View Post
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 ---------------

Originally Posted by NashChristian View Post
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.

Last edited by abdulbasitsaeed; 04 Apr 2010 at 06:08. Reason: Auto-Merged DoublePost
Reply With Quote
  #5  
Old 01 May 2010, 22:52
Uskana Uskana is offline
 
Join Date: Dec 2009
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 ???
Reply With Quote
  #6  
Old 02 May 2010, 01:26
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
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.
Reply With Quote
  #7  
Old 02 May 2010, 08:56
Uskana Uskana is offline
 
Join Date: Dec 2009
Originally Posted by abdulbasitsaeed View Post
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.
Reply With Quote
  #8  
Old 02 May 2010, 10:01
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
You're welcome.
Reply With Quote
  #9  
Old 04 May 2010, 04:17
as7apcool's Avatar
as7apcool as7apcool is offline
 
Join Date: Feb 2009
thanks 4 good & nice work
Reply With Quote
  #10  
Old 11 May 2010, 01:08
chriske chriske is offline
 
Join Date: Oct 2008
How can i use it with this mod: http://www.vbulletin.org/forum/showthread.php?t=233629 ?
Reply With Quote
  #11  
Old 11 May 2010, 01:15
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
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.

Reply With Quote
  #12  
Old 11 May 2010, 02:16
chriske chriske is offline
 
Join Date: Oct 2008
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?
Attached Images
File Type: jpg testingicons.jpg (17.5 KB, 85 views)
Reply With Quote
  #13  
Old 11 May 2010, 02:29
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
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.
Reply With Quote
  #14  
Old 11 May 2010, 04:48
chriske chriske is offline
 
Join Date: Oct 2008
Only the image gets displayed, tekst is gone..

Thanks for your help anyhow.
Reply With Quote
  #15  
Old 06 Aug 2010, 01:35
CFodder CFodder is offline
 
Join Date: Mar 2008
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?
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 00:43.

Layout Options | Width: Wide Color: