MyBB Community Forums

So I have customized the menu bar like this:


Now I only want to highlight one of the menu items depending on where the user is on the website. Just like you are now on mybb's community section:

So if the user is browsing the forums, categories, threads, posting new replies, creating threads etc. etc. obviously the Forums button should be highlighted in my example.

Now for me it's easy to do this with javascript/prototype/jquery whatever. But the issue I've got here is that on the client side, it's a tedious task to check where the user is currently. Because unfortunately there is no universal URL directory for the forums. For example:

• /index.php would be the main index page
  
• /forumdispay.php would be the forums and categories
  
• /showthread.php would be a specific thread in the forums
  

So I would have to check the URL and see where I am? It would've been easier if all of them where /index.php

Fortunately, for the search section it's only /search.php
for the help section it's always /misc.php
etc.
So those would be easy.

Anyway, so that would be my idea. Does anyone have any other/better suggestion to achieve this on an easier and more efficient way?

Well, you can check if it's index.php/forumdisplay.php/showthread.php with JS as you do, but if you want it faster, using server-side PHP would be better.

1. Download: http://mybbhacks.zingaburga.com/showthread.php?tid=464
2. Put both .txt and .php file to inc/plugins. Activate.
3. Add something like this to any template:

<if in_array(THIS_SCRIPT, array("index.php" ,"forumdisplay.php", "showthread.php")) then> class="active"</if>

It will add class .active only if you are on pages controlled by scripts in array. Can modify it to inline styling or whatever - any HTML can be put inside conditional.

You could also use something like this:

<if THIS_SCRIPT == "misc.php" && $mybb->input['action'] == "help" then> class="active"</if>

to check for more tricky urls like misc.php?action=help

Hey great plugin indeed! I will definitely take a look there for any options I could use. Since indeed server side would be much better. I don't really like to do these things on the client side.
Anyway thanks for the suggestion!

First I think I'll dive into the source of mybb and see if I could perhaps inject some php code there. If all else fails, I'll consider to use the PHP Conditional plugin (or PHP in Templates plugin).

Any more suggestions or ideas are still welcome. And I'll keep this thread updated untill I got my definite solution.

So here's my solution and the result looks like this:


First in global.php I inserted this code in line 308:

$curr_menu_item = "";
switch(THIS_SCRIPT) {
    case "memberlist.php":
    case "member.php":
    $curr_menu_item = "members";
        break;
    case "search.php":
        $curr_menu_item = "search";
        break;
    case "misc.php":
        $curr_menu_item = "help";
        break;
    default:
        $curr_menu_item = "forums";
        break;
}
$templates->cache['menu_item'] = '<script type="text/javascript">var menu_item = "' . $curr_menu_item . '";</script>';
eval("\$menu_item = \"".$templates->get("menu_item", true, false)."\";");

As you can see I'm checking which section the user is visiting in the switch/case statement. Then I add that to a global variable for javascript, by caching that script it to the templates and eval it.

Then I make sure I add this piece of code to the headerinclude template, so the global variable will be available in javascript:

{$menu_item} <!--custom 'template' made in global.php-->
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/select_menuitem.js"></script>

Then of course I add the select_menuitem.js script to the jscripts folder, which looks like this:

jQuery(document).ready(function($) {
    switch (menu_item) {
        case "members":
            $(".menu ul li:eq(1)").css("background-color", "white");
            break;
        case "search":
            $(".menu ul li:eq(2)").css("background-color", "white");
            break;
        case "help":
            $(".menu ul li:eq(3)").css("background-color", "white");
            break;
        default:
            $(".menu ul li:eq(0)").css("background-color", "white");
            break;
    }
});

I use jQuery here to highlight the correct menu item, based on the global variable menu_item that was inserted in global.php

Note that to use jQuery you need to include a jquery.js script after the prototype.js script in headerinclude and call:

jQuery.noConflict();

So I'm deciding which page the user is visiting server-side. Then I highlight the menu item client-side. I still don't like doing this on the client side. So I'm thinking for a solution to do this fully on the server side. But I don't think that would be easy since the templates are saved in the database. So this is the best solution I could come up with.

I told you how to do it without JS client-side and core file edits with just 4 simple conditionals in template.. So I don't know what are you still looking for, there is nothing simplier, cleaner and more efficient in my opinion.
Something like this (with above plugin activated):

<ul>
<li<if in_array(THIS_SCRIPT, array("index.php" ,"forumdisplay.php", "showthread.php", "newreply.php", "newthread.php", "editpost.php")) then> class="menuactive"</if>><a href="{$mybb->settings['bburl']}/index.php">Forum</a></li>
<li<if THIS_SCRIPT == "memberlist.php" then> class="menuactive"</if>><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
<li<if THIS_SCRIPT == "search.php" then> class="menuactive"</if>><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
<li<if THIS_SCRIPT == "misc.php" && $mybb->input['action'] == "help" then> class="menuactive"</if>><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
</ul>

Add class .menuactive to global.css and done..

Here demo of similar code: http://board.twcclan.org/

Yeah I know that, but I prefer to do this without plugins and rather do these things on my own. But yes, I could indeed give the 'active' menu item the correct css property like your suggestion. Now this can also be achieved by doing that in the source without that plugin.

You could create php variables in the header template like this way: {$forums}, {$members} etc. And in the global.php source, eval those variables and add the 'active' css property to the correct one.

I'll adjust my implementation since that's indeed server-sided only without need of any client-side methods, like I used jQuery. Thanks for your idea Destroy666, I'll go for that, only without the use of that plugin, so it'll be a custom variation. I'll post the code here after I did that.

^ we prefer modifying system core files only if it is a must. in general, we like using plugins.
as you are interested in modifying global.php file, again we suggest to use a plugin, viz., patches
(it would be easy to track the changes if you use patches plugin to modify MyBB core files)

(2013-10-27, 06:30 PM).m. Wrote: [ -> ]^ we prefer modifying system core files only if it is a must. in general, we like using plugins.
as you are interested in modifying global.php file, again we suggest to use a plugin, viz., patches
(it would be easy to track the changes if you use patches plugin to modify MyBB core files)

I can understand that. Still I like to dive into the source and customize it to fit my own desire. It's also fun for me, since I can learn things from the source and get a better grasp of the forum software. Since I'm a CS student myself, and do this as hobby/education, I won't be bothered much by any patches. And if I do, I'll just take a look at what's patched and if it would affect the things I changed in the source, I'll adjust that.
Also, if something gets patched, doesn't the plugin have to adjust to that patch too? And eventually wait for the patch on the plugin if this gets affected too by the patch in the mybb source?
And besides, my customization is just a small change in the source that wouldn't hurt anything.

Anyway, here's my full and definite server-side solution:

Replaced the code from the post above in global.php from line 308 with:

$activeMenuItem = '';
switch(THIS_SCRIPT) {
    case "memberlist.php":
    case "member.php":
        $activeMenuItem = "members_highlight";
        break;
    case "search.php":
        $activeMenuItem = "search_highlight";
        break;
    case "misc.php":
        $activeMenuItem = "help_highlight";
        break;
    default:
        $activeMenuItem = "forums_highlight";
        break;
}
$templates->cache[$activeMenuItem] = 'style="background-color:white"';
eval("\$$activeMenuItem = \"". $templates->get($activeMenuItem, true, false) ."\";");

Everything else I did in my previous solution is reverted to it's original state. And in the header template I changed this for the menu items:

<li {$forums_highlight}><a href="{$mybb->settings['bburl']}/index.php">Forums</a></li>
<li {$members_highlight}><a href="{$mybb->settings['bburl']}/memberlist.php">Members</a></li>
<li {$search_highlight}><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
<li {$help_highlight}><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>

I added {$menuItemName_highlight} inline, and the correct one will be figured out by the php code above and replaced with the css property. All the others will just be blank.
Note that I removed the Calender menu item, and added a Forums menu item, and also customized the Memberslist menu item to Members.

Credits to Destroy666 for his suggestion that inspired me for this solution.