 |
|
|
Article Options |
|
[HOW TO - vB4] Add Icons to the Navigation Bar Tabs
by
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:
Replace this with:
Now find:
Replace with:
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:
Replace this with:
Now find:
Replace with:
Finally find:
Replace with:
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:
Replace this with:
Now find:
Replace with:
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:
Replace this with:
Now find:
Replace with:
Find:
Replace with:
Finally find:
Replace with:
Remember to press "Save" after making these changes to the template. No members have liked this post.
Last edited by abdulbasitsaeed; 04 Apr 2010 at 06:04.. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Views: 8388
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Comments |
|
#2
04 Apr 2010, 02:07
|
||||||||
|
||||||||
|
Nice tip, however the img tag misses the required alt attribute
This code:
Should be:
__________________
My mods. No members have liked this post.
|
||||||||
|
#3
04 Apr 2010, 05:23
|
||||
|
||||
|
Hello,
Are you sharing the images too, or just the code? Thanks for taking the time to document this!
No members have liked this post.
|
|
#4
04 Apr 2010, 06:05
|
||||||||
|
||||||||
|
Originally Posted by borbole
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
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.
No members have liked this post.
Last edited by abdulbasitsaeed; 04 Apr 2010 at 06:08. Reason: Auto-Merged DoublePost
|
||||||||
|
#5
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 ??? No members have liked this post.
|
|
#6
02 May 2010, 01:26
|
||||
|
||||
|
The name and extension of the image should replace path_of_image in the above code. e.g.
The format should be the same as that of the image itself, which can be either bmp, jpg, gif, png etc. No members have liked this post.
|
||||
|
#7
02 May 2010, 08:56
|
||||
|
||||
|
Originally Posted by abdulbasitsaeed
It works. Thank you. No members have liked this post.
|
||||
|
#8
02 May 2010, 10:01
|
||||
|
||||
|
You're welcome.
No members have liked this post.
|
|
#9
04 May 2010, 04:17
|
||||
|
||||
|
thanks 4 good & nice work
No members have liked this post.
|
|
#10
11 May 2010, 01:08
|
|||
|
|||
|
How can i use it with this mod: http://www.vbulletin.org/forum/showthread.php?t=233629 ?
No members have liked this post.
|
|
#11
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.
No members have liked this post.
|
||||
|
#12
11 May 2010, 02:16
|
|||
|
|||
|
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? No members have liked this post.
|
|
#13
11 May 2010, 02:29
|
||||
|
||||
|
Try changing the image code to something like this:
Hope it works for you.
No members have liked this post.
|
||||
|
#14
11 May 2010, 04:48
|
|||
|
|||
|
Only the image gets displayed, tekst is gone..
Thanks for your help anyhow. No members have liked this post.
|
|
#15
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?
No members have liked this post.
|
|
«
Previous Article
|
Next Article
»
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Article Options | |
|
|
| New To Site? | Need Help? |
All times are GMT. The time now is 01:39.