[Tutorial] VBNavBar for MyBB 1.6.x

[flick]

This code modification is a MyBB 1.6 compatible version of Condition and vbNavBar for 1.4.x.

The original modification - Conditional and vb navbar for 1.20 - was released by Lapsetur and the backend code and most of the templates edits *still* worked for MyBB 1.4.x. They still mostly work for MyBB 1.6.

All I did previously was to tidy up the template edits and ensure that the modification was up-to-date with MyBB 1.4.x.

With the release of MyBB 1.6, I have taken the opportunity to add icons as a default 'feature' (inspired by okitai) and do some odd fixes, which will hopefully help make the modification more useful for forums using international language packs.

This means that aside from 15 text strings (packed in a separate language file) the rest of the modification will use the text strings from your chosen language.

I have tried to make this version as error-free as possible, but welcome any bug reports or suggestions.

Full Credits and Acknowledgements and screenshots can be found at the end of this post. Special thanks to quacktacular !

Files that you need

• Std files for 1.6.x.zip
• functions.php
• class_templates.php
  

You can find all the files at the end of this post, but this is what you need to do with them:

1. Upload functions.php to /inc
2. Upload class_templates.php to /inc
3. (Extract the contents of the zip file to your local drive)*
4. Upload the 21 .png and .gif image files in /images to /images
5. Upload the 3 .js files in /jscripts to /jscripts
6. Upload vbnavbar.php to /inc/plugins
7. Upload vbnavbar.lang.php to /inc/languages/english
   

*You can extract the zip file directly to the root folder of your Forums if applicable, as the files should be packed in the correct folder structure for a standard MyBB installation.

The next step is to edit the template of your theme. I have used the default theme for my example, but hopefully it should work with other themes as well. Replace the contents of each template with the code below:

*If you are using the default theme, Koz has kindly provided a theme xml file for you to use instead! Get it here! [MyBB 1.6.3 only!]

Header Templates / header

Code:

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
<br />

<!-- breadcrumb, login, pm info -->
<table class="tborder" cellpadding="$theme[tablespace]" cellspacing="$theme[borderwidth]" border="0" width="100%" align="center">
<tr>
<td class="trow1" width="100%">

<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">

<td>&nbsp;</td>
<td width="100%"><navigation></td>
</tr>
</table>

</td>


<if condition=$mybb->user['uid']> 0 <then>

<td class="trow1" valign="top" nowrap="nowrap">
<div class="smalltext">{$lang->welcome_back}<br />
<a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}<br />
{$lang->welcome_current_time}
</div>
</td>

<else />

<td class="trow1" nowrap="nowrap" style="padding:0px">

<!-- login form -->

<form action="{$mybb->settings['bburl']}/member.php" method="post">
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="{$mybb->settings['bburl']}" />
<input type="hidden" name="quick_login" value="1" />
<table cellpadding="0" cellspacing="3" border="0" class="trow1">
<tr>
<td class="smalltext">{$lang->username}</td>
<td><input type="text" name="quick_username" size="8" title="{$lang->vbnavbar_username}" class="textbox" value="{$lang->vbnavbar_username}" onfocus="this.value=''" tabindex="1" /></td>
<td class="smalltext"><label title="{$lang->remember_me_desc}"><input type="checkbox" class="checkbox" name="quick_remember" value="yes" tabindex="3" checked="checked" />{$lang->remember_me}</label></td>
</tr>
<tr>
<td class="smalltext">{$lang->password}</td>
<td><input type="password" name="quick_password" size="8" title="{$lang->password}" value="{$lang->password}" class="textbox" onfocus="this.value=''" tabindex="2" /></td>
<td><input type="submit" class="button" name="submit" style="font-weight:normal" value="{$lang->welcome_login}" tabindex="4" /></td>
</tr>
</table>
</form>
<!-- / login form -->

</td>

</if>

</tr>
</table>
<!-- / breadcrumb, login, pm info -->

<table cellpadding="5" cellspacing="0" border="0" width="100%" class="tvbnav" align="center">
<tr>
<td class="tcat" align="center">{$welcomeblock}</td>
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_index.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/index.php"><strong>{$lang->vbnavbar_index}</strong></a></td>
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_search.png" alt="" title="" class="vbottom" /><a href="{$mybb->settings['bburl']}/search.php" id="search" onclick="return openMenu(this)" class="popup_button">{$lang->toplinks_search} <img src="{$theme['imgdir']}/vbnb_popdown.gif" border="0" /></a></td>
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_member.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/memberlist.php"><strong>{$lang->toplinks_memberlist}</strong></a></td>
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_calendar.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/calendar.php"><strong>{$lang->toplinks_calendar}</strong></a></td>
<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_help.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/misc.php?action=help"><strong>{$lang->toplinks_help}</strong></a></td>
{$admincplink}
{$modcplink}
<if condition=$mybb->user['uid']> 0 <then>
<td class="tcat" align="center"> <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"><strong>{$lang->welcome_logout}</strong></a></td><else /></if>
</tr></table>

