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

  • This reply was deleted.
    • 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.

      • This reply was deleted.
        • just let me know which modules and I'll write the code for you Armani :-)

  •  thank you Scott You have a wonderful day :)

  • Thanks works great on my site wooowooo

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

      • Wow, this is fantastic!

        • thank you for the Complement you have a great day doone

          • "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(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;
            }

            • awesome Dave :-)

              you can remove this section of the code though it will only work in the ningbar

              #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;

              • Thanks George :-) i have it running in the Wibiya bar and the ning top bar, you can see it on my site, let me know what you think :-)

                it might be a little much having them both running on the eyes.

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

Alex - Rosas † Negras replied to Suave's discussion
I AM LOOKING FOR DEVELOPER ASSISTANCE WITH ADDING AUTOMATIC MUSIC TO MY HOME PAGE
"if you need I'm here, if you look in my discussions you will also find the playstil"
yesterday
Alex - Rosas † Negras replied to ⚡JFarrow⌁'s discussion
What is going on with Ning? What Do We have to Look Forward To?
"Bizz ⚡JFarrow⌁ 
I'm sorry that many like us have worked so hard and given up, but at least I'm…"
yesterday
⚡JFarrow⌁ posted a discussion
Back in the day, this community was jumping with activity.   But since the Ukraine war broke out we…
yesterday
⚡JFarrow⌁ and Truebook are now friends
yesterday
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I want to thank JOHN BIZLEY ( BIZZ) for his invaluable help, active icons on the Ning bar,CODES ADDED
"A thousand thanks"
Tuesday
Alex - Rosas † Negras replied to Pam Givens's discussion
Landing Page
"Pam Givens this is an example i created of an old 3.0 site"
Tuesday
Alex - Rosas † Negras replied to Pam Givens's discussion
Landing Page
""
Tuesday
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
Sorry for my absence
"Pam Givens hi my friend, yes everything is ok a big hug"
Monday
Alex - Rosas † Negras replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"⚡JFarrow⌁  hi my bro! the situation is sad, Biz and all the programmers are missing, once we all…"
Monday
Alex - Rosas † Negras and Truebook are now friends
Monday
Melissa V updated their profile
May 7
conversor de letras updated their profile
May 7
More…

Meanwhile, you can check our social media channels