Change PM Message Per Theme

[Eric]

In this tutorial I'll show you how to modify your PM message with jQuery instead of having to edit a .lang file or anything. Using this method there are quite a number of new things you can do with the PM alerts, so try experimenting and post your results here.

First things first of course you have to add jQuery into your theme by going to your headerinclude template and adding this to the top:

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

then you're going to want to add the following right above {$stylesheets}:

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
// Editing PM Message
    // See if there is even a message to replace
    if ($(".pm_alert").length > 0) {
        // Set the new message
        var newPmMessage = "<a href='" + $('.pm_alert a').get(1) + "'><strong>" + $('.pm_alert a').get(1).innerHTML + "</strong></a> has just sent you a new message! It's titled <a href='" + $('.pm_alert a').get(2) + "'><strong>" + $('.pm_alert a').get(2).innerHTML +"</strong></a>. <div style='float: right;'><a href='" + $('.pm_alert a').get(0) + "' title='Dismiss this notice.' onclick='return MyBB.dismissPMNotice()'>Close</a></div>";
        // Replace the old one with the new one
        $(".pm_alert").replaceWith( "<div class='pm_alert' id='pm_notice'>" + newPmMessage + "</div>" );
    } else {
        // No need to replace it
    }
});
</script>

So instead of repeating what I've already commented out in the code, I'll break down what produces what.

$('.pm_alert a').get(1)

That gets the second link available in the .pm_alert div, which is a link to the user profile that sent a message to you.

$('.pm_alert a').get(1).innerHTML

That gets the actual name of the user that sent a message to you.

$('.pm_alert a').get(2)

That gets the link to the latest message that you received.

$('.pm_alert a').get(2).innerHTML

This will get the name of the latest message that you've received.

$('.pm_alert a').get(0)

And lastly this is the link used to close your alert.



It's really simple stuff, but helps one of the (imho) more troubling things about editing a theme. The best part is that if the user viewing doesn't have Javascript enabled, it just defaults to the original PM Notice.

Oh, just realized writing this I didn't include a message for how many unread PMs you have. I'll update here in a few with that as well.







Update: Forgot to include script tags.

[Jack Clarke]

Thanks for this Eric.

[Eric]

Sure thing, hope it helps some people that are tired of the same old alerts.

[Adobe]

This user has been denied support.

I'm way too confused on what this does.

[Eric]

It allows you to change the PM message without having to edit language variables. It also opens up some customization possibilities for the PM message that weren't there before.