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

[George H. Compton IV]

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(http://api.ning.com:80/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(http://api.ning.com:80/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(http://api.ning.com:80/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(http://api.ning.com:80/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(http://api.ning.com:80/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(http://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; }

[Armani Rouse]

Hey george, fantastic tip brother! I would like to add this to the headers of all my modules...how would I achieve this?

[Armani Rouse]

and which color exactly am I using on WK? LOL cant tell if its the blue or lite blue?

[Armani Rouse]

although i think its the blue! LOL but how would I add this effect to the headers of all the modules?

[George H. Compton IV]

I set it up as headers on some sites but I cannot do it with yours.  The reason is it would override your icons in the headers.  Like your music icon and the events calendar icons would just disappear.  But if you would like an individual header to stand out we can write code for that.

[Armani Rouse]

ahh makes sense! and we spent toooooo much time on those icons for me to mess that up LOL thanks George! Maybe I can have one or two modules with the header...I'll keep you posted!

[George H. Compton IV]

just let me know which modules and I'll write the code for you Armani :-)

[George H. Compton IV]

 thank you Scott You have a wonderful day :)

[GrayWitch]

Thanks works great on my site wooowooo

[George H. Compton IV]

woootwooot lol  that's great :-) you're welcome GrayWhich you have a great day

[doone]

Wow, this is fantastic!

[George H. Compton IV]

thank you for the Complement you have a great day doone

[dave]

"Run the Flash through your Wibiya Bar", Your code is great George and i have enjoyed working with it. It's a work of art.

I have added it to run through the Wibiya Toolbar, It looks great and works nice, He's the code..i hope someone like it. :-)

div#wibiya_toolbar_middle_item_holder { background-image: url(http://api.ning.com:80/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;
}