MyBB Community Forums

For those wondering what this is, this code modification allows your MyBB forum to have a vBulletin-style feature, drop down navigation, for both the search box and the User CP.

The original plugin - Conditional and vb navbar for 1.20 - was released by Lapsetur and all I have done here is to tidy it up and tweak it a little so that it looks and works fine for MyBB 1.4.4+.

In other words, the actual code released by Lapsetur that drives the plugin *still* works in MyBB 1.4.4+. The only difference is the additional modifications to bring it up to date - display wise and link edits - for MyBB 1.4.4+.

Files that you need

• Std files for 1.4.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 4 .gif image files in /images to /images
   
5. Upload the 2 .js files in /jscripts to /jscripts
   

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:

Header Templates / header

<script language="Javascript" type="text/javascript">
var newpm_prompt = "{$lang->newpm_prompt}";
var quickdelete_confirm = "{$lang->quickdelete_confirm}";
</script>

<div id="container">
<a name="top"id="top"></a>
<div id="header">
<div class="logo" style="background:#fff url('$theme[imgdir]/logobg.gif');"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" border="0" /></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="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="member.php" method="post">

<table cellpadding="0" cellspacing="3" border="0" class="trow1">
<tr>
<td class="smalltext">$lang->username</td>
<td><input type="text" name="username" size="10" title="$lang->username" value="Username" onfocus="this.value=''" /></td>
</tr>
<tr>
<td class="smalltext">$lang->password</td>

<td><input type="password" name="password" size="10" title="$lang->password" value="$lang->password" onfocus="this.value=''" /></td>


<td><input type="submit" class="smalltext" style="font-weight:normal" value="OK" /></td>

</tr>
</table>
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="" />
</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"><a href="{$mybb->settings['bburl']}/index.php"><strong>Index</strong></a></td>

<td class="tcat" align="center">
<a href="{$mybb->settings['bburl']}/search.php" id="search" onclick="return openMenu(this)" class="popup_button">{$lang->toplinks_search}<img src="images/popup_down.gif" border="0" /></a></td>

<td class="tcat" align="center"><a href="{$mybb->settings['bburl']}/memberlist.php"><strong>{$lang->toplinks_memberlist}</strong></a></td>
<td class="tcat" align="center"><a href="{$mybb->settings['bburl']}/calendar.php"><strong>{$lang->toplinks_calendar}</strong></a></td>
<td class="tcat" align="center"><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" />
<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}


<!-- header quick search form -->
<div class="menupop" id="search-popup" style="display:none">
<table cellpadding="4" cellspacing="1" border="0" class="tvbnavsearch">
<tr>
<td class="tcat">Search</td>
</tr>
<tr>
<td class="row">

<form method="post" action="$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="search.php">Advanced Search</a></td>
</tr>
</table>
</div>

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

Header Templates / header_welcomeblock_guest

<a href="{$mybb->settings['bburl']}/member.php?action=register"><strong>{$lang->welcome_register}</strong></a>

Header Templates / header_welcomeblock_member

<a href="usercp.php" id="usercp" onclick="return openMenu(this)" class="popup_button">User CP<img src="images/popup_down.gif" border="0" /></a>

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

<tr><td class="tcat">Quick Links</td></tr>
<tr><td class="menu_row"><a href="search.php?action=getnew" title="View New Posts">{$lang->welcome_newposts}</a></td></tr>
<tr><td class="menu_row"><a href="{$mybb->settings['bburl']}/search.php?action=getdaily" title="View Today's Posts">{$lang->welcome_todaysposts}</a></td></tr>
<tr><td class="menu_row"><a href="misc.php?action=markread" title="Mark All Forums Read">Mark All Forums Read</a></td></tr>
<tr><td class="menu_row"><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);" title="Open Buddy/Ignore List">Buddy/Ignore List</a></td></tr>

<tr><td class="tcat"><a href="{$mybb->settings['bburl']}/usercp.php" title="User Control Panel">User Control Panel</a></td></tr>
<tr><td class="menu_row"><a href="usercp.php?action=editsig" title="Change Signature">Change Signature</a></td></tr>
<tr><td class="menu_row"><a href="usercp.php?action=avatar" title="Change Avatar">Change Avatar</a></td></tr>
<tr><td class="menu_row"><a href="usercp.php?action=profile" title="Edit Profile">Edit Profile</a></td></tr>
<tr><td class="menu_row"><a href="usercp.php?action=options" title="Edit Options"">Edit Options</a></td></tr>

<tr><td class="tcat">Miscellaneous</td></tr>
<tr><td class="menu_row"><a href="private.php" title="View Private Messages">Private Messages</a></td></tr>
<tr><td class="menu_row"><a href="usercp.php?action=subscriptions" title="Subscribed Threads">Subscribed Threads</a></td></tr>
<tr><td class="menu_row"><a href="member.php?action=profile&amp;uid={$mybb->user['uid']}" title="View Profile">View Profile</a></td></tr>

