|
Add Icons to the Navigation Bar Tabs
1 Attachment(s)
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: Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'">Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'">Code:
<vb:else />Code:
<vb:else />------------------------------ "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: Code:
<vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT != 'search'">Code:
<vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT != 'search'">Code:
<vb:elseif condition="$vboptions['selectednavtab']=='usercp'" />Code:
<vb:elseif condition="$vboptions['selectednavtab']=='usercp'" />Code:
<vb:else />Code:
<vb:else />------------------------------ "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: Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbblog'">Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbblog'">Code:
<vb:else />Code:
<vb:else />------------------------------ "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: Code:
<vb:if condition="$show['member']">Code:
<vb:if condition="$show['member']">Code:
<vb:else />Code:
<vb:else />Code:
<vb:elseif condition="$show['member']" />Code:
<vb:elseif condition="$show['member']" />Code:
<vb:else />Code:
<vb:else /> |
tagged and thanks
|
You're welcome, sulasno. :)
|
Tagged too.
I have this installed: Tabs Add System for vBulletin 4 > https://vborg.vbsupport.ru/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? |
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. Code:
<img src="path_of_image" border="0" align="top" alt="" />Make sure to insert the path of the image you want to show. It works for me. :) |
tag 1st.. thanks
|
How do I add this to my Arcade tab?
|
Quote:
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. :) |
Quote:
I put in the code then after the code the name of the Tab. |
Great! *thumbsup*
Hope you wouldn't mind marking it as installed too. :) |
| All times are GMT. The time now is 10:02 PM. |
Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
| X vBulletin 3.8.12 by vBS Debug Information | |
|---|---|
|
|
 More Information |
|
|
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|