vb.org Archive
Page 1 of 3 1 23
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=242)
-   -   [HOW TO - vB4] Add Icons to the Navigation Bar Tabs (https://vborg.vbsupport.ru/showthread.php?t=239710)

abdulbasitsaeed 04-02-2010 10:00 PM
[HOW TO - vB4] Add Icons to the Navigation Bar Tabs
 
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.

borbole 04-04-2010 12:07 AM
Nice tip, however the img tag misses the required alt attribute :)

This code:

HTML Code:
<img src="path_of_image" border="0" align="top" />

Should be:

HTML Code:
<img src="path_of_image" border="0" align="top" alt="" />

NashChristian 04-04-2010 03:23 AM
Hello,

Are you sharing the images too, or just the code? Thanks for taking the time to document this! :)

abdulbasitsaeed 04-04-2010 04:05 AM
Quote:
Originally Posted by borbole (Post 2015382)
Nice tip, however the img tag misses the required alt attribute :)

This code:

HTML Code:
<img src="path_of_image" border="0" align="top" />
Should be:

HTML Code:
<img src="path_of_image" border="0" align="top" alt="" />
Thank you very much, borbole. I've added the alt tag to the replacement codes. :)

--------------- Added [DATE]1270357680[/DATE] at [TIME]1270357680[/TIME] ---------------

Quote:
Originally Posted by NashChristian (Post 2015434)
Hello,

Are you sharing the images too, or just the code? Thanks for taking the time to document this! :)
You're welcome. :)

I didn't add the images, thinking that everyone has his own liking and preference. There are plenty of sites where you can download free icons / images. Just google around a bit.

If you're interested in the ones that I have, you can PM me. :)

Uskana 05-01-2010 08:52 PM
Hi
on <img src="path_of_image" border="0" align="top" alt="" /> , where should i put the name of a image ? between alt=" here ", or src="menues/image.jpg."?
Wich format should it be? JPG GIF or ???

abdulbasitsaeed 05-01-2010 11:26 PM
The name and extension of the image should replace path_of_image in the above code. e.g.

Code:
img src="http://forum.com/image.jpg" border........
The format should be the same as that of the image itself, which can be either bmp, jpg, gif, png etc.

Uskana 05-02-2010 06:56 AM
Quote:
Originally Posted by abdulbasitsaeed (Post 2030373)
The name and extension of the image should replace path_of_image in the above code. e.g.

Code:
img src="http://forum.com/image.jpg" border........
The format should be the same as that of the image itself, which can be either bmp, jpg, gif, png etc.

It works. Thank you.

abdulbasitsaeed 05-02-2010 08:01 AM
You're welcome. :)

as7apcool 05-04-2010 02:17 AM
thanks 4 good & nice work

chriske 05-10-2010 11:08 PM
How can i use it with this mod: https://vborg.vbsupport.ru/showthread.php?t=233629 ?


All times are GMT. The time now is 03:40 PM.
Page 1 of 3 1 23
Show 40 post(s) from this thread on one page

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.01820 seconds
  • Memory Usage 1,796KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (24)bbcode_code_printable
  • (4)bbcode_html_printable
  • (3)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete