Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support
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:
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
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
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
Welcome to
JenSocial: Social Web Directory and Ning Tips
Posted by JenSocial on May 7, 2018 at 8:35pm 8 Comments 1 Favorite
Posted by JenSocial on January 6, 2017 at 4:00pm 10 Comments 1 Favorite
Posted by JenSocial on October 22, 2016 at 1:05am 0 Comments 0 Favorites
Posted by JenSocial on September 17, 2016 at 12:00am 26 Comments 1 Favorite
Posted by JenSocial on August 31, 2016 at 3:30pm 13 Comments 0 Favorites
Ning 3.0 Tip - Add Buttons/Links Below Status Update (Quick Links to Add Photos, Posts, Discussions)
Started by Themes - Rosas Negras Mar 20, 2021. 0 Replies 0 Favorites
Started by JenSocial. Last reply by Kos Dec 6, 2016. 64 Replies 4 Favorites
Started by JenSocial. Last reply by JenSocial Jul 26, 2016. 41 Replies 1 Favorite
© 2024 Created by JenSocial. Powered by
© Copyright JenSocial.