Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Add Icons to the Navigation Bar Tabs Details »
Add Icons to the Navigation Bar Tabs
Mod Version: 1.00, by abdulbasitsaeed (Member) abdulbasitsaeed is offline
Developer Last Online: Apr 2017 I like it Show Printable Version Email this Page

vB Version: 4.1.2 Rating: (7 votes - 5.00 average) Installs: 70
Released: 10 Apr 2010 Last Update: Never Downloads: 0
Not Supported Template Edits Code Changes  

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:


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.

Download Now

Only licensed members can download files, Click Here for more information.

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Comments
  #2  
Old 10 Apr 2010, 02:46
sulasno sulasno is offline
 
Join Date: Feb 2010
tagged and thanks
Reply With Quote
  #3  
Old 10 Apr 2010, 02:51
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
You're welcome, sulasno.
Reply With Quote
  #4  
Old 10 Apr 2010, 02:53
New Joe's Avatar
New Joe New Joe is offline
 
Join Date: May 2009
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?
Reply With Quote
  #5  
Old 10 Apr 2010, 03:08
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
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.


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



Make sure to insert the path of the image you want to show. It works for me.
Reply With Quote
  #6  
Old 11 Apr 2010, 02:16
ndut ndut is offline
 
Join Date: Sep 2007
tag 1st.. thanks
Reply With Quote
  #7  
Old 11 Apr 2010, 20:52
Da-Vinci Da-Vinci is offline
 
Join Date: Mar 2010
How do I add this to my Arcade tab?
__________________
My Forum

Last edited by Da-Vinci; 11 Apr 2010 at 21:56.
Reply With Quote
  #8  
Old 12 Apr 2010, 01:08
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Originally Posted by Da-Vinci View Post
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.
Reply With Quote
  #9  
Old 12 Apr 2010, 06:04
New Joe's Avatar
New Joe New Joe is offline
 
Join Date: May 2009
Originally Posted by abdulbasitsaeed View Post
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.


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



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.
Reply With Quote
  #10  
Old 12 Apr 2010, 09:54
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Great! *thumbsup*

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

Reply With Quote
  #11  
Old 12 Apr 2010, 11:31
Da-Vinci Da-Vinci is offline
 
Join Date: Mar 2010
Originally Posted by abdulbasitsaeed View Post
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.

__________________
My Forum
Reply With Quote
  #12  
Old 12 Apr 2010, 17:27
cloferba cloferba is offline
 
Join Date: Apr 2009
Originally Posted by New Joe View Post
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?
simple:
add the html code image on the left of the text you want to show in the tab
Reply With Quote
  #13  
Old 12 Apr 2010, 17:52
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Originally Posted by Da-Vinci View Post
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.
Reply With Quote
  #14  
Old 12 Apr 2010, 21:27
ozzy47's Avatar
ozzy47 ozzy47 is offline
 
Join Date: Jul 2009
Real name: Chris
Nevermind I found it!

Where did you change the code at for DownloadsII?

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

Last edited by ozzy47; 12 Apr 2010 at 22:38. Reason: solved
Reply With Quote
  #15  
Old 13 Apr 2010, 00:54
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Originally Posted by ozzy47 View Post
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!
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod 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 07:40.

Layout Options | Width: Wide Color: