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 5 of 11 « First 34 5 67 Last »
 
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
  #42  
Old 10-06-2010, 06:31 PM
BioWaffen BioWaffen is offline
 
Join Date: Sep 2006
Location: Stuttgart
Posts: 51
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I have a question:
Is it possible that I can see all 4 Images, no matter in which of those 4 tabs I am?
Because if I use the CMS for example, I can only see the home button (and not the other ones)
when I use the Forum, I can only see the forum button (and not the other ones)
I guess it needs more templates to edit, but which ones?

With best regards
BioWaffen
Reply With Quote
  #43  
Old 10-13-2010, 05:18 PM
thanasis1 thanasis1 is offline
 
Join Date: Aug 2008
Posts: 22
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
where can we find well desinged icons??
Reply With Quote
  #44  
Old 10-15-2010, 11:26 PM
risky91 risky91 is offline
 
Join Date: Apr 2010
Posts: 3
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Anyone have a tip on how to apply this to the tabs created by Sstab mod by vBSoporte?
Reply With Quote
  #45  
Old 12-25-2010, 06:12 PM
motorola motorola is offline
 
Join Date: May 2009
Location: Romania
Posts: 125
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Its this good for vb4.1.0 PL2?
Reply With Quote
  #46  
Old 12-27-2010, 08:48 PM
OldSchoolDSL OldSchoolDSL is offline
 
Join Date: Oct 2010
Posts: 1,196
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by motorola View Post
Its this good for vb4.1.0 PL2?
I'm going to guess, no. I could not find the complete code needed in 4.1 PL2

An example is my vbcms_navbar_link seems different.

PHP Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'">
<li class="selected">
    <vb:if condition="$vboptions['vbcms_url']">
        <a class="navtab" href="{vb:raw vboptions.vbcms_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a>
    <vb:else />
        <a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a>
    </vb:if>
    <ul class="floatcontainer">
        {vb:raw template_hook.vbcms_navbar_start}
        <vb:if condition="$links">
            <vb:each from="links" value="link">
                <li><a href="{vb:raw link.url}">{vb:raw link.title}</a></li>
            </vb:each>
        <vb:else />
            <li class="hidden">&nbsp;</li>
        </vb:if>
        {vb:raw template_hook.vbcms_navbar_end}
    </ul>
</li>
<vb:else />
    <li>
    <vb:if condition="$vboptions['vbcms_url']">
        <a class="navtab" href="{vb:raw vboptions.vbcms_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a>
    <vb:else />
        <a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a>
    </vb:if>
    </li>
</vb:if> 
Reply With Quote
  #47  
Old 01-24-2011, 05:04 PM
horussjr horussjr is offline
 
Join Date: Feb 2010
Location: Romania
Posts: 138
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
update to 4.1.1?
Reply With Quote
  #48  
Old 01-25-2011, 02:26 AM
OldSchoolDSL OldSchoolDSL is offline
 
Join Date: Oct 2010
Posts: 1,196
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by horussjr View Post
update to 4.1.1?
I 2nd the question

Please & thank you
Reply With Quote
  #49  
Old 01-25-2011, 09:45 PM
OldSchoolDSL OldSchoolDSL is offline
 
Join Date: Oct 2010
Posts: 1,196
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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
  #50  
Old 01-26-2011, 12:13 AM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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.

Code:
<img src="path_of_image" border="0" align="top" alt="" />
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.

Code:
<img src="path_of_image" border="0" align="top" alt="" />
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.

Code:
<img src="path_of_image" border="0" align="top" alt="" />
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.

Code:
<img src="path_of_image" border="0" align="top" alt="" />
Remember to press "Save" after making these changes to the template.
------------------------------
Reply With Quote
  #51  
Old 01-26-2011, 03:21 AM
OldSchoolDSL OldSchoolDSL is offline
 
Join Date: Oct 2010
Posts: 1,196
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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
Reply
Page 5 of 11 « First 34 5 67 Last »

« 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:30 AM.

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.05401 seconds
  • Memory Usage 2,382KB
  • Queries Executed 26 (?)
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
  • (26)bbcode_code
  • (1)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
  • (4)pagenav_pagelink
  • (11)post_thanks_box
  • (1)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)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_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