JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

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.

3 members favorited this

Replies to This Discussion

Permalink Reply by GirlRiders on August 10, 2011 at 4:24pm

Grey looks pretty good on my site, I'll go with that. Thanks!

Permalink Reply by Fire-Tech on August 10, 2011 at 10:23pm

Thanks Alex. The blue works great :)

Permalink Reply by JenSocial on August 10, 2011 at 10:52pm

Thank you again Fire-Tech, and you know what I'm talking about!

;-)

Permalink Reply by Fire-Tech on August 10, 2011 at 11:33pm

NP. Just need to remember to do it every now and then. Took a while for the funds to transfer. I appreciate all of your help :)

Permalink Reply by Tips by Alex/JenSocial on October 23, 2011 at 7:01am

There is no quick add file link. Members can add files only when they write blog, discussion. I don't think NING like you to setup a File Downloading site. It use huge network bandwidth. If you want share lot of files, try DropBox.com, Box.net or minus.com . And then share the links of file/folder in your NING site. These file services also allow your friends to upload files.

Permalink Reply by Tips by Alex/JenSocial on October 28, 2011 at 7:32pm

You can told your members to add a new blank blog post. Don't need to write any thing just upload files in this post. Save nd make it private. So this post is your members' own file manager. This is the way I do for my file manager. But I use Page. Since member can't use Page, teach them to use Blog.

If you think it's too time consuming. Then dropbox is the easy way. But still need to copy file, share folder, copy shared link, go to status updater, paste link, use shortener... Orz

I think write detail descriptions before people downloading the file is better. :)

Permalink Reply by Chloe Alison Prince on October 28, 2012 at 4:22pm

Alex, did you ever come up with the premium Tip for just posting the Icons, and not having the Text?

By the way, NING's Sprite Icons for these can be figured out by going into the design studio and click Customize > Links & Buttons, then go to change the color of the option called "Icons" - as you adjust it, you will notice that the icons on Settings, Inbox, Friends, and Notifications change - however, they are switching between ONLY the sprite colors available from the sprite .png file NING uses. So, if you set it to the color you like, then grab the color code of the ICON. NOT the color code in the design studio - NING just rounds up the color to the nearest sprite color that is available to display in that color.