Current status of the Ning Platform is always available on the Ning Status Blog.

 

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 jensocial.

 

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('https://static.ning.com/socialnetworkmain/widgets/index/gfx/icons/xg_sprite-FF3333.png');

_background-image: url('https://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 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.

 

 

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at iYouMe.net.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • That looks great, Alex! 

  • thanks

     

  • you should be working on Ning

    • LOL, I wish. :P

  • Tried your CSS code but it didn't work on our network???

    • The codes that include the image files should be one line non-break. Better to copy the codes form share_link_icon.css

      • Yes I did.. but maybe it is because we have a NING Pro account?
        "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." ??
        • If your using NING Pro, the links bar with icons are too long but still display. Maybe you lost " . ; : }... something like that. Check it out!!

          • no lost of code... but icons do not show. Yes using NING Pro in centre column.

  • Bravo, Alex! you just earned a Carlton Dance Award! This is alex's first CDA!

    1064494054.gif

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

kostasgr replied to Bizz's discussion
Tip: Adding add content links to your activity feed
"hi Bizz !!  not working ....."
1 hour ago
Bizz replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"Your welcome Fernando, glad could help
Bizz :-)"
2 hours ago
Fernando Bisbal replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"Thank you very much, I've been waiting for this for a long time ... the result is great ... attache…"
2 hours ago
Bizz replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"This will move the button for you
Add this to your custom code > end of page in your Social Site Bu…"
3 hours ago
Peggy Hines, Angel Yaqoob and Debbie joined Ning Creators Social Network
3 hours ago
Fernando Bisbal replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"I would like the button at the top of the block not at the bottom. And if the button is centered mu…"
5 hours ago
Bizz replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"Where exactly would you like the button to be ? Also there may be a way to stop non group members w…"
8 hours ago
Bizz posted a discussion
The other day I posted a tip for adding some buttons for adding content in the activity feed, the p…
8 hours ago
Bizz replied to Bizz's discussion
Tip: Adding add content links to your activity feed
10 hours ago
kostasgr replied to Bizz's discussion
Tip: Adding add content links to your activity feed
"Bizz !! .. for all its groups ... thanks !!"
21 hours ago
Fernando Bisbal replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"I would like to move only the button to enter the group, my groups have very long descriptions and…"
yesterday
Bizz posted a discussion
As you may or may not be aware the cover photos for the groups headers are cropped to a height of 1…
yesterday
More…

Meanwhile, you can check our social media channels