NING TIP: 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.

Tags: activity, customize, icon, iyoume, ning, share, status, tips

Views: 593

Replies to This Discussion

Permalink Reply by The Dusk Spot on August 5, 2011 at 6:38pm
I Didnt Work Right On My Network. Rare That I Don't Get CSS To Work Especially From Yall. Check It Out
Permalink Reply by Tips by Alex/JenSocial on August 5, 2011 at 6:57pm
Pls aprove me. Then I can see the activity feed of your site.
Permalink Reply by Tips by Alex/JenSocial on August 5, 2011 at 8:10pm
ok, I didn't see you add the CSS in your site. Can you describe how you did it? Do you copy the whole code from share_link_icon.css and paste it into the Advanced CSS area?
Permalink Reply by The Dusk Spot on August 6, 2011 at 3:32am
I followed the instructions to the T. and it still didnt reflect in the finished product.
Permalink Reply by Tips by Alex/JenSocial on August 6, 2011 at 4:29am
Sorry, I can't see your screen so don't know the situation there. And many creators already use these code successfully. So maybe you need to check you code carefully with the other code you already have.
Permalink Reply by The Dusk Spot on August 6, 2011 at 11:37pm
I will inbox you a .txt file with the CSS to see what I may have done wrong.
Permalink Reply by Fire-Tech on August 7, 2011 at 9:59pm

Hey Dusk,

Have you tried it all by itself in your test network? See if it works without anything else first and then copy & add the rest of your "Advanced/Add Custom CSS" from your real network (or backup text file). You may want to try moving it to either the bottom or the top as well. Sometimes it helps it play better with others.

 

Good luck!

Permalink Reply by Mujer de vanguardia on August 6, 2011 at 7:32pm

Hi Alex.

I added it in my network, but I didn't see any change, so, I deleted it later.

But now, it (see de attachment) is in my css, and I delete it, then, save, but it is there when I look again! 

It was the last thing that I did before.

Thank you in advance.

Attachments:
Permalink Reply by Tips by Alex/JenSocial on August 7, 2011 at 2:30am

I guess you have other CSS code set the style of link ( <a> ). Especially the background. Then these code will conflict.

I add !important to this new code: share_link_icon.css

Hope it can overrite your old CSS code. Try on.

Permalink Reply by Mujer de vanguardia on August 7, 2011 at 8:46pm

Thank you Alex! 

=)

 

Permalink Reply by Fire-Tech on August 7, 2011 at 9:26pm
Works great! Thanks Alex!
Permalink Reply by The Dusk Spot on August 7, 2011 at 11:58pm
Guys I'm Done! This > Sign Here "}" at the very end of the code effected it all. it works perfectly now.

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips