Inbox and Friend Request Alert CSS

[SweetPotato]

A few months ago I posted this tip on how to flag new inbox messages

That thread has gotten a little messy and the tip has been updated to make it look a lot cleaner and less image reliant, so i thought I'd post a clean format here.

The idea is to give members and easier way to spot that they have unread messages in their inbox and/or friend requests waiting. I've used green because that stands out on my site but obviously you can play around with colours. Here's the result on my site:

Here is the code that you'll need for you Appearance/Advanced CSS box:

/* Inbox Alert */
.xj_messages_present .xj_count_unreadMessages {
    background-color: #009900;
    border: solid 1px #006600;
    color: #FFFFFF;
    margin-left: 2px;
    padding:0 3px;
text-shadow: 1px 1px #3F3F3F;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;

}

.xj_messages_present small {
background-color: transparent;
margin-right: -30px;
}

.xj_messages_present small a{
text-decoration:none !important;
color:transparent !important;
}


/* friend request */
.xj_one_friend_request small{
background-color: #009900;
    border: 1px solid #006600;
    color: #FFFFFF;
    margin-left: 2px;
    padding: 0px 3px 1px 3px;
text-shadow: 1px 1px #3F3F3F;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}

.xj_one_friend_request small a{
text-decoration:none !important;
color:#ffffff;
}

There are some suggestions in the former thread that you could replace the background colours with flashing animated gifs, a good idea if you want that extra level of notification.

Enjoy

SP

More tips on my profile page.

[Bernard Lama]

Very nice idea... thanks for sharing it...

[yasir bukhari]

yups gud thnx

[Eric Suesz]

This is really nice. Well done!

[Scott Bishop]

Do you know how to change the code that you wrote above to make your green flash?

[SweetPotato]

You'd have to make a flashing gif image and then make that the background

[Scott Bishop]

Were would I embed the gif image into your code?

[SweetPotato]

Replace
background-color: #00990;

With

Background: url(your image URL);

[Scott Bishop]

Thanks SweetPotato, sorry for being so pesty :)

[SweetPotato]

No worries

[Michael Thompson]

Sweetpotato,

This is a great tip. On my network, I changed Alerts to Comments. When you click on comments it takes you to your comment wall (on your member profile). I was wondering if a similar alert could be created (for # of new comments on a users profile wall) like the inbox and message alerts code in this tip. 

[SweetPotato]

Not really sure what alerts does to be honest, never had one either on creators or my own site. How did you change it to comments?

[Michael Thompson]

Yes, I haven't seen anything in alerts. It seems like a wasted area. At least with comments, we might get some use out of that space.  I got the tip to change alert to comments at TJ's jqueryhelp site (TJ labeled it: My Comment Wall): http://jqueryhelp.ning.com/forum/topics/how-to-modify-my-html-code