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 |
#62
|
||||
|
||||
You may show your thanks by clicking "Mark as Installed", Mikevet1984.
|
#63
|
||||
|
||||
Of course, done!
Forgive me for the delay! One more request please.... How can we find he navbar template of the buttons if a user adds more tabs than the default ones? I use this modification https://vborg.vbsupport.ru/showthread.php?t=228507 to add more tabs in my forum. How can I find the template needed to to alter the script for new icons to be added? You may change the instructions of you like just like the ones in post number 49 as this was the way that helped me understand what I have to alter in the templates for the icons to appear! |
#64
|
|||
|
|||
Would be wonderful if I could get this to work with:
https://vborg.vbsupport.ru/showthread.php?t=237931 |
#65
|
||||
|
||||
Quote:
I use vBH-Add new tabs as well and adding an icon to its tabs is actually easier than the template modifications outlined above. In your Admin Control Panel, go to Settings > Options > vBH New Tabs Options. This is the code that I am using for my added tab. Code:
<img src="path_of_image" border="0" align="top" /> Text for Tab|URL for Tab=>blank |
#66
|
||||
|
||||
Quote:
|
#67
|
||||
|
||||
Thank you one more time abdulbasitsaeed for sharing your tricks with us....
I was wondering if the same thing can be done with the links under the Navbar. |
#68
|
||||
|
||||
I'm afraid that is out of the scope of this article.
The tabs all have unique names coded as phrases. However, links in the navbar are not unique per se. One can change the name of any link to anything else. |
#69
|
|||
|
|||
I'll be switching host soon. I'll give you access once I move host (allowing you to do what ever you want on the old host).
|
#70
|
||||
|
||||
Hello,
I added this modification for user notes https://vborg.vbsupport.ru/showthread.php?t=247552 and one more tab appeared in the navbar! Could sb please inform me which is the Navbar template of this mod to add an icon to this mod tab? |
#71
|
||||
|
||||
Quote:
Here, under Product : IB myNotes, click Navbar Button. Edit the last line of the code as follows: Code:
<a href="forum.php?do=shownotes&product=notes" class="navtab"><img src="path_of_image" border="0" align="top" alt="" />My Notes</a></li>'; |
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|