Overriding Ning's Sprite Image

[JFarrow]

Has anyone ever been able to successfully override Ning's default sprite image to produce different icons throughout the network?

I've grown tired of the default Ning sprite image...would love to know if anyone else has explored this...

[Chris]

Should be *relatively* simple, just override the one CSS statement that gives the sprite URL with your own url to your image. The tricky bit is creating your own image where all the sprites are the same size and in the same order as Ning's... Otherwise you have a real headache re-defining each sprite's position within your new image.

On creators, it's this line in the theme css file http://static.ning.com/creators/instances/css/theme-982_1356245232....

.xg_sprite, .xg_icon, .rich-comment, .rich-comment em, .delete, .smalldelete, .activity-delete, ul.rating-themed, ul.rating-themed a:hover, ul.rating-themed a:active, ul.rating-themed a:focus, ul.rating-themed .current {
background-image: url(http://static.ning.com/socialnetworkmain/widgets/index/gfx/icons/xg...);
_background-image: url(http://static.ning.com/socialnetworkmain/widgets/index/gfx/icons/ie...);
}

[JFarrow]

interesting..im gonna see if I can wrap my mind around this when i get back home..thanks Chris..

[Chris]

Check out the sprite image. It's one very tall image with loads of small icons. I think there is a large version too, and maybe an icon version, you'll find them with an inspector browsing your site. The positions are critical, as each sprite is simply the whole image as background, positioned exactly e.g.

.xg_sprite-comment {
     background-position: left -401px;
}

slides it up 401px until the comment icon is in view in the element.

The colour is defined in the png's name in hex, in this case it's 336699, look for the one in your network that matches your theme and go from that. Probably a good day's work in photoshop to replace them all with the images you want.

[Doug Lowthian]

Forgive my ignorance....what is the "sprite" image and where is it on Ning sites?

[Chris]

The "sprite" image is actually all the little icons you see on the site, all together in one image to make page loading faster and coding simpler. Imagine a very long piece of tape, with lots of little pictures on, all the same size. The envelope icon, the star icon, the alerts icon, the comment icon, the delete, edit, add, view icons and all the rest.  All the little blue pics you see on this page. Then imagine a piece of paper with a hole cut in it, big enough for only one of these images. Hold the paper in front of the tape, and slide the tape up and down. You only see one image at a time. That's how the sprite image is used, with css. See this page for examples http://www.w3schools.com/css/css_image_sprites.asp or open the links in my comment above to see the sprite image for the creators icons. You'll have to zoom in lots as your browser will shrink it to fit in the window... It will be tiny, and on the very left of the page.