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

FORUM

"TIP" the new ultimate NingBar!!! six eye-catching animated colors to choose from update 2

Posted by George H. Compton IV on October 25, 2012 at 6:39pm in
Add a Tip for Other Network Creators (Ning 2)

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

Tags: query, sign, in, out, search
★
★
★
★
★
Votes: 0
Email me when people reply –
Follow

Replies

      • Kos > dave March 25, 2013 at 4:49am

        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.

        • dave > Kos March 25, 2013 at 4:51am

          Your most welcome, we all like to share :)

  • Suzie Nielsen January 29, 2022 at 11:59am

    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.

Featured Discussions

Announcements

 

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

Lady updated their profile photo
20 hours ago
bryant tutas posted a discussion
How to add multiple playlists to the NING music player
Cant figure out how to add playlists. All my loaded songs are in the same list and I don't see an …
See More
Tuesday
Angie Breidenbach updated their profile
Monday
Ning Support posted a discussion
New feature added into Group Permissions
 
We’ve expanded Group Admin capabilities with a new permission: Delete Comments
Where to find it…
See More
Sunday
kostasgr liked Alex - Rosas † Negras's discussion I managed to add group video calling, if anyone is interested I will post the codes
Jul 8
Steve C replied to ⚡JFarrow⌁'s discussion
What is going on with Ning? What Do We have to Look Forward To?
"Ning is based in California but operations are in Kyiv, Ukraine. Due to the war, operations may…"
Jul 6
NC for Hire
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"⚡JFarrow⌁  
I'm working on the stories and I don't have time to work on the video call you just…"
Jun 28
NC for Hire
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"if you want I'll give you the codes privately and we'll see if the two of us can make it perfect"
Jun 27
Eva and ⚡JFarrow⌁ are now friends
NC for Hire
Jun 25
NC for Hire
⚡JFarrow⌁ replied to Eva's discussion
For three days now, my networks, Ning 2.0 and Ning 3.0, are incorrectly visible
"Ug... thats not right..  ill send you my phone number in messages and we'll talk it over."
Jun 24
Eva replied to Eva's discussion
Help Help Help
" I just started a test network on Ning. I'm having the same problems there too! No photos, in…"
Jun 21
Eva posted a discussion
Help Help Help
https://creators.ning.com/forum/topics/for-three-days-now-my-networ...
See More
Jun 21
More…

Meanwhile, you can check our social media channels