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...

Tags: icons, override, sprite

Views: 191

Reply to This

Replies to This Discussion

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...);

interesting..im gonna see if I can wrap my mind around this when i get back home..thanks 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.

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

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.


What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next!

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums.

APIsThe ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

George H. Compton IV replied to Jeffrey Haskins's discussion 'Need way to add instruction and information to the sign up page'
"Thank you Lori. :-)"
1 hour ago
Crystal Coleman replied to Cassie Purvis's discussion 'Set a page to private, without hiding the link?'
"Hi Cassie,  Another way to accomplish this would be to keep the page in the unlinked section…"
1 hour ago
George H. Compton IV replied to Cassie Purvis's discussion 'Set a page to private, without hiding the link?'
"Hello again Cassie. :-) Hope this helps.In most cases you'll be able to just take the name of…"
1 hour ago
Crystal Coleman replied to Riccardo Rossini's discussion 'Ning: uncomprehensible behaviour'
"Hi Riccardo,  I definitely understand why you're feeling misled here. I spoke with Amanda…"
1 hour ago
Crystal Coleman replied to Stig Karlsen's discussion 'Smartphone & Tablet ready? NOT TRUE!'
"Hi Stig,  As we've covered numerous times, this is something that we do take seriously,…"
1 hour ago
Riccardo Rossini replied to Riccardo Rossini's discussion 'Ning: uncomprehensible behaviour'
"Thanks a lot Sylvia, we can keep in contact for sure"
1 hour ago
Just Asking replied to Riccardo Rossini's discussion 'Ning: uncomprehensible behaviour'
"That's too bad.  You have a beautiful site and the images I looked at were very tasteful.…"
1 hour ago
Sylvia Hysen replied to Riccardo Rossini's discussion 'Ning: uncomprehensible behaviour'
"Hi Riccardo Your site looks amazing and I'm so sorry to hear you are going through corporate…"
1 hour ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service