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

use my new discussion instead of this one.. animated ning bar!! HTML-CSS

click here for the new discussion

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

What the new ultmate 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.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

old discussion go to the one above /l\ :-)    

Six colors to choose from all with the same animation

pick your color then add the corresponding code to your NC custom code box or an ad box

it will look better than this animated gif file

 

xn_bar_red.css

<link rel="stylesheet" type="text/css" href="https://storage.ning.com/topology/rest/1.0/file/get/11387438?profile=original" />

xn_bar_black.css

<link rel="stylesheet" type="text/css" href="https://storage.ning.com/topology/rest/1.0/file/get/11387436?profile=original" />

xn_bar_blue.css

<link rel="stylesheet" type="text/css" href="https://api.ning.com/files/mlmJ3xN5S7Dl9wm1UUvfsuLz*qXBO-pKalSAXKUFnnRc0PxlpbMX7JlsYJ0C8-8Lr9PqlCezvSCVZXz7IxNaWYbzjYRl4IUj/xn_bar_blue.css" />

xn_bar_gray

<link rel="stylesheet" type="text/css" href="https://api.ning.com/files/Z4R9ldTVxXXcPZxlkrlTHG1G6rGVWgh9S0BQRlsqDXU*7cQJYKbQ1p2Cs8cIiZv7akedGx8hglOokma4a165lnui8qEMgHtl/xn_bar_gray.css" />

xn_bar_purple.css

<link rel="stylesheet" type="text/css" href="https://api.ning.com/files/5hP-CAfOoW21X5FnFL4Or5jOLvwrHmnvveH-Ltn7TMzOOHDSBQ6v8AWFSqd3Srr9xrAcLqAs9B7l-R*ZeOk0QO1JvIVBScKt/xn_bar_purple.css" />

xn_bar_lite_blue.css

<link rel="stylesheet" type="text/css" href="https://api.ning.com/files/6jocxzFU7kZ0MIn4MxqEgN*BC4MBlrg6X85ndwscCoCrOayXC6jhFZ9xaqJsICvt6PRhQyL34Tg3UpMxgLHIS2notMxBa3OV/xn_bar_lite_blue.css" />

and to make it really stand out use it with my earlier discussion

"tip" The ultimate NINGBAR Two choices Light or dark Hover affects

This ningbar took me about two hours to put together.  I've seen a lot of different versions of these but I took The best ideas out of all…

Started by George H. Compton IV in Add a Tip for Other Network Creators

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

  • Hey George, beautiful work! I'm going to use the red, but I am curious, is there a yellow possibility? (Color Code "FFFF00" is my network yellow.)

    Just curious. :) I like the red, but yellow would match obviously. If not, don't worry about it, :)

    I'm not sure if you got the message I sent you on my test network, I haven't logged on since you were there (onto the test network I mean)

    • I'm not sure can you send That message again. The last one I remember said you got it done....

      • It was regarding all the things I was curious about. :) I'll see if I can get it again...

    • He's using the images from my follow button tip here. I keep them small so they don't slow you down (it's better that he's stretching them in this application, cause you'd never see that they were distorted), but check your sites speed and make sure you are comfortable with it if you are going to replace a lot of your element backgrounds with GIFs (my header is actually a gigantic GIF). They work well as long as there aren't too many and you look like you are flying through space :)

      I threw together a yellow one for you & added it to the other tip as well. Just replace the GIF reference in Georges remote file, add the revised file to your file manager or blog and then call the new file.

      You can try the yellow, but it may wash it out a bit on your network with too much yellow. There will be minimal distinction between the modules. I'd stick with a darker color, but give it a whirl & see.

      3228627?profile=original

      I can modify the colors for anyone who needs it as long as I have the time. Post here or on my tip with the color you are looking for.

      Add this to your advanced CSS to change the color of your text & add shadows on your module headers:

      /* Module Header Text */
      .xg_theme .xg_module_head h2 {
      text-transform:none;color:#f4f4e1;text-shadow: -3px 3px 2px #000000;font-size:20px;padding: 1px;}

      If you only want to transform the text on the main page, use this instead:

      /* Module Header Text */
      .xg_widget_main .xg_module_head h2 {
      text-transform:none;color:#f4f4e1;text-shadow: -3px 3px 2px #000000;font-size:20px;padding: 1px;}

      They are the colors for my network, so play with them to your liking.

      Enjoy :)

      • yes fire tech :-) like I said in your discussion thank you for the images for the Ning bar :) they are awesome Images thank you again :-)

        • No worries. That was the point I was trying to make with Scott in my post. I can whip a few more colors together if anyone needs some help.

          I think yellow would be a bit much on his site (Damien)...unless he were to add a box shadow as well to some of the sides.....food for thought..

      • Hmmm, I've kind of grown partial to the red now, I do see your point with the yellow not being a good idea. Might make the network hard on the eyes. I did try to make the yellow work however, and failed. lol. I'm not sure what I'm doing wrong but I think I'll just stick with the red. Thank you for doing the yellow though! I hope it wasn't too much trouble!

        • Nope. No trouble at all.

          I think it looks good with the red. I'd just try the header text code I gave you & change the colors to something you like. It will add a lot more depth. You can also apply other transform properties to it as well. I just kept it basic.

          Keep it up. Lookin' good :)

        • Here. try a black one & change the code for the text to yellow & a shadow of grey or something like that. Might fit ya better.

          3233367?profile=original

          • K so this is how I'm making the red...

            /*begin animated ning bar red*/
            xn_bar_red.css

            <link rel="stylesheet" type="text/css" href="https://api.ning.com/files/s0x-6XjWb7w*G5lzLHxaUTslQQdU0KXOIpV02uOOJMKGcPQ-7jzD-lfYlqjX0A-eeDKbmOOCYvw4BnyEQCa-qrEi1uCwjO9b/xn_bar_red.css" />
            /*end ning bar red*/
            xg_module_head_red

            <link rel="stylesheet" type="text/css" href="https://api.ning.com/files/u1x2X-X0123AS2-n4g5MLmvPqVIcshRZ*6dlZSF9niErJju1yGnfdn9KU6SkE4LvpMsJ7reXb7HBt4UgtE3NYvDIrmJGFbD3/xg_module_head_red.css" />

            /*end*/

            I'm not exactly sure how to change to this black one, I will save it to my file manager like I did the yellow one, but I'm not sure how to change it to this black one...

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

Luca Boscardelli left a comment on Creatori NING Italiani
"Buongiron. Qualcuno tra voi sviluppa app collegate alle API Ning?"
Jul 5
More…

Meanwhile, you can check our social media channels