New PM information Box

[bonelifer]

This post was originally posted by Kenny at 6 String MODs.

Probably one of the shortest snippets I've done so far, but something I wanted to have on this site. Basically, it produces a little box exactly like the "disable board" information box. The box only shows if you have unread private messages. There is also a link to take you straight to your inbox. Sometimes I miss getting PM's - i.e. maybe don't notice them.

OPEN: styles/prosilver/template/overall_header.html
FIND:

Code: Select all

   <div id="page-body">

AFTER ADD:

Code: Select all

       <!-- IF S_USER_UNREAD_PRIVMSG --> 
      <div id="message" class="rules">
         <div class="inner"><span class="corners-top"><span></span></span>
            <strong>{L_INFORMATION}:</strong> {L_NEW_PM_NOTICE} - Click <a href="{U_PRIVATEMSGS}">here</a> to go to your Inbox.
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <!-- ENDIF -->

OPEN: language/en/common.php
FIND:

Code: Select all

   'NEW_MESSAGES'            => 'New messages',

AFTER ADD:

Code: Select all

   'NEW_PM_NOTICE'         => 'You have new messages waiting to be read',

I know this goes against what I've said before, but as it's such a small and easy snippet, here is some code for subSilver2. This is a one-off and probably won't be provided again

OPEN: styles/subSilver2/template/overall_header.html
FIND:

Code: Select all

   <div id="menubar">

AFTER ADD:

Code: Select all

   <!-- IF S_USER_UNREAD_PRIVMSG --> 
      <table class="tablebg" width="100%" cellspacing="1" cellpadding="0" style="margin-top: 5px;">
      <tr>
         <td class="row1">
            <p class="breadcrumbs"><strong>{L_INFORMATION}:</strong> {L_NEW_PM_NOTICE} - Click <a href="{U_PRIVATEMSGS}">here</a> to go to your Inbox.</p>
         </td>
      </tr>
      </table>
      <br />
   <!-- ENDIF -->

Remember to purge your cache after makeing template changes.
To test that this works, send a PM to yourself. As soon as you see the confirmation screen, go straight to your board index or another page e.g faq

[Obsidian]

A better method (and this is a suggestion) is to use what is already present to notify the user; it may be worth considering "highlighting" the navigation bar on the top when there are new messages present. Using a different color set for the navigation bar would catch the user's attention while conserving screen space.

[tumba25]

IMO this is better. I have tried highlighting the text with other colours in other forums. Users are still missing them. Nobody misses that red box and that screen space is only taken when there is new pms, and for a reason.

[Obsidian]

IMO this is better. I have tried highlighting the text with other colours in other forums. Users are still missing them. Nobody misses that red box and that screen space is only taken when there is new pms, and for a reason.

I didn't mean the text, but the entire navbar itself.

From: http://i54.tinypic.com/fve0yd.png

To: http://i55.tinypic.com/31787xg.png

[tumba25]

Would be a nice option. Please add the code needed for that.

[Obsidian]

Sure, I'll edit with the code in a bit. It does take some extra CSS though, I don't remember what exactly I used...will take me some digging to find the CSS, thanks to our beloved[/sarcasm] subblue's excellent styling practices and total lack of redundant code.

Find this set of lines, in prosilver/template/overall_header.html

Code: Select all

<div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <ul class="linklist navlinks">

Within this set of lines, replace this line:

Code: Select all

<div class="navbar">

...with this:

Code: Select all

<div class="<!-- IF S_USER_LOGGED_IN and S_DISPLAY_PM and S_USER_NEW_PRIVMSG and not S_IS_BOT --
>pm-unread <!-- ENDIF -->navbar">

Also, add this CSS somewhere where it won't be overridden by the layers of extra CSS in prosilver and you should be good to go:

Code: Select all

.pm-unread {
   background-color: #ECD5D8 !important;
   color: #BC2A4D !important;
}

.pm-unread a:link, .pm-unread a:visited, .pm-unread a:active {
   color: #BC2A4D;
}

.pm-unread a:hover {
   color: #EA2040;
}