Add Icons to the Navigation Bar Tabs
Mod Version: 1.00, by abdulbasitsaeed
| 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:
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.
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
Spoiler (click to open)
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.
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.
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.
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.
Remember to press "Save" after making these changes to the template.
------------------------------
"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.
Code:
<img src="path_of_image" border="0" align="top" alt="" />
------------------------------
"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.
Code:
<img src="path_of_image" border="0" align="top" alt="" />
------------------------------
"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.
Code:
<img src="path_of_image" border="0" align="top" alt="" />
------------------------------
"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.
Code:
<img src="path_of_image" border="0" align="top" alt="" />
------------------------------
Close
------------------------------
"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'">
<li class="selected">
<a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a>
Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'">
<li class="selected">
<a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase site}</a>
Code:
<vb:else />
<li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a></li>
Code:
<vb:else />
<li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase site}</a></li>
------------------------------
"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'">
<li class="selected"><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}">{vb:rawphrase forum}</a>
Code:
<vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT != 'search'">
<li class="selected"><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase forum}</a>
Code:
<vb:elseif condition="$vboptions['selectednavtab']=='usercp'" />
<li class="selected"><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}">{vb:rawphrase forum}</a>
Code:
<vb:elseif condition="$vboptions['selectednavtab']=='usercp'" />
<li class="selected"><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase forum}</a>
Code:
<vb:else />
<li><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}">{vb:rawphrase forum}</a></li>
Code:
<vb:else />
<li><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase forum}</a></li>
------------------------------
"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'">
<li class="selected">
<a class="navtab" href="blog.php{vb:raw session.sessionurl_q}">{vb:rawphrase blogs}</a>
Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbblog'">
<li class="selected">
<a class="navtab" href="blog.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase blogs}</a>
Code:
<vb:else />
<li><a class="navtab" href="blog.php{vb:raw session.sessionurl_q}">{vb:rawphrase blogs}</a></li>
Code:
<vb:else />
<li><a class="navtab" href="blog.php{vb:raw session.sessionurl_q}"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase blogs}</a></li>
------------------------------
"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']">
<li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a>
Code:
<vb:if condition="$show['member']">
<li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a>
Code:
<vb:else />
<li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a>
Code:
<vb:else />
<li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a>
Code:
<vb:elseif condition="$show['member']" />
<li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li>
Code:
<vb:elseif condition="$show['member']" />
<li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a></li>
Code:
<vb:else />
<li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li>
Code:
<vb:else />
<li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a></li>
Download
No files for download.