[HOW TO - vB4] Add Icons to the Navigation Bar Tabs - Page 3

		vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
[HOW TO - vB4] Add Icons to the Navigation Bar Tabs

Page 3 of 3

Thread Tools

[HOW TO - vB4] Add Icons to the Navigation Bar Tabs

abdulbasitsaeed

Join Date: Mar 2009

Posts: 182

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.

#22

08-06-2010, 01:45 AM

CFodder

Join Date: Mar 2008

Posts: 92

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

yep, have reverted the template several times lol, still no luck tho

#23

10-26-2010, 09:36 AM

XiTCLUB

Join Date: Jan 2010

Location: Lahore, Pakistan

Posts: 304

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

After adding icons i got this issue
when user not logged in please check the image

and after logged in everything fine but 1 little error

Please Fix it

#24

10-26-2010, 11:20 AM

abdulbasitsaeed abdulbasitsaeed is offline

Join Date: Mar 2009

Posts: 182

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

That is a problem with the custom theme that you are using, not with the actual code provided.

#25

10-31-2010, 07:37 PM

Alec W

Join Date: Dec 2009

Posts: 15

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Thanks for the article.

Another little tip is to add style to vertically align the image.

<img style="vertical-align: middle;" src="../forum/images/site_icons/forum.png" border="0" align="top" alt="" />

#26

11-28-2010, 12:00 AM

kootta

Join Date: May 2009

Posts: 19

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

thank u it works perfect with me
check it
http://www.al3abfree.com/vb

Page 3 of 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 Rules

Forum Jump

All times are GMT. The time now is 10:04 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06483 seconds Memory Usage 2,287KB Queries Executed 21 (?)
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)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 (6)post_thanks_box (6)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (6)post_thanks_postbit_info (5)postbit (6)postbit_onlinestatus (6)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 pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!