animated ning bar!! HTML-CSS

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

"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

xn_bar_black.css

xn_bar_blue.css

xn_bar_gray

xn_bar_purple.css

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

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.

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 :)

Replies

Damien Hannah October 7, 2012 at 10:33pm

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)
- George H. Compton IV > Damien Hannah October 8, 2012 at 8:58am
  
  I'm not sure can you send That message again. The last one I remember said you got it done....
  - Damien Hannah > George H. Compton IV October 8, 2012 at 7:59pm
    
    It was regarding all the things I was curious about. :) I'll see if I can get it again...
- Fire-Tech > Damien Hannah October 8, 2012 at 7:32pm
  
  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.
  
  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 :)
  - George H. Compton IV > Fire-Tech October 8, 2012 at 7:42pm
    
    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 :-)
    - Fire-Tech > George H. Compton IV October 8, 2012 at 7:57pm
      
      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..
  - Damien Hannah > Fire-Tech October 8, 2012 at 8:24pm
    
    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!
    - Fire-Tech > Damien Hannah October 8, 2012 at 8:42pm
      
      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 :)
    - Fire-Tech > Damien Hannah October 8, 2012 at 8:48pm
      
      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.
      - Damien Hannah > Fire-Tech October 8, 2012 at 9:03pm
        
        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...

of 7

This reply was deleted.

FORUM