JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Notification feature for your Ning network

Hi ,

As you know , when you edit and save something , you will get a Green Success Bar on top of your page . For example , i edited my network's CSS and click save , it will show this bar .

There are two color for this bar in Ning which can be use in any part of the network .

1) Yellow notification bar

<div class="notification"> My notification message </div>

Example

2)Green success bar

<div class="success"> Success ! </div>

Example

3)Red warning bar
<div class="errordesc">Your warning message here</div>

Example

Just paste this codes in text boxes or pages . This will not work in comments.

Nice day ,

Elson.

4 members favorited this

Replies to This Discussion

Permalink Reply by JenSocial on October 27, 2010 at 2:54pm

How in the heck did I miss this?! This is a cool tip Elson. I wrote my own for the pre tag. It adds similar styles, if not the same. I don't remember exactly.

Bottom line: Anyone reading this - - the CSS classes Elson has shared with us: notification and success, are built-in to the Ning platform Style Sheets (CSS-Cascading Style Sheets). If you want to add text that will have these box colors and styles applied, just wrap your text in a DIV using one of the classes Elson has provided. I'll use the notification class style for my paragraph above, and the success class for this paragraph (technically just wrapped in a DIV).

Here's the code you would use:

Nice tip! Thanks Elson!

Permalink Reply by Nicholas Kyriakides on July 6, 2011 at 4:52am

How do you display the Red tip when an error shows up? Any ideas what the tip looks like? Cos i would have liked to add one for some warning reasons on my site! Thanks!

Permalink Reply by elsodev on July 6, 2011 at 5:22am

Test

The Code:
<div class="errordesc">Your warning message here</div>

Permalink Reply by Nicholas Kyriakides on July 6, 2011 at 7:41am

thanks! :-)

Permalink Reply by elsodev on July 9, 2011 at 3:59am

Permalink Reply by Dave Norris on July 6, 2011 at 1:55pm

hey, did this just work? what a neat tip!

Permalink Reply by JenSocial on July 6, 2011 at 2:15pm

Yep! Funny thing, I went to the trouble of creating my own style with <pre>content</pre>, which styles the text exactly as the built-in tag for class=success. I didn't know it at the time. This is what I use for the CSS and Custom Code for tips.

Permalink Reply by GirlRiders on July 6, 2011 at 8:33pm

This is cool, what would y'all use it for?

Permalink Reply by JenSocial on July 6, 2011 at 8:41pm

For me, I use the green for all program code when writing tips. If you wanted to give special attention to a member message you might use the <div class="errordesc">Your warning message here</div>

Your warning message here

Permalink Reply by GirlRiders on July 7, 2011 at 6:58am

Great! Thanks Elsodev. I'll keep this in mind!

Permalink Reply by Haitians United for Haiti on July 6, 2011 at 9:22pm

Hey Jen,

I am clueless. Please let me know how can I use this on our site and what for?

Thank you!

Permalink Reply by JenSocial on July 6, 2011 at 11:50pm

It's not for everyone. Like I commented above, if you wanted to make a special announcement, say at top of a Group - - you could enter the text, wrap it in the <div class="errordesc">your special group announcement</div>, and it would look like this:

your special group announcement

All you're doing is styling text, and adding a border and background color, by using Ning's built-in CSS style. Otherwise you could create your own class and apply to a div, paragraph, etc...