The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
[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> 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> |
#12
|
||||
|
||||
![]()
Well, I'm not using this mod, but you can try like this:
Where it asks for "Tab Label", enter the path of the image you want to use along with the actual label for the tab. e.g. Code:
<img src="path_of_image"> Label |
#13
|
|||
|
|||
![]()
Thanks for the fast reply!
I gave it a try and it actually works! Only the positioning is not correct. (see attachment) Any suggestion how to fix this? |
#14
|
||||
|
||||
![]()
Try changing the image code to something like this:
Code:
<img src="path_of_image" border="0" align="top" /> Label ![]() |
#15
|
|||
|
|||
![]()
Only the image gets displayed, tekst is gone..
Thanks for your help anyhow. |
#16
|
|||
|
|||
![]()
Followed instructions (using VB 4.03) but only seems to show icons when the button is selected and am unsure how to make them persistent. Any ideas?
|
#17
|
||||
|
||||
![]()
That would most likely mean that you did not replace the code for the condition when the tab is not selected. Try to check all the codes again. I have also detailed the procedure on this thread.
|
#18
|
|||
|
|||
![]()
Well I've checked and double checked, am pretty sure I've done it all as you've described. Here's my code for the Home Tab:
Quote:
|
#19
|
||||
|
||||
![]()
This is what I was using before 4.0.4:
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="http://forums.pakfellows.com/images/icons/Homepage/home.png" border="0" align="top" /> {vb:rawphrase site}</a> <ul class="floatcontainer"> {vb:raw template_hook.vbcms_navbar_start} <vb:if condition="$links"> <vb:each from="links" value="link"> <li><a href="{vb:raw link.url}">{vb:raw link.title}</a></li> </vb:each> <vb:else /> <li class="hidden"> </li> </vb:if> {vb:raw template_hook.vbcms_navbar_end} </ul> </li> <vb:else /> <li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="http://forums.pakfellows.com/images/icons/Homepage/home.png" border="0" align="top" /> {vb:rawphrase site}</a></li> </vb:if> Code:
<vb:if condition="$vboptions['selectednavtab'] == 'vbcms'"> <li class="selected"> <vb:if condition="$vboptions['vbcms_url']"> <a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="/images/navbar/Home.png" Height="24" Width="24" border="0" align="top" title="Home" alt="Home" /> {vb:rawphrase site}</a> <vb:else /> <li><a class="navtab" href="{vb:raw vboptions.site_tab_url}{vb:raw session.sessionurl_q}"><img src="/images/navbar/Home.png" Height="24" Width="24" border="0" align="top" title="Home" alt="Home" /> {vb:rawphrase site}</a></li> </vb:if> |
#20
|
|||
|
|||
![]()
Oh dear, oh dear. I tried commenting out the third line and got a "adding child to non-existent node" error when trying to save it.
So I thought I'd just try all the code you gave me, pasted it in, changed for my icons of course, and got the same error ![]() |
#21
|
||||
|
||||
![]()
Hmmm. I think your template may have got messed up.
Try reverting to the original template, and then make the changes suggested in the article from scratch. To revert: Select the template "vbcms_navbar_link" (do not double click) and on the right side of the list of templates, you shall find a "Revert" button. Revert to the default template. Now make the changes as outlined in the article. Hope that helps. ![]() |
![]() |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
![]() |
|
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|