 |
|
|
Mod Options |
Add Icons to the Navigation Bar Tabs Details »
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Add Icons to the Navigation Bar Tabs
Developer Last Online: Feb 2020 
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:
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. Download Now Only licensed members can download files, Click Here for more information. Show Your Support
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
About Developer
Not Supported 
Template Edits| Comments |
|
#2
10 Apr 2010, 03:46
|
|||
|
|||
|
tagged and thanks
No members have liked this post.
|
|
#3
10 Apr 2010, 03:51
|
||||
|
||||
|
You're welcome, sulasno.
No members have liked this post.
|
|
#4
10 Apr 2010, 03:53
|
||||
|
||||
|
Tagged too.
I have this installed: Tabs Add System for vBulletin 4 > http://www.vbulletin.org/forum/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? No members have liked this post.
|
|
#5
10 Apr 2010, 04:08
|
||||
|
||||
|
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.
Make sure to insert the path of the image you want to show. It works for me. No members have liked this post.
|
||||
|
#6
11 Apr 2010, 03:16
|
|||
|
|||
|
tag 1st.. thanks
No members have liked this post.
|
|
#7
11 Apr 2010, 21:52
|
|||
|
|||
|
How do I add this to my Arcade tab?
__________________
My Forum No members have liked this post.
Last edited by Da-Vinci; 11 Apr 2010 at 22:56.
|
|
#8
12 Apr 2010, 02:08
|
||||
|
||||
|
Originally Posted by 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.
No members have liked this post.
|
|
#9
12 Apr 2010, 07:04
|
||||
|
||||
|
Originally Posted by abdulbasitsaeed
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. No members have liked this post.
|
||||
|
#10
12 Apr 2010, 10:54
|
||||
|
||||
|
Great! *thumbsup*
Hope you wouldn't mind marking it as installed too.
No members have liked this post.
|
|
#11
12 Apr 2010, 12:31
|
|||
|
|||
|
Originally Posted by 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.
__________________
My Forum No members have liked this post.
|
|
#12
12 Apr 2010, 18:27
|
|||
|
|||
|
Originally Posted by New Joe
simple:
add the html code image on the left of the text you want to show in the tab No members have liked this post.
|
|
#13
12 Apr 2010, 18:52
|
||||
|
||||
|
Originally Posted by Da-Vinci
Great! Congratulations.
No members have liked this post.
|
|
#14
12 Apr 2010, 22:27
|
||||
|
||||
|
Nevermind I found it!
Where did you change the code at for DownloadsII? I can't seem to get it to show up. No members have liked this post.
Last edited by ozzy47; 12 Apr 2010 at 23:38. Reason: solved
|
|
#15
13 Apr 2010, 01:54
|
||||
|
||||
|
Originally Posted by ozzy47
Glad you did!
No members have liked this post.
|
|
«
Previous Mod
|
Next Mod
»
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Mod Options | |
|
|
| New To Site? | Need Help? |
All times are GMT. The time now is 16:13.