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
FAQ Community Calendar Today's Posts Search

Reply
Page 2 of 3 1 2 3
 
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, 10: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
  #12  
Old 05-10-2010, 11:15 PM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Well, I'm not using this mod, but you can try like this:

Where it asks for "Tab Label", enter the path of the image you want to use along with the actual label for the tab. e.g.

Code:
<img src="path_of_image"> Label
Reply With Quote
  #13  
Old 05-11-2010, 12:16 AM
chriske chriske is offline
 
Join Date: Oct 2008
Posts: 167
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thanks for the fast reply!

I gave it a try and it actually works! Only the positioning is not correct. (see attachment) Any suggestion how to fix this?
Attached Images
File Type: jpg testingicons.jpg (17.5 KB, 0 views)
Reply With Quote
  #14  
Old 05-11-2010, 12:29 AM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Try changing the image code to something like this:

Code:
 <img src="path_of_image" border="0" align="top" /> Label
Hope it works for you.
Reply With Quote
  #15  
Old 05-11-2010, 02:48 AM
chriske chriske is offline
 
Join Date: Oct 2008
Posts: 167
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Only the image gets displayed, tekst is gone..

Thanks for your help anyhow.
Reply With Quote
  #16  
Old 08-05-2010, 11:35 PM
CFodder CFodder is offline
 
Join Date: Mar 2008
Posts: 92
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Followed instructions (using VB 4.03) but only seems to show icons when the button is selected and am unsure how to make them persistent. Any ideas?
Reply With Quote
  #17  
Old 08-05-2010, 11:48 PM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
That would most likely mean that you did not replace the code for the condition when the tab is not selected. Try to check all the codes again. I have also detailed the procedure on this thread.
Reply With Quote
  #18  
Old 08-06-2010, 12:23 AM
CFodder CFodder is offline
 
Join Date: Mar 2008
Posts: 92
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Well I've checked and double checked, am pretty sure I've done it all as you've described. Here's my code for the Home Tab:

Quote:
<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'">
<li class="selected">
<vb:if condition="$vboptions['vbcms_url']">
<a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="/images/navbar/Home.png" Height="24" Width="24" border="0" align="top" title="Home" alt="Home" /> {vb:rawphrase site}</a>
<vb:else />
<li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="/images/navbar/Home.png" Height="24" Width="24" border="0" align="top" title="Home" alt="Home" /> {vb:rawphrase site}</a></li>
</vb:if>
Reply With Quote
  #19  
Old 08-06-2010, 12:38 AM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
This is what I was using before 4.0.4:

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="http://forums.pakfellows.com/images/icons/Homepage/home.png" border="0" align="top" /> {vb:rawphrase site}</a>
    <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><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img  src="http://forums.pakfellows.com/images/icons/Homepage/home.png" border="0" align="top" /> {vb:rawphrase site}</a></li>
</vb:if>
I think the 3rd line in your code is redundant (it is not part of the code I suggested), the one in red given below:

Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'">
<li class="selected">
 	<vb:if condition="$vboptions['vbcms_url']">
		<a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw  session.sessionurl_q}"><img src="/images/navbar/Home.png"  Height="24" Width="24" border="0" align="top" title="Home" alt="Home"  /> {vb:rawphrase site}</a>
	<vb:else />
		<li><a class="navtab" href="{vb:raw  vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img  src="/images/navbar/Home.png" Height="24" Width="24" border="0"  align="top" title="Home" alt="Home" /> {vb:rawphrase  site}</a></li>
	</vb:if>
Reply With Quote
  #20  
Old 08-06-2010, 12:53 AM
CFodder CFodder is offline
 
Join Date: Mar 2008
Posts: 92
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Oh dear, oh dear. I tried commenting out the third line and got a "adding child to non-existent node" error when trying to save it.

So I thought I'd just try all the code you gave me, pasted it in, changed for my icons of course, and got the same error .
Reply With Quote
  #21  
Old 08-06-2010, 01:05 AM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hmmm. I think your template may have got messed up.

Try reverting to the original template, and then make the changes suggested in the article from scratch.

To revert: Select the template "vbcms_navbar_link" (do not double click) and on the right side of the list of templates, you shall find a "Revert" button. Revert to the default template. Now make the changes as outlined in the article.

Hope that helps.
Reply With Quote
Reply
Page 2 of 3 1 2 3

« 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 10:25 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.04771 seconds
  • Memory Usage 2,361KB
  • 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_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
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (1)postbit_attachment
  • (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
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • 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
  • postbit_attachment
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete