Trick: How To Customize and Color Ning Site Icons

Customize the Sprite Icon for Ning Networks

Originally, I posted this Ning trick on the Creators Forum, but due to not knowing exactly how the future of Creators will go (ie how posts will transfer to their 3.0 network), i figured I'd put it over here for safe keeping.

A client asked me recently if the icon colors could be changed. Of course I knew there had to be a way to change or customize the icons that Ning serves us. So, this is the quick and dirty way to change the color of the icons. I added a single pixel stroke and a faint drop shadow to the icons to make them stand out. The original sprite image can be found sprite.png.

How to Over-ride the default icons on your Ning 3.0 network

First Choose a Premade Sprite Image (right click and copy image URL or download and reupload to your own network through a text box)

*If you need another color, let me know the HEX# in the comments below and I'll make it and upload it for you.

Second, now add the following CSS to your Advanced CSS box in Design studio and replace the red url with the sprite image you chose above. Note: If you'd like to use white icons with a single black 1px stroke, just copy and paste the following into your CSS as is.

.icon {

background-image: url('http://api.ning.com:80/files/FqkiRUfegCjyl0DZh3EOWXq20UpygEc7jEJWwSEIz2KbNseQN9vTSlXHjRWD5wn4vJRlwRDZ0FsgMvli5FJmcUScecT1sZ0b/sprite.png')!important;

}

Now you are done! Enjoy your custom icons!

If you are interested in more tricks like this, take a look at the archive on my profile. If you need help with your network, drop me a line! Happy to help..

The CSS Code to Change

.icon {

background-image: url('http://api.ning.com:80/files/FqkiRUfegCjyl0DZh3EOWXq20UpygEc7jEJWwSEIz2KbNseQN9vTSlXHjRWD5wn4vJRlwRDZ0FsgMvli5FJmcUScecT1sZ0b/sprite.png')!important;

}

Simply right click on any of the icon sets that you like > Copy Image Location and replace with the sprite.png url inside the code. Add the new blog of code to your advanced CSS section of the Design Studio on your Ning network site. Enjoy!