<hr class="hidden" />
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
        {$pm_notice}
        {$bannedwarning}
        {$bbclosedwarning}
        {$unreadreports}
        {$pending_joinrequests}
<!-- header quick search form -->
<div class="menupop" id="search-popup">
<table cellpadding="4" cellspacing="1" border="0" class="tvbnavsearch">
<tr>
<td class="tcat">{$lang->toplinks_search}</td>
</tr>
<tr>
<td class="row">

<form method="post" action="{$mybb->settings['bburl']}/search.php">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="" />
{$gobutton}
</form>
</td>
</tr>
<tr>
<td class="menu_row"><a href="{$mybb->settings['bburl']}/search.php">{$lang->vbnavbar_advanced_search}</a></td>
</tr>
</table>
</div>

<!-- / header quick search form -->
<br />

Header Templates / header_welcomeblock_guest

Code:

<img src="{$theme['imgdir']}/vbnb_register.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/member.php?action=register"><strong>{$lang->welcome_register}</strong></a>

Header Templates / header_welcomeblock_member

Code:

<img src="{$theme['imgdir']}/vbnb_usercp.png" alt="" title="" class="vbottom" /><a href="{$mybb->settings['bburl']}/usercp.php" id="usercp" onclick="return openMenu(this)" class="popup_button">{$lang->vbnavbar_user_cp} <img src="{$theme['imgdir']}/vbnb_popdown.gif" border="0" /></a>

<!-- user cp tools menu -->
<div class="menupop" id="usercp-popup">
<table cellpadding="4" cellspacing="1" border="0" class="tvbnavcp">

<tr><td class="tcat"><strong>{$lang->vbnavbar_quick_links}</strong></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_newposts.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/search.php?action=getnew" title="{$lang->welcome_newposts}">{$lang->welcome_newposts}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_daily.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/search.php?action=getdaily" title="{$lang->welcome_todaysposts}">{$lang->welcome_todaysposts}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_all.png" alt="" title="" class="vbottom" /> <a href="misc.php?action=markread&my_post_key={$mybb->post_code}" title="{$lang->vbnavbar_mark_read}">{$lang->vbnavbar_mark_read}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_buddy.png" alt="" title="" class="vbottom" /> <a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);" title="{$lang->welcome_open_buddy_list}">{$lang->welcome_open_buddy_list}</a></td></tr>

<tr><td class="tcat"><a href="{$mybb->settings['bburl']}/usercp.php" title="{$lang->vbnavbar_user_cp_full}"><strong>{$lang->vbnavbar_user_cp_full}</strong></a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_sig.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/usercp.php?action=editsig" title="{$lang->vbnavbar_edit_sig}">{$lang->vbnavbar_edit_sig}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_avatar.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/usercp.php?action=avatar" title="{$lang->vbnavbar_change_avatar}">{$lang->vbnavbar_change_avatar}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/usercp/profile.gif" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/usercp.php?action=profile" title="{$lang->vbnavbar_edit_profile}">{$lang->vbnavbar_edit_profile}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/usercp/options.gif" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/usercp.php?action=options" title="{$lang->vbnavbar_edit_options}">{$lang->vbnavbar_edit_options}</a></td></tr>

<tr><td class="tcat"><strong>{$lang->vbnavbar_misc}</strong></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/vbnb_pm.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/private.php" title="{$lang->vbnavbar_view}">{$lang->welcome_pms}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/usercp/subscriptions.gif" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/usercp.php?action=subscriptions" title="{$lang->vbnavbar_view}{$lang->vbnavbar_sub_threads}">{$lang->vbnavbar_sub_threads}</a></td></tr>
<tr><td class="menu_row"><img src="{$theme['imgdir']}/usercp/viewprofile.gif" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/member.php?action=profile&amp;uid={$mybb->user['uid']}" title="{$lang->vbnavbar_view}{$lang->vbnavbar_profile}">{$lang->vbnavbar_view}{$lang->vbnavbar_profile}</a></td></tr>

</table>
</div>

Header Templates / header_welcomeblock_member_admin

Code:

<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_admincp.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php"><strong>{$lang->welcome_admin}</strong></a></td>

Header Templates / header_welcomeblock_member_moderator

Code:

<td class="tcat" align="center"><img src="{$theme['imgdir']}/vbnb_modcp.png" alt="" title="" class="vbottom" /> <a href="{$mybb->settings['bburl']}/modcp.php"><strong>{$lang->welcome_modcp}</strong></a></td>

Ungrouped Templates / headerinclude

Code:

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/vbnb_menu.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/vbnb_menu2.js"></script>
<!--[if lte IE 6]>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/vbnb_supersleight-min.js"></script>
<![endif]-->
{$stylesheets}
<script type="text/javascript">
<!--
    var cookieDomain = "{$mybb->settings['cookiedomain']}";
    var cookiePath = "{$mybb->settings['cookiepath']}";
    var cookiePrefix = "{$mybb->settings['cookieprefix']}";
    var deleteevent_confirm = "{$lang->deleteevent_confirm}";
    var removeattach_confirm = "{$lang->removeattach_confirm}";
    var loading_text = '{$lang->ajax_loading}';
    var saving_changes = '{$lang->saving_changes}';
    var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
    var my_post_key = "{$mybb->post_code}";
    var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}

Navigation Templates / nav

Code:

<div class="navigation">
<img class="vbottom" src="{$theme[imgdir]}/vbnb_navstart.gif" />{$nav}{$activesep}{$activebit}
</div>

Navigation Templates / nav_sep

Code:

»

Navigation Templates / nav_sep_active

Code:

<br /><img class="vbottom" src="{$theme[imgdir]}/vbnb_navend.gif" />

The next step is to create a new .css file to add to your theme.

Quote:Click on Themes->Name of your theme, e.g. Default->Add Stylesheet

Filename: vbnavbar.css
Attached to: Globally and Write my own content

vbnavbar.css

Code:

/* Popup Menus */

.popup_button {
color: #FFFFFF;
text-align: right;
font-weight: bold;
padding: 3px;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 3px;
}

a.popup_button:link,
a.popup_button:visited,
a.popup_button:active,
a.popup_button:hover {
text-decoration: none;
color: #000000;
}

.popup_menu {
position: absolute;
border: 1px solid #000;
background: #ccc;
}

.popup_menu ul
{
margin:0px;
padding:0px;
list-style-type:none;
}

.popup_menu li
{
background: #fff;
margin: 1px;
padding: 0;

}

.popup_menu ul li a
{
display: block;
padding: 3px;
color: #000;
text-decoration: none;
}

* html .popup_menu ul li a {
display: block;
width: 100%;
}

.popup_menu a:hover {
background: #C7DBEE;
text-decoration: none;
color: #000;
}

.menupop {
background: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
display:none;
}

/* Navbar Menu */

.tvbnav {
background: #81A2C4;
width: 100%;
margin: auto auto;
border-top: 0px;
border-left: 1px solid #0F5C8E;
border-right: 1px solid #0F5C8E;
border-bottom: 1px solid #0F5C8E;
}

/* Navbar CP and Search */
.tvbnavcp{
background: ;
text-align: left;
}

.tvbnavsearch{
background: ;    
}

td.left{
text-align:left;
}

/* CSS Styling */
.vbottom{
vertical-align:bottom;
border: 0px;
}

Finally, you will need to activate the VBNavBar Plugin in your Admin CP. This will enable the vbnavbar.lang.php language file.

------------------------
Sample Screenshots
Some screenshots of the code modification in action can be seen below:

Guest view:


Admin/User CP view:


Admin/Search view:


------------------------
Live Example Sites
Screenshots and links to sites that use this code modification on their forums.

