Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
Reload this Page [HOW TO - vB4] Add Icons to the Navigation Bar Tabs
Register FAQ Community Calendar Today's Posts Search

Reply
Page 1 of 3 1 23
 
Thread Tools
[HOW TO - vB4] Add Icons to the Navigation Bar Tabs
abdulbasitsaeed's Avatar
abdulbasitsaeed
Join Date: Mar 2009
Posts: 182

 

Show Printable Version Email this Page Subscription
abdulbasitsaeed abdulbasitsaeed is offline 04-02-2010, 09:00 PM
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.
------------------------------

"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>
Replace this with:

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>
Now find:

Code:
<vb:else />
    <li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a></li>
Replace with:

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>
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:

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>
Replace this with:

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>
Now find:

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>
Replace with:

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>
Finally find:

Code:
<vb:else />
            <li><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}">{vb:rawphrase forum}</a></li>
Replace with:

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>
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:

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>
Replace this with:

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>
Now find:

Code:
<vb:else />
    <li><a class="navtab" href="blog.php{vb:raw session.sessionurl_q}">{vb:rawphrase blogs}</a></li>
Replace with:

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>
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:

Code:
<vb:if condition="$show['member']">
            <li  class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a>
Replace this with:

Code:
<vb:if condition="$show['member']">
            <li  class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a>
Now find:

Code:
<vb:else />
            <li  class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a>
Replace with:

Code:
<vb:else />
            <li  class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a>
Find:

Code:
<vb:elseif condition="$show['member']" />
            <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li>
Replace with:

Code:
<vb:elseif condition="$show['member']" />
            <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&amp;contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a></li>
Finally find:

Code:
<vb:else />
            <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li>
Replace with:

Code:
<vb:else />
            <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&amp;contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a></li>
Remember to press "Save" after making these changes to the template.
Reply With Quote
  #2  
Old 04-03-2010, 11:07 PM
borbole's Avatar
borbole borbole is offline
 
Join Date: Jan 2010
Posts: 2,559
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Nice tip, however the img tag misses the required alt attribute

This code:

HTML Code:
<img src="path_of_image" border="0" align="top" />

Should be:

HTML Code:
<img src="path_of_image" border="0" align="top" alt="" />
Reply With Quote
  #3  
Old 04-04-2010, 02:23 AM
NashChristian's Avatar
NashChristian NashChristian is offline
 
Join Date: Jul 2007
Location: Nashville, TN
Posts: 292
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hello,

Are you sharing the images too, or just the code? Thanks for taking the time to document this!
Reply With Quote
  #4  
Old 04-04-2010, 03:05 AM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by borbole View Post
Nice tip, however the img tag misses the required alt attribute

This code:

HTML Code:
<img src="path_of_image" border="0" align="top" />
Should be:

HTML Code:
<img src="path_of_image" border="0" align="top" alt="" />
Thank you very much, borbole. I've added the alt tag to the replacement codes.

--------------- Added [DATE]1270357680[/DATE] at [TIME]1270357680[/TIME] ---------------

Quote:
Originally Posted by NashChristian View Post
Hello,

Are you sharing the images too, or just the code? Thanks for taking the time to document this!
You're welcome.

I didn't add the images, thinking that everyone has his own liking and preference. There are plenty of sites where you can download free icons / images. Just google around a bit.

If you're interested in the ones that I have, you can PM me.
Reply With Quote
  #5  
Old 05-01-2010, 07:52 PM
Uskana Uskana is offline
 
Join Date: Dec 2009
Posts: 9
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hi
on <img src="path_of_image" border="0" align="top" alt="" /> , where should i put the name of a image ? between alt=" here ", or src="menues/image.jpg."?
Wich format should it be? JPG GIF or ???
Reply With Quote
  #6  
Old 05-01-2010, 10:26 PM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
The name and extension of the image should replace path_of_image in the above code. e.g.

Code:
img src="http://forum.com/image.jpg" border........
The format should be the same as that of the image itself, which can be either bmp, jpg, gif, png etc.
Reply With Quote
  #7  
Old 05-02-2010, 05:56 AM
Uskana Uskana is offline
 
Join Date: Dec 2009
Posts: 9
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by abdulbasitsaeed View Post
The name and extension of the image should replace path_of_image in the above code. e.g.

Code:
img src="http://forum.com/image.jpg" border........
The format should be the same as that of the image itself, which can be either bmp, jpg, gif, png etc.

It works. Thank you.
Reply With Quote
  #8  
Old 05-02-2010, 07:01 AM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
You're welcome.
Reply With Quote
  #9  
Old 05-04-2010, 01:17 AM
as7apcool as7apcool is offline
 
Join Date: Feb 2009
Posts: 194
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
thanks 4 good & nice work
Reply With Quote
  #10  
Old 05-10-2010, 10:08 PM
chriske chriske is offline
 
Join Date: Oct 2008
Posts: 167
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
How can i use it with this mod: https://vborg.vbsupport.ru/showthread.php?t=233629 ?
Reply With Quote
Reply
Page 1 of 3 1 23

« Previous Thread | Next Thread »

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
Forum Jump


All times are GMT. The time now is 04:24 PM.

Contact Us - Archive - Privacy Policy - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.07242 seconds
  • Memory Usage 4,814KB
  • Queries Executed 24 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (24)bbcode_code
  • (4)bbcode_html
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (10)post_thanks_box
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • postbit_factory
  • postbit_display_start
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete