Alex 小正正's Posts - Ning Design Network
2024-03-29T10:02:05Z
Alex 小正正
http://design.ning.com/profile/Alexxiaozhengzheng
http://storage.ning.com/topology/rest/1.0/file/get/1550291636?profile=RESIZE_48X48&width=48&height=48&crop=1%3A1
http://design.ning.com/profiles/blog/feed?user=0a6jrohzvnip3&xn_auth=no
Move Quick Share Links to the Bottom of Status Feed
tag:design.ning.com,2011-08-10:6330953:BlogPost:6706
2011-08-10T08:21:28.000Z
Alex 小正正
http://design.ning.com/profile/Alexxiaozhengzheng
<p>If you want the quick share links move to the bottom status feed:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/1212720503?profile=original" target="_self"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/1212720503?profile=original" width="510"></img></a> Add these in Advanced CSS:</p>
<p> </p>
<p><span style="color: #808080;"><strong><span style="font-family: 'courier new', courier;">/* status feed module */</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper{position:…</span></strong></span></p>
<p>If you want the quick share links move to the bottom status feed:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/1212720503?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/1212720503?profile=original" width="510" class="align-full"/></a>Add these in Advanced CSS:</p>
<p> </p>
<p><span style="color: #808080;"><strong><span style="font-family: 'courier new', courier;">/* status feed module */</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper{position: relative;}</span></strong></span></p>
<p><span style="color: #808080;"><strong><span style="font-family: 'courier new', courier;">/* quick-add links bar */</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .quickadd-options-links{position: absolute;<br/> bottom:2.5em; right:0;}</span></strong></span></p>
<p><span style="color: #808080;"><strong><span style="font-family: 'courier new', courier;">/* space above of the share button */</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .xj_hint_container{padding-top: 1.5em;}</span></strong></span></p>
<p><span style="color: #808080;"><strong><span style="font-family: 'courier new', courier;">/* hide share wording */</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .list-title{display:none;}</span></strong></span></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>If you want it inside the status feed input box, like Google+ style:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/1212720941?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/1212720941?profile=original" width="510" class="align-full"/></a>Use these CSS:</p>
<p> </p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper {position: relative;}</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .quickadd-options-links{position: absolute;<br/> bottom:3.2em; right:1em;}</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .input-container{padding-bottom: 1.5em !important;}</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .list-title{display:none;}</span></strong></span></p>
<p> </p>
<p> </p>
<p>Enjoy!!</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a width="100" href="http://storage.ning.com/topology/rest/1.0/file/get/301592441?profile=RESIZE_180x180" target="_self"><img width="100" src="http://storage.ning.com/topology/rest/1.0/file/get/301592441?profile=RESIZE_180x180" width="100" class="align-full"/></a>This tips can be used with both Design Studio and old themes.</p>
<p> </p>
<p><a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank"><img alt="Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License" src="http://cookbooks.adobe.com/resources/images/license_creative_commons.png"/><br/></a>This work is licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</a>. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at <a href="http://www.iyoume.net" target="_blank">iYouMe.net</a>.</p>
Add customize icons with share links in activity feed
tag:design.ning.com,2011-08-10:6330953:BlogPost:6705
2011-08-10T08:19:16.000Z
Alex 小正正
http://design.ning.com/profile/Alexxiaozhengzheng
<p> </p>
<p>I know you want icons, just like what we see in Facebook and Google+.</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/1212720396?profile=original" target="_self"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/1212720396?profile=original" width="511"></img></a></p>
<p> </p>
<p>Now you get the TIPS!!</p>
<p> </p>
<p>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…</p>
<p> </p>
<p>I know you want icons, just like what we see in Facebook and Google+.</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/1212720396?profile=original"><img class="align-full" width="511" src="http://storage.ning.com/topology/rest/1.0/file/get/1212720396?profile=original"/></a></p>
<p> </p>
<p>Now you get the TIPS!!</p>
<p> </p>
<p>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 <a target="_self" href="http://jensocial.com/group/premiumningtipsbyjen">Premium Tips</a> very soon. :)</p>
<p> </p>
<p>You have chooses to add icons. Using NING's icons or yours.</p>
<p>Let's talk about add NING's icons first. Just add the following CSS in <strong>Advanced CSS</strong>:</p>
<p> </p>
<p class="p1"><strong><span style="font-family: 'courier new', courier; color: #808080;">/* quick add link icons */</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">padding-left: <span class="s1">20</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">background-repeat: no-repeat;</span></strong></p>
<p class="p3"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"><span class="s2">background-image: url(</span>'http://static.ning.com/socialnetworkmain/widgets/index/gfx/icons/xg_sprite-FF3333.png'<span class="s2">);</span></span></strong></p>
<p class="p3"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"><span class="s2">_background-image: url(</span>'http://static.ning.com/socialnetworkmain/widgets/index/gfx/icons/ie6/xg_sprite-FF3333.png'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"post"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3251</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"discussion"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3287</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"event"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3321</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"photo"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3463</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"video"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3497</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"music"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3394</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p> </p>
<p><strong>The codes that include the background image files should be one line non-break. </strong>You can simply download or open this <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/301594191?profile=original">share_link_icon.css</a> and copy paste. Same CSS code as above.</p>
<p>If you want to change the color of icons, just change background image file name. For example, </p>
<p><span style="font-family: 'courier new', courier;">xg_sprite-3366FF.png</span></p>
<p><span style="font-family: 'courier new', courier;">xg_sprite-0000FF.png</span></p>
<p><span style="font-family: 'courier new', courier;">xg_sprite-FF3333.png</span></p>
<p> </p>
<p>for <span style="font-family: 'courier new', courier;">xg_sprite-<strong>3366FF</strong>.png</span> , the color is #3366FF. Use Capital.</p>
<p>I'm not sure how many colors NING provide. Change the hex color numbers feels like a lucky draw. :P</p>
<p> </p>
<p>If you want use your own icons, add these CSS in <strong>Advanced CSS</strong>:</p>
<p class="p1"> </p>
<p class="p1"><strong><span style="font-family: 'courier new', courier; color: #808080;">/* quick add link customize icons*/</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">padding-left: <span class="s1">20</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">background-repeat: no-repeat;</span></strong></p>
<p class="p3"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"post"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-post-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"discussion"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-post-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"event"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-discussion-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"photo"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-photo-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"video"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-video-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"music"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-music-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p> </p>
<p> </p>
<p> </p>
<p>If you create your own icon set, please kindly share with us. Thank you.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a width="100" target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/301592441?profile=RESIZE_180x180"><img class="align-full" width="100" src="http://storage.ning.com/topology/rest/1.0/file/get/301592441?profile=RESIZE_180x180"/></a>This tips can be used with both Design Studio and old themes.</p>
<p> </p>
<p> </p>
<p><a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img src="http://cookbooks.adobe.com/resources/images/license_creative_commons.png" alt="Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License"/><br/></a>This work is licensed under a <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</a>. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at <a target="_blank" href="http://www.iyoume.net">iYouMe.net</a>.</p>