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>

2)Green success bar 
<div class="success"> Success ! </div>

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

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

Views: 498

Replies to This Discussion

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!
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!

The Code:
<div class="errordesc">Your warning message here</div>
thanks! :-)
hey, did this just work? what a neat tip!

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.


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

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
Great!  Thanks Elsodev.   I'll keep this in mind!
Hey Jen,

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

Thank you!

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



© 2022   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips