Everyone's Blog Posts - Ning Design Network2024-03-28T09:12:58Zhttps://design.ning.com/profiles/blog/feed?xn_auth=noMove Quick Share Links to the Bottom of Status Feedtag:design.ning.com,2011-08-10:6330953:BlogPost:67062011-08-10T08:21:28.000ZAlex 小正正https://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 feedtag:design.ning.com,2011-08-10:6330953:BlogPost:67052011-08-10T08:19:16.000ZAlex 小正正https://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>Adding A Slidertag:design.ning.com,2011-06-24:6330953:BlogPost:45132011-06-24T23:00:00.000ZAnswer Ejiasihttps://design.ning.com/profile/AnswerEjiasi480
<p>The following steps will guide you through the process of creating a slider for your Ning Network. You can find an example of a slider <a href="http://tutorial01.ning.com/" target="_blank">here</a>. The default slider contains 3 slides that each include an image, text, and link. The images are 653 pixels wide, and the slider fits within the larger column of a Ning Network 2 column layout.</p>
<p> </p>
<p>If you would like to place the slider in a column other than the larger column of a 2…</p>
<p>The following steps will guide you through the process of creating a slider for your Ning Network. You can find an example of a slider <a href="http://tutorial01.ning.com/" target="_blank">here</a>. The default slider contains 3 slides that each include an image, text, and link. The images are 653 pixels wide, and the slider fits within the larger column of a Ning Network 2 column layout.</p>
<p> </p>
<p>If you would like to place the slider in a column other than the larger column of a 2 column layout, and would therefore like to determine the appropriate width for your slider, please view the possible column widths listed <a href="http://go.ning.com/studio/docs/overview/appearance_panel.html#layout" target="_blank">here</a>. Once you have determined the proper width, please update all instances where width is set to 653 pixels in all of the snippets of code listed below with your new width.</p>
<p> </p>
<p>To begin, go to “My Network" and under Tools click “Custom Code” and paste the following snippet. Notice that the number of slides, width of slider, and length of time per slide can be changed by editing this code. Also, images included in the slider must have the same width.</p>
<p><span style="color: #ff0000;"><em>* Last updated Nov. 11, 2011</em></span></p>
<p> </p>
<p><code><script type="text/javascript"><br/> (function($) {<br/>
var $previous = $("#slider_back"),<br/>
$next = $("#slider_fwd"),<br/>
$container = $("#profile_slider_inner"),<br/>
$items = $container.find(".item"),<br/>
slideWidth = $items.first().width(),<br/>
total = $items.length,<br/>
current = 1,<br/>
waitTime = 6000,<br/>
userWaitMultiplier = 1.5,<br/>
timer;<br/>
<br/>
function timerTrigger() {<br/>
changeSlide(true, true);<br/>
}<br/>
<br/>
function changeSlide(next, fromTimer) {<br/>
if (next) {<br/>
if (current === total) {<br/>
current = 1;<br/>
} else {<br/>
current++;<br/>
}<br/>
} else {<br/>
if (current === 1) {<br/>
current = total;<br/>
} else {<br/>
current--;<br/>
}<br/>
}<br/>
<br/>
$container.stop(true, true).animate({<br/>
marginLeft: -((current - 1) * slideWidth)<br/>
}, "slow");<br/>
<br/>
clearTimeout(timer);<br/>
// if slide change was caused by a user interaction then delay the<br/>
// timer to give the user additional time on their chosen slide<br/>
timer = setTimeout(timerTrigger, fromTimer ? waitTime : waitTime * userWaitMultiplier);<br/>
}<br/>
<br/>
$previous.click(function (event) {<br/>
changeSlide();<br/>
return false;<br/>
});<br/>
<br/>
$next.click(function (event) {<br/>
changeSlide(true);<br/>
return false;<br/>
});<br/>
<br/>
timer = setTimeout(timerTrigger, waitTime);<br/>
<br/>
})(jQuery);<br/>
</script><br/>
</code></p>
<p>Click "Save" and then navigate to the Design Studio by clicking on “My Network”. Under "Settings" click “Appearance”.</p>
<p> </p>
<p>Click "Advanced" and paste the following CSS snippet:</p>
<p><code>/*Slider */<br/> #profile_slider {<br/>
height:310px;<br/>
overflow:hidden;<br/>
margin-left: -5px;<br/>
margin-top: -5px;<br/>
background:#000;<br/>
}<br/>
<br/>
#profile_slider_inner {<br/>
width:100000px;<br/>
float:left;<br/>
}<br/>
<br/>
#profile_slider .item {<br/>
float:left;<br/>
width:653px;<br/>
margin:0;<br/>
position:relative;<br/>
}<br/>
<br/>
#profile_slider .item img {<br/>
margin:0;<br/>
width:653px !important;<br/>
max-width:653px !important;<br/>
}<br/>
<br/>
/* Slider Overlay Styles */<br/>
<br/>
#profile_slider .item .overlay {<br/>
margin-top:-50px;<br/>
padding:18px 18px 12px;<br/>
background:url(<a href="http://static.ning.com/design/images/60alpha.png">http://static.ning.com/design/images/60alpha.png</a>) repeat scroll 0 0;<br/>
position:absolute;<br/>
bottom:87px;<br/>
width:653px;<br/>
}<br/>
<br/>
#profile_slider .item .overlay h3 {<br/>
font-size:24px;<br/>
line-height:24px;<br/>
float:left;<br/>
text-transform:capitalize;<br/>
color:#fff;<br/>
width:520px;<br/>
}<br/>
#profile_slider .item .overlay p {<br/>
float:left;<br/>
color:#fff;<br/>
width:520px;<br/>
}<br/>
#profile_slider .item .overlay a {<br/>
color:#fff;<br/>
font-weight:bold;<br/>
text-decoration:underline;<br/>
}<br/>
<br/>
/* Slider Navigation Buttons */<br/>
<br/>
#slider_nav {<br/>
position:absolute;<br/>
bottom:30px;<br/>
right:20px;<br/>
}<br/>
<br/>
#slider_nav .btn {<br/>
height:24px;<br/>
width:29px;<br/>
float:left;<br/>
background-color:#000;<br/>
margin-right:5px;<br/>
background-position:1px 2px;<br/>
background-repeat:no-repeat;<br/>
cursor:pointer;<br/>
-moz-border-radius: 4px; /* FF1+ */<br/>
-webkit-border-radius: 4px; /* Saf3+, Chrome */<br/>
border-radius: 4px; /* Opera 10.5, IE 9 */<br/>
border:1px solid #000000;<br/>
}<br/>
<br/>
#slider_nav .btn:hover {<br/>
border:1px solid #3C78A7;<br/>
}<br/>
<br/>
#slider_back {<br/>
background-image:url(<a href="http://static.ning.com/design/images/slider_back_btn.png">http://static.ning.com/design/images/slider_back_btn.png</a>);<br/>
}<br/>
<br/>
#slider_fwd {<br/>
background-image:url(<a href="http://static.ning.com/design/images/slider_fwd_btn.png">http://static.ning.com/design/images/slider_fwd_btn.png</a>);<br/>
}<br/>
</code></p>
<p>Once you've done that, click “Publish”.</p>
<p> </p>
<p>Next, navigate to "My Network" again, and under "Settings" click "Features Layout". Insert a Text Box where you want the slider to appear, and then save your changes.</p>
<p> </p>
<p>Navigate to your homepage, which should now include a Text Box. Click the “Edit” button.</p>
<p> </p>
<p>Click the "HTML" button, and paste the following HTML code snippet:</p>
<p><code><div id="profile_slider"> <div id="profile_slider_inner"><br/> <div class="item"><br/>
<a href="<a href="http://www.google.com%22%3E%3Cimg">http://www.google.com"><img</a> src="<a href="http://static.ning.com/design/images/building.jpg%22">http://static.ning.com/design/images/building.jpg"</a>; width="653" /></a><br/>
<div class="overlay"><br/>
<h3>Slide 1 Headline</h3><br/>
<p>Sample text for slide 1 <a href="<a href="http://www.google.com%22%3EClick">http://www.google.com"></a>Link 1</a></p><br/>
</div><br/>
</div><br/>
<div class="item"><br/>
<a target="slide2" href="<a href="http://www.ning.com%22%3E%3Cimg">http://www.ning.com"><img</a> src="<a href="http://static.ning.com/design/images/post_box.jpg%22">http://static.ning.com/design/images/post_box.jpg"</a>; width="653" /></a><br/>
<div class="overlay"><br/>
<h3>Slide 2 Headline</h3><br/>
<p>Sample text for slide 2 <a href="<a href="http://www.ning.com%22%3ERead">http://www.ning.com"></a>Link 2</a></p><br/>
</div><br/>
</div><br/>
<div class="item"><br/>
<a target="slide3" href="<a href="http://www.flickr.com/%22%3E%3Cimg">http://www.flickr.com/"><img</a> src="<a href="http://static.ning.com/design/images/bridge.jpg%22">http://static.ning.com/design/images/bridge.jpg"</a>; width="653" /></a><br/>
<div class="overlay"><br/>
<h3>Slide 3 Headline</h3><br/>
<p>Sample text for slide 3 <a href="<a href="http://www.flickr.com/%22%3ELink">http://www.flickr.com/"></a>Link 3</a></p><br/>
</div><br/>
</div><br/>
<div id="slider_nav"><br/>
<a name="slider_back" class="btn" id="slider_back"></a><a name="slider_fwd" class="btn" id="slider_fwd"></a><br/>
</div><br/>
</div><br/>
</div><br/>
</code></p>
<p>Click the "HTML" button again to replace the images and text for your slides.</p>
<p> </p>
<p>When you've finished, click “Save” and be sure to refresh the browser window.</p>
<p> </p>
<p>Navigate back to your homepage and your slider should be there with updated images and text!</p>Congratulations to our Ning Design Competition winners!tag:design.ning.com,2011-05-10:6330953:BlogPost:34042011-05-10T17:09:31.000ZShali Nguyenhttps://design.ning.com/profile/ShaliNguyen
<p><a href="http://blog.ning.com/wp-content/uploads/2011/05/winners.jpg"><img class="alignnone size-full wp-image-25770" height="499" src="http://blog.ning.com/wp-content/uploads/2011/05/winners.jpg" width="582"></img></a></p>
<p>The results are in for the <a href="http://about.ning.com/studio/competition">Ning Design Competition</a>! Huge thanks go out to the design community for submitting 100+ entries. While there were only four winners, many of the submissions will also be considered for our upcoming Ning Theme Marketplace launch (stay tuned for details).</p>
<p>We’d also like to give a shout-out to our …</p>
<p><a href="http://blog.ning.com/wp-content/uploads/2011/05/winners.jpg"><img class="alignnone size-full wp-image-25770" src="http://blog.ning.com/wp-content/uploads/2011/05/winners.jpg" width="582" height="499"/></a></p>
<p>The results are in for the <a href="http://about.ning.com/studio/competition">Ning Design Competition</a>! Huge thanks go out to the design community for submitting 100+ entries. While there were only four winners, many of the submissions will also be considered for our upcoming Ning Theme Marketplace launch (stay tuned for details).</p>
<p>We’d also like to give a shout-out to our <a href="http://about.ning.com/studio/competition/#judges">panel of judges</a> for their help in determining the finalists.</p>
<p>Without further ado, here are the winners of our first-ever Ning Design Competition:</p>
<blockquote><p><strong>1st Place:</strong> <strong><a href="http://about.ning.com/studio/competition/entry-07.php" target="_blank">Kreem Theme</a></strong> by John Lee (Crackpixels)<br/><strong>2nd Place:</strong> <strong><a href="http://about.ning.com/studio/competition/entry-08.php" target="_blank">Lettercase</a></strong> by Rory McCawl<br/><strong>3rd Place:</strong> <strong><a href="http://about.ning.com/studio/competition/entry-05.php" target="_blank">The Eighth Wonder of the World</a></strong> by Brendan Falkowski (Gravity Department)</p>
</blockquote>
<p>We’re also excited to announce the winner for Community Favorite, which went out to the design receiving the most Like and Tweet votes:</p>
<blockquote><p><strong>Community Favorite Award: </strong><strong><a href="http://about.ning.com/studio/competition/entry-06.php" target="_blank">In Memoriam</a></strong> by Mario Benites</p>
</blockquote>
<p><a href="http://blog.ning.com/wp-content/uploads/2011/05/thumbs-up.jpg"><img class="alignnone size-full wp-image-25785" src="http://blog.ning.com/wp-content/uploads/2011/05/thumbs-up.jpg" width="386" height="313"/></a></p>Announcing Ning Design Competition Finaliststag:design.ning.com,2011-04-27:6330953:BlogPost:30062011-04-27T00:25:24.000ZShali Nguyenhttps://design.ning.com/profile/ShaliNguyen
<p>We’re delighted to see the amount of enthusiasm on the <a href="http://about.ning.com/studio/competition">Ning Design Competition</a>. Not only did we received far more entries than we expected, the submissions showed a huge variety with interesting elements to bring community together and re-imagined the possibilities for social website design.</p>
<p>It was certainly a difficult process but after much consideration, we’re pleased to announce the…</p>
<p>We’re delighted to see the amount of enthusiasm on the <a href="http://about.ning.com/studio/competition">Ning Design Competition</a>. Not only did we received far more entries than we expected, the submissions showed a huge variety with interesting elements to bring community together and re-imagined the possibilities for social website design.</p>
<p>It was certainly a difficult process but after much consideration, we’re pleased to announce the <a href="http://about.ning.com/studio/competition/finalists.php">top 12 finalists</a> for the Ning Design Competition to compete for the following prizes:</p>
<blockquote><p><strong>1st Place:</strong> $10,000 + trip to NYC for dinner with competition judges + one-year Ning Pro subscription<br/> <strong>2nd Place:</strong> $1,000 + 27″ Apple Cinema Display + trip to NYC for dinner with competition judges + one-year Ning Pro subscription<br/> <strong>3rd Place:</strong> $1,000 + 27″ Apple Cinema Display + trip to NYC for dinner with competition judges + one-year Ning Pro subscription<br/> <strong>Community Favorite Award:</strong> Trip to NYC for dinner with competition judges + one-year Ning Pro subscription</p>
</blockquote>
<p>While our fantastic panel of world-class designers will decide who the top three winners will be, the theme that receives the most Facebook likes and tweets will win the <strong>Community Favorite Award</strong>. Check it out and vote for your favorite before May 10 by visiting: <a href="http://about.ning.com/studio/competition/finalists.php" target="_blank">http://about.ning.com/studio/competition/finalists.php</a></p>Welcome to the Ning Design Studio Community!tag:design.ning.com,2011-02-08:6330953:BlogPost:642011-02-08T17:00:00.000ZKyle Fordhttps://design.ning.com/profile/KyleFord
<p>We've created this gathering place to let designers interested in Ning share tips, ask questions and give feedback. If you're new to the platform, here's how to get started:</p>
<p>1) <a href="http://www.ning.com/chooseplan?" target="_blank">Create a Ning Network</a> (it's free for 30 days), then enable the Ning Design Studio on the "Ning Labs" section of your "My Network" page</p>
<p>2) Read our <a href="http://about.ning.com/studio/docs" target="_blank">theme documentation</a></p>
<p>3)…</p>
<p>We've created this gathering place to let designers interested in Ning share tips, ask questions and give feedback. If you're new to the platform, here's how to get started:</p>
<p>1) <a href="http://www.ning.com/chooseplan?" target="_blank">Create a Ning Network</a> (it's free for 30 days), then enable the Ning Design Studio on the "Ning Labs" section of your "My Network" page</p>
<p>2) Read our <a href="http://about.ning.com/studio/docs" target="_blank">theme documentation</a></p>
<p>3) Ask questions in the <a href="http://design.ning.com/forum" target="_self">forum</a></p>
<p>4) Create your masterpiece!</p>
<p>We'll soon be sharing details on our upcoming Design Competition, so stay tuned!</p>