• Computer Tech Support Forum by Primster7
• HabboBlock :: Forums by Miley (Post #3) *Currently unavailable.
• Lands of Divinity by Sleepwalker (Post #7) *Currently unavailable
  

------------------------
Credits and Acknowledgements
Thanks must go to:

• Quacktacular Media - For the NDesign 1.6 plugin and language files. These were used as templates for the bundled VBNavBar plugin and modified under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
• FamFamFam Silk Icons - For the bundled .png icons.
• 24ways - For the SuperSleight .js script, which enables IE6 to have full PNG alpha-channel transparency for the .png icons included in the bundle.

------------------------
CHANGELOG
August 9th 2010: Version 1.0 released.

November 9th 2010: Change to header_welcomeblock_member with thanks to a bug report (Post #22 by haytoch). Please see Post #23 for more info. A French translation has kindly been provided by haytoch as well.

May 16th 2011: Change to header_welcomeblock_member with props to haytoch for the bug report and fix (see Post #42).

May 17th 2011: Change to headerinclude by updating Prototype and Scriptaculous to version 1603 (see Post #48) and props to primster7 for fix to header_welcomeblock_member (extra > for misc.php link)

May 18th 2011: Replaced functions.php and class_templates.php download files (so now reflects the latest 2011-02-21 timestamp from a clean MyBB 1.6.3 download)

July 30th 2011: Replaced functions.php and class_templates.php download files to maintain compatibility with MyBB 1.6.4. Also changes to header_welcomeblock_member_admin template edit. For more details please see Post #71)

August 17th 2011: Change to header_welcomeblock_member. For more details please see Post #75. Props to Bhashana for the bug report (Post#74).

December 2nd 2011: Replaced functions.php to maintain compatibility with MyBB 1.6.5. Please see Post #100 for more details about upgrading from MyBB 1.6.4.

April 4th 2012: Replaced functions.php and class_templates.php to ensure the mod continues to work in MyBB 1.6.7. Props to Primster7 for the bug report (Post #103).

------------------------
Known Bugs
None known as yet.

------------------------
FAQs

Q: Guests can see the 'Private messages' menu option although there is a random {1} and {2} instead of any actual values?
A: Please ensure that you download class_templates.php below and replace this file with the one in your /inc folder (clearer instructions in Step 1) The specific difference between the standard MyBB and the download below can be found in this post.

Q: How can I change the background colour of my logo header to [insert name of colour]?
A: By default, the template edits above sets the default background colour to white, so if you would like to change this (like indigored) to something else, please look for this line

Code:

<div class="logo" style="background:#fff url('$theme[imgdir]/logobg.gif');">

in Header Templates/header and change the value of background to the colour you would prefer (hex value)
An example can be found here

Q: How can I change the font or text colour of my User CP dropdown menu to [insert name of colour]?
A: The text colour is inherited from the class tcat so to override this, you will need to add a few extra lines to vbnavbar.css. This question came about as a user had a white font against their white background (you can find the original reply here) and the necessary change was as follows:

Code:

td.tcat td.menu_row a:link,
td.tcat td.menu_row a:visited,
td.tcat td.menu_row a:hover,
td.tcat td.menu_row a:active{
    color: #000000;
}

where the value for color: is the appropriate hex value for the colour (in this instance, black).

Q: Is this modification compatible with Google SEO?
A: This question was originally posed by sheldon365 and then by nadlerz as there is only one change to the default functions.php, you can either add in this change to your existing Google SEO-compatible functions.php, or download a modified version of functions.1.6.2-google-seo.php. Please see this post for more information. *May not be compatible with MyBB 1.6.4.

Q: Is this tutorial available in other languages?
A: A French translation is available on MyBB.fr courtesy of haytoch.

[Sleepwalker]

Best. Thing. Evar.

[Miley]

This works beautifully, you may use my website as a like demonstration.

http://www.habboblock.com/board

[flick]

(08-10-2010 04:48 AM)Sleepwalker Wrote:  Best. Thing. Evar.

Thanks for the ringing endorsement.

(08-10-2010 06:40 AM)Miley Wrote:  This works beautifully, you may use my website as a like demonstration.

http://www.habboblock.com/board

Thank you for letting me use your site as a live sample! I'm glad it's working fine on your Forums.

[Glas]

i have been during hours to trying to adapt this to pro navy theem
can someone help me? please
http://mods.mybb.com/view/pro-blue

[alv4]

Thanks for this...
PD: The demo site isn't working :l

[Sleepwalker]

Use my site as a demonstration. Especially since I use the default MyBB theme with a few CSS edits.

http://www.landsofdivinity.com

[alv4]

(08-31-2010 12:35 AM)Sleepwalker Wrote:  Use my site as a demonstration. Especially since I use the default MyBB theme with a few CSS edits.

http://www.landsofdivinity.com

Thanks ;D

[flick]

(08-28-2010 10:27 PM)Glas Wrote:  i have been during hours to trying to adapt this to pro navy theem
can someone help me? please
http://mods.mybb.com/view/pro-blue

Apologies for the late reply - I think this is something I will have to look into by installing it locally. Do you have any specific problems when adapting it to the pro navy theme?

(08-30-2010 11:31 PM)alv4 Wrote:  Thanks for this...
PD: The demo site isn't working :l

You're welcome.

(08-31-2010 12:35 AM)Sleepwalker Wrote:  Use my site as a demonstration. Especially since I use the default MyBB theme with a few CSS edits.

http://www.landsofdivinity.com

Thank you very much!

[aglioeolio]

amazing Tutorial, thanks