The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Add Icons to the Navigation Bar Tabs Details »» | |||||||||||||||||||||||||||
Add Icons to the Navigation Bar Tabs
Developer Last Online: Oct 2022
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> 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> Code:
<vb:else /> <li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}">{vb:rawphrase site}</a></li> 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> ------------------------------ "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> 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> 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> 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> Code:
<vb:else /> <li><a class="navtab" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}">{vb:rawphrase forum}</a></li> 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> ------------------------------ "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> 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> Code:
<vb:else /> <li><a class="navtab" href="blog.php{vb:raw session.sessionurl_q}">{vb:rawphrase blogs}</a></li> 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> ------------------------------ "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&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a> Code:
<vb:if condition="$show['member']"> <li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a> Code:
<vb:else /> <li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a> Code:
<vb:else /> <li class="selected"><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a> Code:
<vb:elseif condition="$show['member']" /> <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li> Code:
<vb:elseif condition="$show['member']" /> <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getnew&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a></li> Code:
<vb:else /> <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2">{vb:rawphrase getnew_tab}</a></li> Code:
<vb:else /> <li><a class="navtab" href="search.php?{vb:raw session.sessionurl}do=getdaily&contenttype=vBForum_Post" accesskey="2"><img src="path_of_image" border="0" align="top" alt="" /> {vb:rawphrase getnew_tab}</a></li> Show Your Support
|
2 благодарности(ей) от: | ||
elsa23 |
Comments |
#32
|
|||
|
|||
I cannot find it either... I think it is because I am using VB Forum v4.0.4 without the CMS so the code and template names are different.
Maybe the author could check this. |
#33
|
||||
|
||||
I haven't upgraded to 4.0.4 yet but plan to do so soon. Once I do, I'll have a look at this again and see what needs to be changed.
|
#34
|
||||
|
||||
My friend, if you don't have CMS, then you wouldn't have a "Home Tab" either. Hence, you don't need to make any changes listed under "Home Tab". That's the only place where you need to make changes to vbcms_navbar_link.
|
#35
|
|||
|
|||
Thank you very much!
|
#36
|
|||
|
|||
This mod is great. Simple to apply to my other custom navbar items, etc.
One of the things I try to remain concious of is the 'look and feel' for my private user base. About 80% of my members are Internet Explorer users. Of those, 47% use IE8, the rest are running IE6 or IE7. So in general, I try to ensure that at least the major elements of the site look reasonable for IE7, while attempting to push my customers to IE8, Chrome, or Firefox. I've noticed that when I add icons to the navbar elements, the align='top' results in the actual navbar text being aligned to the top rather than centered properly (in IE7 or IE8 compatability mode). Has anyone come up with a method to eliminate this issue for that browser version without impacting the rest? Bob |
#37
|
|||
|
|||
please make this as a product, you can simply use find and replace or add before or add after.
this would be worth a better product then, but sorry i dont know the code for all this customisation, and hope you can do it |
#38
|
|||
|
|||
what is the size of the image that you use ?
|
#39
|
||||
|
||||
24px x 24px
|
#40
|
|||
|
|||
where can I get those Icons ?
|
#41
|
||||
|
||||
Love this thread, unfortunately, Home Tab Icon won't show when your viewing the site under a different navtab.
|
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|