Add customize icons with share links in activity feed

I know you want icons, just like what we see in Facebook and Google+.

Now you get the TIPS!!

This tips is for everyone who put the activity feed in the main column. But if you are using NING Pro and have all functions/modules in your site. Maybe there is not enough space for you to add all icons with all the share links if your page is 3 columns layout. I'll have another tips that use ICON ONLY for the share links. You'll find that tips in Premium Tips very soon. :)

You have chooses to add icons. Using NING's icons or yours.

Let's talk about add NING's icons first. Just add the following CSS in Advanced CSS:

/* quick add link icons */

.quickadd-options-links a {

padding-left: 20px;

background-repeat: no-repeat;

background-image: url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/icons/xg_sprite-FF3333.png');

_background-image: url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/icons/ie6/xg_sprite-FF3333.png');

}

.quickadd-options-links a[data-value="post"] {

background-position: left -3251px;

}

.quickadd-options-links a[data-value="discussion"] {

background-position: left -3287px;

}

.quickadd-options-links a[data-value="event"] {

background-position: left -3321px;

}

.quickadd-options-links a[data-value="photo"] {

background-position: left -3463px;

}

.quickadd-options-links a[data-value="video"] {

background-position: left -3497px;

}

.quickadd-options-links a[data-value="music"] {

background-position: left -3394px;

}

The codes that include the background image files should be one line non-break. You can simply download or open this share_link_icon.css and copy paste. Same CSS code as above.

If you want to change the color of icons, just change background image file name. For example,

xg_sprite-3366FF.png

xg_sprite-0000FF.png

xg_sprite-FF3333.png

for xg_sprite-3366FF.png , the color is #3366FF. Use Capital.

I'm not sure how many colors NING provide. Change the hex color numbers feels like a lucky draw. :P

If you want use your own icons, add these CSS in Advanced CSS:

/* quick add link customize icons*/

.quickadd-options-links a {

padding-left: 20px;

background-repeat: no-repeat;

}

.quickadd-options-links a[data-value="post"] {

background-image: url('your-post-icon.png');

}

.quickadd-options-links a[data-value="discussion"] {

background-image: url('your-post-icon.png');

}

.quickadd-options-links a[data-value="event"] {

background-image: url('your-discussion-icon.png');

}

.quickadd-options-links a[data-value="photo"] {

background-image: url('your-photo-icon.png');

}

.quickadd-options-links a[data-value="video"] {

background-image: url('your-video-icon.png');

}

.quickadd-options-links a[data-value="music"] {

background-image: url('your-music-icon.png');

}

If you create your own icon set, please kindly share with us. Thank you.

This tips can be used with both Design Studio and old themes.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported.... Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at iYouMe.net.