</table>
</div>

Header Templates / header_welcomeblock_member_admin

<td class="tcat" align="center"><a href="{$mybb->settings['bburl']}/{$config['admin_dir']}/index.php"><strong>{$lang->welcome_admin}</strong></a></td>

Header Templates / header_welcomeblock_member_moderator

<td class="tcat" align="center"><a href="{$mybb->settings['bburl']}/modcp.php"><strong>{$lang->welcome_modcp}</strong></a></td>

Ungrouped Templates / headerinclude

<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=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/menu.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/mybb.js"></script>
{$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}

Forum Bit Templates / forumbit_depth2_forum

<tr>
<td class="{$bgcolor}" align="center" valign="middle" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>
<td class="{$bgcolor}" valign="middle">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" valign="middle" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" valign="middle" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" valign="middle" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

Navigation Templates / nav

<div class="navigation">
<img style="vertical-align:bottom;" src="$theme[imgdir]/nav_start.gif" />{$nav}{$activesep}{$activebit}
</div>

Navigation Templates / nav_sep

>

Navigation Templates / nav_sep_active

<br /><img style="vertical-align:bottom;" src="$theme[imgdir]/nav_end.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

/* 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;
}

/* 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: ;	
}

.tvbnavsearch{
background: ;	
}

Any corrections are welcome so please let me know if this works or doesn't work for you.

Some screenshots of the code modification in action can be seen below:
Guest view:


Admin view:


Admin/Member CP view:


Admin/Member Search view:


Condition and vbnavbar live samples
Screenshots and links to sites that use this code modification on their forums. Thanks to okitai for his permission to allow us to feature his forum here!


Admin: okitai
Forum URL: http://www.ithelp.co.il/
Comments: okitai has actually extended the functionality of the code modification by adding icons for each item in the navigation menu and customising the sub-menus as well, which you can read about here.

------------------------
CHANGELOG
Jan 7th 2009: Minor corrections to vbnavbar.css and headerinclude (Details in post #19)
March 26th 2009: Minor correction to header (Details in post #50)
April 26th 2009: New functions.php for MyBB 1.4.5 (Details in post #59)
July 1st 2009: New functions.php and class_templates.php uploaded for MyBB 1.4.8. Existing users do not need to change to this new version.
December 10th 2009: New functions.php uploaded for MyBB 1.4.10.
April 22nd 2010: New functions.php uploaded for MyBB 1.4.13.
August 4th 2010: Minor modifications to vbnavbar.css and templates header and header_welcomeblock_member (Details in post #110)

------------------------
Known Bugs
New users using IE7 (and IE6) trying to register on the Forums may experience a Passwords must match error. This is because these versions of the browser are unable to handle two sets of password boxes on the same page: one set from the registration section, and the other from this code modification.
Current known solutions are to:
1. Set up 'send random password instead of allowing users to create their own password
2. Ask new users to type the password into the topright login password box as well.

------------------------
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

<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:

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).

Nice mod, thank you and happy new year

Loved it. Worked on getting it to work on my forum up to the, very, early, hours of the morning.
It does work, but:
1) your code is missing (in many places) '{' or '{}' and some other stuff (everything can be found, pretty, easily).
2) All the butty of the code (tabs and sections) are lost using copy&paste from here.
3) this code doesn't "know" how to "make itself" theme friendly if your not using the MyBB default theme. If you used "tborder" and "thead" insted of "tcat" it would have been easier.
4) everyone that use this code has to understand that if you've installed plugins that put themselves in the index (or the other parts of the template cod here), they have to find this parts and copy them into the correct place at this code.
5) the UserCP/AdminCP/ModeratorCP menu cannot use MyBB arguments (like: {$lang->marked}) instead of the text for some reason. I wanted the code to be easily transferable to other languages (some caused the menu to be shown without any text at all and other where not shown as themselves).

Hope this helps,
Ori...
P.S. Sorry for the bad English, My Hebrew is better.

When new updates are avaible, the files that you change should be also updated.

(2008-12-28, 07:55 PM)aglioeolio Wrote: [ -> ]Nice mod, thank you and happy new year

Thanks for the kind words, aglioeolio. A very happy new year to you too!

(2008-12-29, 09:03 AM)okitai Wrote: [ -> ]Loved it. Worked on getting it to work on my forum up to the, very, early, hours of the morning.
It does work, but:
1) your code is missing (in many places) '{' or '{}' and some other stuff (everything can be found, pretty, easily).
2) All the butty of the code (tabs and sections) are lost using copy&paste from here.
3) this code doesn't "know" how to "make itself" theme friendly if your not using the MyBB default theme. If you used "tborder" and "thead" insted of "tcat" it would have been easier.
4) everyone that use this code has to understand that if you've installed plugins that put themselves in the index (or the other parts of the template cod here), they have to find this parts and copy them into the correct place at this code.
5) the UserCP/AdminCP/ModeratorCP menu cannot use MyBB arguments (like: {$lang->marked}) instead of the text for some reason. I wanted the code to be easily transferable to other languages (some caused the menu to be shown without any text at all and other where not shown as themselves).

Hope this helps,
Ori...
P.S. Sorry for the bad English, My Hebrew is better.

This is great feedback actually, really thanks a tonne okitai I find this sort of commentary very helpful!

1) I would be grateful if you wouldn't mind being a little more specific as to any missing { or {} brackets. What I had done was essentially copy what I had working on my own installation to each code part, so I could easily have missed out something important!

2) For the 'butty' do you mean the tabbed-space or spacing? If so, from a quick test that I've done (using Firefox 2.0.x) the code seems to copy across with the existing spacing from the forum post to the MyBB template editor. Please could you kindly elaborate on what method you're using here?

3) I have to admit "tcat" is something brought over/inherited from the original plugin, but I had assumed (without doing any research) that this was still a commonly used table class in newer themes. I did add in a new table class tvbnav which ultimately styles the vbnav menu as after trying out thead and tborder, neither of them seemed to have the style I had in mind. Perhaps I should have pointed this out more clearly. Any further thoughts? ^^

4) Hmm... by this I think you mean plugins that automatically insert themselves into the index page? As far as I am aware, no changes have been made to the index page templates, so I am a little confused. Please could you let me know which plugin you were testing with this?

I have tested this out just using Online Today plugin which was originally released by ethernet and brought up to date by Samuel and it seems to be automatically inserting itself just fine.



5) This is something that I vaguely picked up on as well whilst editing the file and thought that it was something I was doing wrong; you are right that it should be {$lang->language} so that it can be used with any language pack, and I was intending to do this when updating the original modification, but I am clearly missing a step somewhere so will continue to look out for a solution. Thanks for highlighting it though, sometimes it's just so easy to forget that MyBB *is* a very international community, esp. having been away for so long, so apologies for the moment.

(2008-12-29, 09:35 PM)adigec Wrote: [ -> ]When new updates are avaible, the files that you change should be also updated.

This is very true! Quite often one gets the 'Template needs to be reverted' message with new MyBB updates. Am not too sure what MyBB 1.5 will bring (or 1.6?) but hopefully the rest of the 1.4.x releases won't have any drastic template changes. I will continue to keep functions.php and class_templates.php as up to date as possible though.

I'm thinking of doing a copy&paste from the code I have now (with some changes and corrections) and attaching it to my next post. You are invited to my forum: http://www.ithelp.co.il/forum . Although its in Hebrew, I'm sure you'll understand what I changed and how it works.
If you want to view the forum with a user (for the user menu), use: tempuser and password: 12345 (its a regular user).

Ori...

Looks good! I see you've added some icons to the menu as well - very nice! I would have loved to do it for the drop-down User CP part (never thought of it for the actual navigation menu!) but couldn't get it to work properly without extra edits.

Looking forward to seeing your changes

p/s: I tried to login to your site initially using the "ברוך הבא, אורח" login box, but it gave me this error:

Quote:SQL Error:
1054 - Unknown column 'loginattempts' in 'field list'
Query:
UPDATE mybb_sessions SET uid='3', loginattempts='1' WHERE sid=''

p/s2: Would you mind me taking a screenshot to share with others?

First: as for your request to take a picture - no problem, you can go ahead. I do sugest clicking on the forum that ends with "(Pocket PC)" - the site map works after some tinkering.

Second: thanks for telling me about the error. It seems that the sidebox plugin that I have doesn't know how to work with the changed SQL database in 1.4.4 version. I'll try to fix it (or download labrocca's one from his site).


Ori...
P.S. (no. 1) I changed the help so it pops up a window (so you can look at it with the site - not insted of it). I know it doesn't show anything - I have a problem with all functions using 'misc.php'.
P.S. (no. 2) As you saw, I added a menu that will (in the near future) have a few links in it. for now I keep it as a "place keeper".

Thanks okitai! I will be sure to do a nice screen shot first thing on New Year's Day!
Please do keep us all posted about your progress. It would be nice if new features could be built into this code modification.

p/s: Happy new year for 2009 everyone!
p/s2: Will also take a look at the Help part that you mentioned in your post.

This is lucky for me. I just got my forum back up and running. I had to change a lot as the system got "funny" some times. This is probbly do to the too many plugins I had.

Ori...