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 Members List Calendar Search Today's Posts Mark Forums Read

Reply
Page 6 of 11 « First 45 6 78 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
  #52  
Old 01-26-2011, 03:40 AM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thank you for confirming, OldSchoolDSL. Glad that it works.
Reply With Quote
  #53  
Old 01-26-2011, 08:09 AM
New Joe's Avatar
New Joe New Joe is offline
 
Join Date: May 2009
Posts: 1,128
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Working fine as well.

I still have this problem.
I have Picture and Album Gallery for vB4 https://vborg.vbsupport.ru/showthrea...ighlight=Album installed
I want to add a picture to the Tab but I don't know how to.

I also have this installed: https://vborg.vbsupport.ru/showthrea...ht=double+tabs

I tried to add this:
Quote:
<img src="path_of_image" border="0" align="top" alt="" /> Live Posts
to the Tab Label, but all that does is show the picture without the 'Live Posts' text, it actually takes away the text of 'Live Posts' when you click save after editing the Tab in the Mod.

Any help would be great, thanks.
Reply With Quote
  #54  
Old 01-28-2011, 05:54 AM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Well, I don't have either of the above mods installed. But if you could give me access to an admin account, perhaps I could have a look and see what can be done.
Reply With Quote
  #55  
Old 02-04-2011, 11:05 PM
mudmanc4 mudmanc4 is offline
 
Join Date: Feb 2010
Posts: 10
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by New Joe View Post
Working fine as well.

I still have this problem.
I have Picture and Album Gallery for vB4 https://vborg.vbsupport.ru/showthrea...ighlight=Album installed
I want to add a picture to the Tab but I don't know how to.

I also have this installed: https://vborg.vbsupport.ru/showthrea...ht=double+tabs

I tried to add this: to the Tab Label, but all that does is show the picture without the 'Live Posts' text, it actually takes away the text of 'Live Posts' when you click save after editing the Tab in the Mod.

Any help would be great, thanks.
Sounds as if you are deleting the code after the image code ( code in red ) , when you should be inserting the code in red.
Reply With Quote
  #56  
Old 02-08-2011, 01:46 PM
fxwoody's Avatar
fxwoody fxwoody is offline
 
Join Date: Jun 2010
Location: On Earth
Posts: 291
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Ok, little adjustments here for those who are stuck with the icons on different tabs then HOME-BLOG etc etc
I have the tabs vbSoporte, Experience and V3Arcade in the navbar.
In order to get the icons to show in those, the easiest way is t o paste the code with in the Navbar link options from the MOD!

Example:
v3Arcade General Settings/Arcade Name
I pasted my code like this where you write the name of the tab

HTML Code:
The Game Room<img src="images/misc/iconforums/156.png" align="top" hight="36px" width="36px" alt=""/>
Same thing in vbSoporte, code always after the title or else it will cut the text because of the maximum width of the tab.
I also pasted every code in the templates after the " {vb:rawphrase forum}" or other templates you add your icons! This way it will look more uniform and aligned.

Hope it help out a bit
Attached Images
File Type: jpg cover.jpg (34.1 KB, 0 views)
Reply With Quote
  #57  
Old 02-08-2011, 05:10 PM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Yup, that's absolutely right, fxwoody. I didn't suggest it on the thread because it may or may not work, depending on the mod.

I am using the same method with this mod as well. https://vborg.vbsupport.ru/showthread.php?t=228507
Reply With Quote
  #58  
Old 02-09-2011, 12:34 AM
fxwoody's Avatar
fxwoody fxwoody is offline
 
Join Date: Jun 2010
Location: On Earth
Posts: 291
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Played around a lot to figure out why it wasn't working well but...lol with patience
Reply With Quote
  #59  
Old 02-09-2011, 12:01 PM
Merenguista's Avatar
Merenguista Merenguista is offline
 
Join Date: Sep 2010
Location: Morocco
Posts: 70
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
شكرا عبد الباسط .. سيتم تجربة الأمر لاحقا .. تحياتي
Reply With Quote
  #60  
Old 02-09-2011, 04:46 PM
abdulbasitsaeed's Avatar
abdulbasitsaeed abdulbasitsaeed is offline
 
Join Date: Mar 2009
Posts: 182
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
اهلا وسهلا بكم
Reply With Quote
  #61  
Old 03-01-2011, 02:26 PM
Mikevet1984's Avatar
Mikevet1984 Mikevet1984 is offline
 
Join Date: Nov 2010
Posts: 203
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
The Home Nav bar button icon added successfully and works great!

I just followed the instructions of post 49.

Thank you, abdulbasitsaeed...
Reply With Quote
Reply
Page 6 of 11 « First 45 6 78 Last »

« Previous Thread | Next Thread »
Thread Tools

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 01:59 AM.

Contact Us - Archive - 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.04390 seconds
  • Memory Usage 2,365KB
  • 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
  • (22)bbcode_code
  • (1)bbcode_html
  • (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
  • (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
  • 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
  • postbit_attachment
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete