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.

Views: 274

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:



<div class="notification">Your Text Here</div>



<div class="success">Your Text Here</div>



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
NP
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...

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips