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: 941

Replies to This Discussion

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

 

Thanks Alex. The blue works great :)

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

;-)

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 :)

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.

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. :)  

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.

RSS

Members

© 2017   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips