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

What the Ningbar does

It's fixed so it will scroll down the page with you, colored highlights, rounded search query with inset colored highlights, and it's 24% transparent so it looks like colored glass. Six colors to choose from all with the same eye-catching animation.

right click on the image and open in a new tab to get a better view

 the animation will look better then this gif image file

If you don't want it to scroll down the page with you remove the top five lines of the code that look like this

#xn_bar { position: fixed !important;
z-index: 9999 !important;
top: 0 !important;
padding-bottom:8px !important; }
body{ margin-top:30px !important; }

adjusting the code. More than likely not needed

The only adjustments that may be needed on certain networks are the Fifth and sixth line down from the top

they look like this

height: 28px!important;    this will make the bar thicker or thinner..
body {margin-top:30px !important; }  and this will Lower or Raise the page body..

Compatible with newer browsers such as IE 9 & 10, Firefox, Google Chrome, mountain lion pretty much all of them LOL

Placing the code on your network

single Profile
just put the code in your design studio

whole network
Put the code in your NC custom code box, or in a stylesheet, or your main design studio, or even an ad box for your entire network..

"tip" always place the code at the bottom of where ever you're placing the code

choose your color

 

Black       right click on the image and open in a new tab for a full size view


#xn_bar { position: fixed !important;
   z-index: 9999 !important;
   top: 0 !important;
   height: 28px!important; }
body {margin-top:30px !important; }

DIV#xn_bar { background-image: url(https://api.ning.com/files/sQOLs80icDy*0jLdh5CeU8VRrNjM5B-KqyYYFB4xvn5a3Dp4Eo3o5oQOJrnBH17de8R3rRWJ5PDcZRomxw5v6*Oip6w7BIWT/Black.gif)!important;
   background-size:100% 100%!important;
   opacity: 0.76!important;
   border-bottom: 1px solid #fff!important;
   -webkit-box-shadow:0px 4px 10px #000!important;
   -moz-box-shadow:0px 4px 10px #000!important;
   box-shadow:0px 4px 10px #000!important;}
#cse-search-box input,#xn_bar_menu_search_query {border:0 none!important;
   border-radius:12px 12px 12px 12px!important;
   -moz-border-radius:12px 12px 12px 12px!important;
   -webkit-border-radius:12px 12px 12px 12px!important;
   -moz-box-shadow:0 4px 3px #000 inset!important;
   -webkit-box-shadow:0 4px 3px #000 inset!important;
   box-shadow:0 4px 3px #000 inset!important;
   outline:0 none;padding:5px 9px!important;width:135px!important; }
#xn_bar #xn_bar_menu a {color:#fff!important; }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Red          right click on the image and open in a new tab for a full size view

#xn_bar { position: fixed !important;
   z-index: 9999;
   background-color:#4a4a4a!important;
   top: 0!important;
   height: 28px!important; }
body {margin-top:30px!important; }

DIV#xn_bar { background-image: url(https://api.ning.com/files/nJ43aFllPkKzYQe20JI*CAMEGNfyVb0PRi2Dqs7SSrnL6XMiZLvakgd7AfJOaidGMqoIRln2gvm4xxp55Tx2HGuvNlFVRp9s/Red1.gif)!important;
   background-size:100% 100%!important;
   opacity: 0.76!important;
   border-bottom: 1px solid #fff!important;
   -webkit-box-shadow:0px 4px 10px #F00!important;
   -moz-box-shadow:0px 4px 10px #F00!important;
   box-shadow:0px 4px 10px #F00!important;}
#cse-search-box input,#xn_bar_menu_search_query {border:0 none!important;
   border-radius:12px 12px 12px 12px!important;
   -moz-border-radius:12px 12px 12px 12px!important;
   -webkit-border-radius:12px 12px 12px 12px!important;
   -moz-box-shadow:0 4px 3px #F00 inset!important;
   -webkit-box-shadow:0 4px 3px #F00 inset!important;
   box-shadow:0 4px 3px #F00 inset!important;
   outline:0 none;padding:5px 9px!important;width:135px!important; }
#xn_bar #xn_bar_menu a {color:#fff!important; }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
blue     right click on the image and open in a new tab for a full size view



#xn_bar { position: fixed !important;
   z-index: 9999;
   top: 0!important;
   height: 28px!important; }
body {margin-top:30px!important; }

DIV#xn_bar { background-image: url(https://api.ning.com/files/RwWjcregiv9Nexa8cAYZV*kDSqpKOBKbqibKgwJ0leWaXP-a4lvWjauy5MpoPZ*mr4MO-xLKgV5T9-fankSiFEnEKORA7G0R/Blue.gif);
   background-size:100% 100%!important;
   opacity: 0.76!important;
   border-bottom: 1px solid #fff!important;
   -webkit-box-shadow:0px 4px 10px #00f!important;
   -moz-box-shadow:0px 4px 10px #00f!important;
   box-shadow:0px 4px 10px #00f!important;}
#cse-search-box input,#xn_bar_menu_search_query {border:0 none!important;
   border-radius:12px 12px 12px 12px!important;
   -moz-border-radius:12px 12px 12px 12px!important;
   -webkit-border-radius:12px 12px 12px 12px!important;
   -moz-box-shadow:0 4px 3px #00f inset!important;
   -webkit-box-shadow:0 4px 3px #00f inset!important;
   box-shadow:0 4px 3px #00f inset!important;
   outline:0 none;padding:5px 9px!important;width:135px!important; }
#xn_bar #xn_bar_menu a {color:#fff!important; }

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Gray     right click on the image and open in a new tab for a full size view


#xn_bar { position: fixed !important;
   z-index: 9999!important;
   top: 0!important;
   height: 28px!important; }
body {margin-top:30px!important; }

DIV#xn_bar { background-image: url(https://api.ning.com/files/Jks8s5*aIX5lpyhphDQhSremU5tHARI8dkScKCzYc62XwMuTT05DoaJbDxlpEQbw9AVDNFw6VkuFnwM6VcGqePFhZIdDf*8B/Gray2.gif)!important;
   background-size:100% 100%!important;
   opacity: 0.76!important;
   border-bottom: 1px solid #fff!important;
   -webkit-box-shadow:0px 4px 10px #333!important;
   -moz-box-shadow:0px 4px 10px #333!important;
   box-shadow:0px 4px 10px #333!important; }
#cse-search-box input,#xn_bar_menu_search_query {border:0 none!important;
   border-radius:12px 12px 12px 12px!important;
   -moz-border-radius:12px 12px 12px 12px!important;
   -webkit-border-radius:12px 12px 12px 12px!important;
   -moz-box-shadow:0 4px 3px #333 inset!important;
   -webkit-box-shadow:0 4px 3px #333 inset!important;
   box-shadow:0 4px 3px #333 inset!important;
   outline:0 none;padding:5px 9px!important;width:135px!important; }
#xn_bar #xn_bar_menu a {color:#fff!important; }


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Pink    right click on the image and open in a new tab for a full size view



#xn_bar { position: fixed !important;
   z-index: 9999!important;
   top: 0!important;
   height: 28px!important; }
body {margin-top:30px!important; }

DIV#xn_bar { background-image: url(https://api.ning.com/files/FqLP4kNDB8cxw*IAh2875dVL0SSVrYXhj*ayphxjEZqFCGB8ind57bbbBYyf0pgRVb6nWneBoKKc2uU7PK1n-PTYtu5bfMaP/Pinkbe1176.gif)!important;
   background-size:100% 100%!important;
   opacity: 0.76!important;
   border-bottom: 1px solid #fff!important;
   -webkit-box-shadow:0px 4px 10px #F3F!important;
   -moz-box-shadow:0px 4px 10px #F3F!important;
   box-shadow:0px 4px 10px #F3F!important; }
#cse-search-box input,#xn_bar_menu_search_query {border:0 none!important;
   border-radius:12px 12px 12px 12px!important;
   -moz-border-radius:12px 12px 12px 12px!important;
   -webkit-border-radius:12px 12px 12px 12px!important;
   -moz-box-shadow:0 4px 3px #F3F inset!important;
   -webkit-box-shadow:0 4px 3px #F3F inset!important;
   box-shadow:0 4px 3px #F3F inset!important;
   outline:0 none;padding:5px 9px!important;width:135px!important;}
#xn_bar #xn_bar_menu a {color:#fff!important; }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Light blue  right click on the image and open in a new tab for a full size view



#xn_bar { position: fixed !important;
   z-index: 9999!important;
   top: 0!important;
   height: 28px!important;}
body{margin-top:30px!important; }

DIV#xn_bar { background-image: url(https://api.ning.com/files/-tp0SgjuXJ12TuF*0FDiJO5gmlzqQpYwoowBfoPjhO3DwuGtidep5pE104DRqFQI2J63Pg8evA1XI6lPivURrYgXLMwMKhZc/xn_bar_lite_blue.gif)!important;
   background-size:100% 100%!important;
   opacity: 0.76!important;
   border-bottom: 1px solid #fff!important;
   -webkit-box-shadow:0px 4px 10px #03F!important;
   -moz-box-shadow:0px 4px 10px #03F!important;
   box-shadow:0px 4px 10px #03F!important;}
#cse-search-box input,#xn_bar_menu_search_query {border:0 none!important;
   border-radius:12px 12px 12px 12px!important;
   -moz-border-radius:12px 12px 12px 12px!important;
   -webkit-border-radius:12px 12px 12px 12px!important;
   -moz-box-shadow:0 4px 3px #03F inset!important;
   -webkit-box-shadow:0 4px 3px #03F inset!important;
   box-shadow:0 4px 3px #03F inset!important;
   outline:0 none;padding:5px 9px!important;width:135px!important; }
#xn_bar #xn_bar_menu a {color:#fff!important; }

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

      • hahaha!  I saw your reply in the other forum to SE so I was searching for George's code and didn't want to bother you.  Outstanding!  Thank you soooo much.

        • Your most welcome, we all like to share :)

  • WOW! George, you always come out with the best tips!  I don't know how to do this- but Thank you! HHmmm just noticed this says 2012!!!

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

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels