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.

Views: 1067

Replies to This Discussion

Congratulations!!

Oh no! Poor thing. I'm so sorry I didn't get to look and try to help. I started to 3 or 4 times, and the phone would ring or a fire to put out.

Happy you found it!

Jen

My color didn't work.  Anyone know a color close to dark pink that works?  I usually use BE1176
how about make your own icons? need help? If you fined a set of icons that you want to use, I can modify it for you. I'm also looking for other nice icons for these.
Thank you Alex, I can do it, just need to find the time.  If I find some I'll let you know.   I may end up just saving and modifying Ning's icons to be the color I want.   They're so small, I think they need to be pretty basic.   Although Jen has called me the "Queen of Tiny Icons",  lol
WOW! "Queen of Tiny Icons"~~ your highness
Yes, indeed you are the Queen. ;-) And Alex is the new King of Ning Tips!
LIKE!

You are so good! Alex, thank you for these invaluable (GREAT) contributions. I thought I had thanked you when you added this awesome tip, and find that I did not. Please forgive my oversight. *blush*

Thank you!

Jen

Jen you are very welcome. I love to share things and interact with all of you here. The feel and interact way are very different from with Taiwan or China people. I think it's because of the life style, culture something. But I really enjoy here better than my home country sometimes. I hope I can help more people and let them happy in the way I do.

Very cool Alex! Interesting about the interaction being very different. I worked for a large Chinese Corporation in San Jose, CA. I experienced what you have said here. I freaked them out a little, LOL. I think they thought when I was being nice, I wasn't for real. LOL It was a great experience though.

Best Regards,

Jen

I found a grey version icon image set xg_sprite-666666.png

and blue one xg_sprite-0099CC.png

RSS

Members

© 2019   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips