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.
  #91  
Old 31 May 2012, 18:15
ged's Avatar
ged ged is offline
 
Join Date: Feb 2005
Real name: Domates
Does this work with vBulletin 4.2.x?
__________________
http://www.dipsizkuyu.net - Turkey's fountain of knowledge.
Reply With Quote
  #92  
Old 15 Jul 2012, 17:43
fuldon fuldon is offline
 
Join Date: Jan 2004
Real name: Michael
Edit navbar_tabs
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Reply With Quote
  #93  
Old 14 Aug 2012, 06:28
initiald initiald is offline
 
Join Date: Mar 2012
Can you update the instruction for Vbulletin 4.2?
Reply With Quote
  #94  
Old 11 Nov 2012, 21:03
spillage spillage is offline
 
Join Date: Mar 2009
Real name: Bryan
I'd also appreciate an official update for 4.2.

"Home" (now Articles), "What's New", "Forum", and "Blogs" Tabs no longer display the icon/images on the Tab.

Any of the Tabs added by Mod's and subsequently tweaked to show Icons are still working.

It's only the default 4.2 Tabs that don't work.

Thanks in advance for your time... it is greatly appreciated.
__________________
Bryan
vB 4.2.4
Reply With Quote
  #95  
Old 17 Nov 2012, 21:46
spillage spillage is offline
 
Join Date: Mar 2009
Real name: Bryan
fuldon, sorry, I thought your code was incomplete since there is no scroll down in the codebox.

Having seen the rest of it, I was able to implement it on my site.

The only changes I made was to use an images/misc/tabs/ subfolder, and edited the code to point to it.

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

And I also used vb:raw tab.title instead of vb:raw tab.name to simplify the renaming of the images.
Almost caught myself out on this, as I had to edit What's New? Tab to Whats New to avoid a file naming issue.

Anyway... THANKS!
__________________
Bryan
vB 4.2.4

Last edited by spillage; 18 Nov 2012 at 03:56.
Reply With Quote
  #96  
Old 20 Feb 2013, 03:21
danycutu1's Avatar
danycutu1 danycutu1 is offline
 
Join Date: Feb 2010
any instructions for 4.2?
Reply With Quote
  #97  
Old 12 Mar 2013, 20:24
Derwin's Avatar
Derwin Derwin is offline
 
Join Date: Jan 2009
I would love to install this on 4.2.

Any plans on updating this?
Reply With Quote
  #98  
Old 09 Apr 2013, 20:39
dog-tag's Avatar
dog-tag dog-tag is offline
 
Join Date: Jan 2012
For guys using 4.2 PL3

Just follow these directions -
http://www.vbulletin.org/forum/showp...4&postcount=92

No other edits are needed anywhere else. Worked very easily for me, thank you for making this modification, it brought alot of life to my forum!
Reply With Quote
  #99  
Old 07 May 2013, 22:06
Spangle Spangle is offline
 
Join Date: Jun 2011
Originally Posted by fuldon View Post
Edit navbar_tabs
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Am I missing some thing, there's no closing tag in the replacement, and do we do this as another edit on top of those in the OP ...

Sorry but I am a noob to VB, and finding it a bit difficult to get up to speed with it.
Reply With Quote
  #100  
Old 29 Jul 2013, 18:37
stevieb stevieb is offline
 
Join Date: Apr 2005
Originally Posted by fuldon View Post
Edit navbar_tabs
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.
Installed, really easy to do - thanks

Last edited by stevieb; 29 Jul 2013 at 19:20.
Reply With Quote
  #101  
Old 14 Aug 2015, 00:35
ku-med's Avatar
ku-med ku-med is offline
 
Join Date: Aug 2013
Originally Posted by fuldon View Post
Edit navbar_tabs
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.
Is there a way to add unique icons to each tab on 4.2 ?

This method will add the same icon for all the tabs. Thank you!
Reply With Quote
  #102  
Old 14 Aug 2015, 23:56
concepts's Avatar
concepts concepts is offline
 
Join Date: May 2005
Real name: Jamale
Looking great on 4.2.3 I though I wanted different icons next to each, but realized it's overkill. Having a simple clean icon next to each element helped me to highlight the navigation better, and offers a much more interactive look in my opinion.
__________________

Achieving Superior Aesthetic Conditioning
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 02:08.

Layout Options | Width: Wide Color: