MyBB Community Forums

Following this tutorial you will get a sort of notification system for PMs. You have to refresh, but it's still a cool little feature to have imo.

So the first thing you're going to want to do is open up your header_welcomeblock_member template, then find:

{$lang->welcome_back}

And right after add:

<a href="{$mybb->settings['bburl']}/private.php" id="pm_notification">{$mybb->user['pms_unread']}</a>

Next, add this to the very bottom of the same template:

<script type="text/javascript">
jQuery.noConflict()
jQuery(function($) {
var pmcontents = jQuery("#pm_notification").text();
    if(pmcontents == 0){
        $("#pm_notification").hide();
    } else { return false; };
});
</script>

Next, go into your ungrouped templates and find headerinclude. Add this to the very top:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

Now go into your global.css Advanced Editor view and add this to the very bottom:

#pm_notification {
	display: inline-block;
        background: url(images/notify_bg.png) top left repeat-x;
        height: 15px;
        line-height: 15px;
        border-radius: 5px;
        border: 1px solid #921515;
        text-shadow: 0 -1px 0 #921515;
        padding: 0 3px 0 3px;
        font-family: tahoma, sans-serif;
        font-size: 11px;
}

a#pm_notification {
	color: #FFF;
        text-decoration: none;
}

And last but not least, upload the attached image to your root/images directory.

Then you should have something that looks like this when you have a private message:


And then disappears when you have none:



Combining it with Profile Comments

If you have the Profile Comments plugin installed on your forums (Not to be confused with Tomm's MyNetwork plugin) you can follow this to combine the notifications count with both PMs and Profile Comments.

I'll be writing this assuming you've already done the above tutorial.

Open your header_welcomeblock_member template and find:

<script type="text/javascript">
jQuery.noConflict()
jQuery(function($) {
var pmcontents = jQuery("#pm_notification").text();
    if(pmcontents == 0){
        $("#pm_notification").hide();
    } else { return false; };
});
</script>

Replace all that with this:

<script type="text/javascript">
jQuery.noConflict()
jQuery(function($) {
var pmcontents = parseInt("{$mybb->user['pms_unread']}");
var pc_string = "{$lang->profile_comments_new_inmenu_count}";
var pc_count = parseInt(pc_string.slice(1, -1));
    if(isNaN(pc_count)) {
        var pc_count = 0;
    }
var total_count = pmcontents + pc_count;
    if(pmcontents == 0) {
        $("#pm_link").show();
    }
    else {
        $("#pm_link").hide();
    }

    if(total_count == 0){
        $("#pm_notification").hide();
    } 
    else { 
        $("#pm_notification").replaceWith("<a href=\"{$mybb->settings['bburl']}/private.php\" id=\"pm_notification\" title=\"{$mybb->user['pms_unread']} PMs, "+pc_count+" Profile Comments\">"+total_count+"</a>"); 
    };
});
</script>

Then, in the same template, find:

{$lang->welcome_pms_usage}<!-- ProfileComments --> | <a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}" title="{$lang->profile_comments}">{$lang->profile_comments_new_inmenu}</a> {$lang->profile_comments_new_inmenu_count}<!-- /ProfileComments -->

And remove it all.

Next find:

| <a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a>

and replace it with:

<span id="pm_link">| <a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a></span>

Then, open your header template and find:

{$pm_notice}

And remove it. Now you're finished. You should see something like this when you have any amount of unread pms and/or unread profile comments:



And then this when you have none:

Very nice.

notify_bg.png ?

anyway... thanks for this...

(2012-05-20, 05:58 PM)martec Wrote: [ -> ]notify_bg.png ?

anyway... thanks for this...

That's the name of the image he used for the background, you can use your own image.

(2012-05-20, 06:01 PM)FullMetalBabe Wrote: [ -> ]

(2012-05-20, 05:58 PM)martec Wrote: [ -> ]notify_bg.png ?

anyway... thanks for this...

That's the name of the image he used for the background, you can use your own image.

But he said: "And last but not least, upload the attached image to your root/images directory."

I think he forgot to attach the image

Yea its nice, but dont we get notifications anyway (yellow bar).

Sorry, I've attached the image now. :x

And yes, Frank, but these are styled like XF or Facebook's notifications.

Oh ok cool.

Interesting tutorial, I'm favoriting this and I'll implement it when I get home.

Added a second part to the tutorial. This one combines PMs with Profile Comments in notifications and removes default notifications. Also removes PM link unless you have no notifications. I unfortunately didn't have the time to create a dropdown menu for them (To link to both the PMs and the Profile Comments) but since clicking on your username gets you to your Profile Comments I figured this was okay.

Let me know what you think of the tutorial!