Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications
Reload this Page Mini Mods - Add Icons to the Navigation Bar Tabs
FAQ Community Calendar Today's Posts Search

Reply
Page 10 of 11 « First 89 10 11
 
Thread Tools
Add Icons to the Navigation Bar Tabs Details »»
Add Icons to the Navigation Bar Tabs
MOD Information
The Developer
abdulbasitsaeed's Avatar
 
Version: 1.00, by abdulbasitsaeed abdulbasitsaeed is offline
Developer Last Online: Oct 2022 Show Printable Version Email this Page
Category: Mini Mods - Version: 4.1.2 Rating:
Released: 04-09-2010 Last Update: Never Installs: 70
Template Edits
Code Changes  
No support by the author.

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'">
<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.

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
2 благодарности(ей) от:
elsa23

Comments
  #92  
Old 05-31-2012, 04:15 PM
ged's Avatar
ged ged is offline
 
Join Date: Feb 2005
Location: Istanbul, Turkey
Posts: 207
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Does this work with vBulletin 4.2.x?
Reply With Quote
  #93  
Old 07-15-2012, 03:43 PM
fuldon fuldon is offline
 
Join Date: Jan 2004
Posts: 29
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Edit navbar_tabs
PHP Code:
<a class="navtab" href="{vb:raw tab.url}">{vb:raw tab.title}</a> 
Replace:
PHP Code:
<a class="navtab" href="{vb:raw tab.url}"><img src="images/buttons/{vb:raw tab.name}.png" width=24 height=24 border="0" align="top" alt="" /> {vb:raw tab.title}</a> 
Reply With Quote
  #94  
Old 08-14-2012, 04:28 AM
initiald initiald is offline
 
Join Date: Mar 2012
Posts: 98
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Can you update the instruction for Vbulletin 4.2?
Reply With Quote
  #95  
Old 11-11-2012, 08:03 PM
spillage spillage is offline
 
Join Date: Feb 2009
Location: S. Florida
Posts: 165
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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.
Reply With Quote
  #96  
Old 11-17-2012, 08:46 PM
spillage spillage is offline
 
Join Date: Feb 2009
Location: S. Florida
Posts: 165
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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.
Code:
<a class="navtab" href="{vb:raw tab.url}"><img src="images/misc/tabs/{vb:raw tab.title}.png" width=24 height=24 border="0" align="top" alt="" /> {vb:raw tab.title}</a>
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!
Reply With Quote
  #97  
Old 02-20-2013, 02:21 AM
danycutu1 danycutu1 is offline
 
Join Date: Feb 2010
Posts: 24
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
any instructions for 4.2?
Reply With Quote
  #98  
Old 03-12-2013, 07:24 PM
Derwin's Avatar
Derwin Derwin is offline
 
Join Date: Jan 2009
Posts: 30
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I would love to install this on 4.2.

Any plans on updating this?
Reply With Quote
  #99  
Old 04-09-2013, 06:39 PM
dog-tag's Avatar
dog-tag dog-tag is offline
 
Join Date: Jan 2012
Posts: 84
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
For guys using 4.2 PL3

Just follow these directions -
https://vborg.vbsupport.ru/showpost....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
Благодарность от:
abdulbasitsaeed
  #100  
Old 05-07-2013, 08:06 PM
Spangle Spangle is offline
 
Join Date: Jun 2011
Posts: 520
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by fuldon View Post
Edit navbar_tabs
PHP Code:
<a class="navtab" href="{vb:raw tab.url}">{vb:raw tab.title}</a> 
Replace:
PHP Code:
<a class="navtab" href="{vb:raw tab.url}"><img src="images/buttons/{vb:raw tab.name}.png" width=24 height=24 border="0" align="top" alt="" /> {vb:raw tab.title}</a> 

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
  #101  
Old 07-29-2013, 04:37 PM
stevieb stevieb is offline
 
Join Date: Apr 2005
Posts: 169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by fuldon View Post
Edit navbar_tabs
PHP Code:
<a class="navtab" href="{vb:raw tab.url}">{vb:raw tab.title}</a> 
Replace:
PHP Code:
<a class="navtab" href="{vb:raw tab.url}"><img src="images/buttons/{vb:raw tab.name}.png" width=24 height=24 border="0" align="top" alt="" /> {vb:raw tab.title}</a> 
Installed, really easy to do - thanks
Reply With Quote
Reply
Page 10 of 11 « First 89 10 11

« 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 06:38 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05856 seconds
  • Memory Usage 2,382KB
  • Queries Executed 28 (?)
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
  • (23)bbcode_code
  • (6)bbcode_php
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (2)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (2)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)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_postinfo_query
  • fetch_postinfo
  • 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
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • 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