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.
  #46  
Old 24 Jan 2011, 19:04
horussjr horussjr is offline
 
Join Date: Feb 2010
Real name: A Robert
update to 4.1.1?
Reply With Quote
  #47  
Old 25 Jan 2011, 04:26
OldSchoolDSL OldSchoolDSL is offline
 
Join Date: Oct 2010
Real name: Adam H.
Originally Posted by horussjr View Post
update to 4.1.1?
I 2nd the question

Please & thank you
Reply With Quote
  #48  
Old 25 Jan 2011, 23:45
OldSchoolDSL OldSchoolDSL is offline
 
Join Date: Oct 2010
Real name: Adam H.
Installed (kind of)

4.1.1

I have all the icons listed showing, except the HOME icon only shows on the CMS page & no where else.

Will attempt to learn how to apply this on a few other tabs I have.
Reply With Quote
  #49  
Old 26 Jan 2011, 02:13
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Ok, I'll be honest with you guys. I have not upgraded to 4.1.1 (still at 4.0.6), so can't really test this anymore but I'll try to guide you guys a bit in the hope that you'll be able to manage the rest.

"Home" Tab:

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

In this template, look for the text {vb:rawphrase site} and insert the code given below BEFORE this text, wherever and as many times as you find it.


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:

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

In this template, look for the text {vb:rawphrase forum} and insert the code given below BEFORE this text, wherever and as many times as you find it.


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:

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

In this template, look for the text {vb:rawphrase blogs} and insert the code given below BEFORE this text, wherever and as many times as you find it.


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:

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

In this template, look for the text {vb:rawphrase getnew_tab} and insert the code given below BEFORE this text, wherever and as many times as you find it.


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

Remember to press "Save" after making these changes to the template.
------------------------------
Reply With Quote
  #50  
Old 26 Jan 2011, 05:21
OldSchoolDSL OldSchoolDSL is offline
 
Join Date: Oct 2010
Real name: Adam H.
Confirmed.

Was basically what I did on mine. Was going to report the fix, but you got to it before me. lol

Installed & working

4.1.1
Reply With Quote
  #51  
Old 26 Jan 2011, 05:40
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Thank you for confirming, OldSchoolDSL. Glad that it works.
Reply With Quote
  #52  
Old 26 Jan 2011, 10:09
New Joe's Avatar
New Joe New Joe is offline
 
Join Date: May 2009
Working fine as well.

I still have this problem.
I have Picture and Album Gallery for vB4 http://www.vbulletin.org/forum/showt...ighlight=Album installed
I want to add a picture to the Tab but I don't know how to.

I also have this installed: http://www.vbulletin.org/forum/showt...ht=double+tabs

I tried to add this:
<img src="path_of_image" border="0" align="top" alt="" /> Live Posts
to the Tab Label, but all that does is show the picture without the 'Live Posts' text, it actually takes away the text of 'Live Posts' when you click save after editing the Tab in the Mod.

Any help would be great, thanks.
Reply With Quote
  #53  
Old 28 Jan 2011, 07:54
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Well, I don't have either of the above mods installed. But if you could give me access to an admin account, perhaps I could have a look and see what can be done.
Reply With Quote
  #54  
Old 05 Feb 2011, 01:05
mudmanc4 mudmanc4 is offline
 
Join Date: Feb 2010
Originally Posted by New Joe View Post
Working fine as well.

I still have this problem.
I have Picture and Album Gallery for vB4 http://www.vbulletin.org/forum/showt...ighlight=Album installed
I want to add a picture to the Tab but I don't know how to.

I also have this installed: http://www.vbulletin.org/forum/showt...ht=double+tabs

I tried to add this: to the Tab Label, but all that does is show the picture without the 'Live Posts' text, it actually takes away the text of 'Live Posts' when you click save after editing the Tab in the Mod.

Any help would be great, thanks.
Sounds as if you are deleting the code after the image code ( code in red ) , when you should be inserting the code in red.
Reply With Quote
  #55  
Old 08 Feb 2011, 15:46
fxwoody's Avatar
fxwoody fxwoody is offline
 
Join Date: Jun 2010
Ok, little adjustments here for those who are stuck with the icons on different tabs then HOME-BLOG etc etc
I have the tabs vbSoporte, Experience and V3Arcade in the navbar.
In order to get the icons to show in those, the easiest way is t o paste the code with in the Navbar link options from the MOD!

Example:
v3Arcade General Settings/Arcade Name
I pasted my code like this where you write the name of the tab


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

Same thing in vbSoporte, code always after the title or else it will cut the text because of the maximum width of the tab.
I also pasted every code in the templates after the " {vb:rawphrase forum}" or other templates you add your icons! This way it will look more uniform and aligned.

Hope it help out a bit
Attached Images
File Type: jpg cover.jpg (34.1 KB, 30 views)
Reply With Quote
  #56  
Old 08 Feb 2011, 19:10
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Yup, that's absolutely right, fxwoody. I didn't suggest it on the thread because it may or may not work, depending on the mod.

I am using the same method with this mod as well. http://www.vbulletin.org/forum/showthread.php?t=228507
Reply With Quote
  #57  
Old 09 Feb 2011, 02:34
fxwoody's Avatar
fxwoody fxwoody is offline
 
Join Date: Jun 2010
Played around a lot to figure out why it wasn't working well but...lol with patience
Reply With Quote
  #58  
Old 09 Feb 2011, 14:01
Merenguista's Avatar
Merenguista Merenguista is offline
 
Join Date: Sep 2010
شكرا عبد الباسط .. سيتم تجربة الأمر لاحقا .. تحياتي
Reply With Quote
  #59  
Old 09 Feb 2011, 18:46
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
اهلا وسهلا بكم
Reply With Quote
  #60  
Old 01 Mar 2011, 16:26
Mikevet1984's Avatar
Mikevet1984 Mikevet1984 is offline
 
Join Date: Nov 2010
The Home Nav bar button icon added successfully and works great!

I just followed the instructions of post 49.

Thank you, abdulbasitsaeed...
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 12:34.

Layout Options | Width: Wide Color: