Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • NC for Hire

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

  • yups gud thnx

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

    • NC for Hire
      You'd have to make a flashing gif image and then make that the background
      • Were would I embed the gif image into your code?

        • NC for Hire
          Replace
          background-color: #00990;

          With

          Background: url(your image URL);
  • 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. 

    • NC for Hire
      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?
This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Paul Jackson updated their profile
Thursday
eric1612 updated their profile
Aug 20
Tony A updated their profile
Aug 13
Tyler Masonry updated their profile
Aug 9
⚡JFarrow⌁ posted a discussion
I am trying to find just one working example of an app or utility that runs with the Ning API. No…
Aug 7
Eva updated their profile
Aug 2
Eva liked Steve C's discussion Ning's staff is in Kyiv. Keep them in your hearts.
Aug 2
Eva liked ⚡JFarrow⌁'s discussion What is going on with Ning? What Do We have to Look Forward To?
Aug 2
Chris Egg updated their profile
Jul 30
Eva liked Ning Support's discussion New feature added into Group Permissions
Jul 29
Arissa Seah updated their profile
Jul 27
APOSTLE TEYSHANA WILEY liked Ning Support's discussion New feature added into Group Permissions
Jul 25
More…

Meanwhile, you can check our social media channels