tips - FORUM - Ning Creators Social Network2024-03-28T15:14:51Zhttps://creators.ning.com/forum/topics/feed/tag/tipsAudio/Video Call - Start Google Meet on each members page ( Browser Popup Window )https://creators.ning.com/forum/topics/audio-video-call-start-google-meet-on-each-members-page2023-02-16T08:35:23.000Z2023-02-16T08:35:23.000ZAlex - Rosas † Negrashttps://creators.ning.com/members/RosasNegras<div><p><a href="{{#staticFileLink}}10968173485,RESIZE_1200x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10968173485,RESIZE_710x{{/staticFileLink}}" alt="10968173485?profile=RESIZE_710x" width="710" /></a></p></div>who doesn't want the new Ning function like me, these are the css to eliminate it.https://creators.ning.com/forum/topics/who-doesn-t-want-the-new-ning-function-like-me-these-are-the-cs-12023-01-09T17:23:13.000Z2023-01-09T17:23:13.000ZAlex - Rosas † Negrashttps://creators.ning.com/members/RosasNegras<div><p><a href="{{#staticFileLink}}10928033468,RESIZE_1200x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10928033468,RESIZE_710x{{/staticFileLink}}" width="710" alt="10928033468?profile=RESIZE_710x" /></a></p><p> </p><p>button.button.EditButton.jsEditButton {<br />display:none!important</p><p>}</p></div>Instagram-style Ning 3.0 contours to make our site more modern, whoever wants the css I will publish them for you NChttps://creators.ning.com/forum/topics/instagram-style-ning-3-0-contours-to-make-our-site-more-modern-wh2022-10-07T13:57:47.000Z2022-10-07T13:57:47.000ZAlex - Rosas † Negrashttps://creators.ning.com/members/RosasNegras<div><p><a href="{{#staticFileLink}}10836497665,RESIZE_710x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10836497665,RESIZE_710x{{/staticFileLink}}" width="655" alt="10836497665?profile=RESIZE_710x" /></a></p><p> </p><p><a href="{{#staticFileLink}}10836497293,RESIZE_710x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10836497293,RESIZE_710x{{/staticFileLink}}" width="616" alt="10836497293?profile=RESIZE_710x" /></a></p></div>ACCESSIBILITY STATEMENT - THE PERFECT FUNCTION TO RESPECT THE LAWS AND PEOPLE WITH HANDICAPShttps://creators.ning.com/forum/topics/accessibility-statement-the-perfect-function-to-respect-the-laws-2022-08-22T15:16:49.000Z2022-08-22T15:16:49.000ZAlex - Rosas † Negrashttps://creators.ning.com/members/RosasNegras<div><p><iframe title="YouTube video player" src="https://www.youtube.com/embed/Maj3-N96xu0" width="660" height="415" frameborder="0" allowfullscreen=""></iframe></p></div>ONE TIME WE HAD OUR OLD CLASSIC SITE BADGE AND 2.0 NOW IT IS POSSIBLE TO HAVE IT WITH 3.0 THIS IS WHAT I FOUND.https://creators.ning.com/forum/topics/one-time-we-had-our-old-classic-site-badge-and-2-0-now-it-is-poss2022-07-29T17:52:37.000Z2022-07-29T17:52:37.000ZAlex - Rosas † Negrashttps://creators.ning.com/members/RosasNegras<div><p><a href="{{#staticFileLink}}10733261078,original{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10733261078,RESIZE_710x{{/staticFileLink}}" alt="10733261078?profile=RESIZE_710x" width="710" /></a></p><p><a href="{{#staticFileLink}}10733261101,original{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10733261101,RESIZE_710x{{/staticFileLink}}" alt="10733261101?profile=RESIZE_710x" width="710" /></a></p><p>AND THIS IS THE VISIBLE RESULT IN HTML<a href="{{#staticFileLink}}10733271460,RESIZE_930x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10733271460,RESIZE_710x{{/staticFileLink}}" alt="10733271460?profile=RESIZE_710x" width="710" /></a></p><p> </p><p><a href="https://embed.ly/button" target="_blank">https://embed.ly/button</a></p></div>voice search for Ning 3.0 being processed for a drawinghttps://creators.ning.com/forum/topics/voice-search-for-ning-3-0-being-processed-for-a-drawing2022-06-27T09:49:42.000Z2022-06-27T09:49:42.000ZAlex - Rosas † Negrashttps://creators.ning.com/members/RosasNegras<div><p><a href="{{#staticFileLink}}10598509480,original{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10598509480,RESIZE_710x{{/staticFileLink}}" alt="10598509480?profile=RESIZE_710x" width="710" /></a></p><p><a href="https://ningthemes3.com/" target="_blank">Ning Themes 3.0</a></p></div>stylized full input textareahttps://creators.ning.com/forum/topics/stylized-full-input-textarea2022-05-17T19:50:06.000Z2022-05-17T19:50:06.000ZAlex - Rosas † Negrashttps://creators.ning.com/members/RosasNegras<div><p><a href="{{#staticFileLink}}10496673687,RESIZE_710x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10496673687,RESIZE_710x{{/staticFileLink}}" width="636" alt="10496673687?profile=RESIZE_710x" /></a><a href="{{#staticFileLink}}10496674053,RESIZE_710x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10496674053,RESIZE_710x{{/staticFileLink}}" width="635" alt="10496674053?profile=RESIZE_710x" /></a></p><p> </p><p>textarea.input-full { <br />border: 2px groove #FFF;padding:<br />border: 0px solid rgba(100, 100, 100, 1);<br /> border-radius: 10px;<br /> background:<br /> radial-gradient(<br /> 93% 93% at 8% 128%,<br /> rgba(255, 238, 194, 1) 0%,<br /> rgba(255, 238, 194, 0.2) 60%,<br /> rgba(194, 233, 255, 0) 100%<br /> ),<br /> radial-gradient(<br /> 49% 88% at 27% -14%,<br /> rgba(93, 227, 236, 0.73) 0%,<br /> rgba(93, 227, 236, 0.17) 60%,<br /> rgba(93, 227, 236, 0) 100%<br /> ),<br /> radial-gradient(<br /> 115% 156% at 90% 89%,<br /> rgba(75, 254, 222, 1) 0%,<br /> rgba(75, 254, 222, 0) 100%<br /> ),<br /> linear-gradient(<br /> 234deg,<br /> rgba(69, 74, 187, 1) 25%,<br /> rgba(69, 74, 187, 0.77) 35%,<br /> rgba(69, 74, 187, 0.4) 50%,<br /> rgba(91, 196, 229, 0) 84%<br /> ),<br /> radial-gradient(<br /> 119% 119% at 3% 26%,<br /> rgba(48, 142, 230, 1) 0%,<br /> rgba(48, 158, 230, 0) 74%<br /> ),<br /> linear-gradient(<br /> 360deg,<br /> rgba(242, 245, 250, 1) 0%,<br /> rgba(242, 245, 250, 1) 100%<br /> );</p><p><br />}</p></div>Ning 3.0 - Sign up Sign in box stylizedhttps://creators.ning.com/forum/topics/ning-3-0-sign-up-sign-in-box-in-stylized-progression2022-02-15T01:20:48.000Z2022-02-15T01:20:48.000ZAlex - Rosas † Negrashttps://creators.ning.com/members/RosasNegras<div><p><a href="{{#staticFileLink}}10106430466,RESIZE_1200x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10106430466,RESIZE_710x{{/staticFileLink}}" alt="10106430466?profile=RESIZE_710x" width="710" /></a></p><p><a href="{{#staticFileLink}}10106437463,RESIZE_710x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}10106437463,RESIZE_710x{{/staticFileLink}}" alt="10106437463?profile=RESIZE_710x" width="639" /></a></p><p>/*first box sign in and sign up */<br />div#popupLogin.sign_form::before,div#popupLogin.sign_form::after { <br />background: #c19aac url(<a href="{{#staticFileLink}}8797906061,original{{/staticFileLink}}">{{#staticFileLink}}8797906061,original{{/staticFileLink}}</a>) !important;<br />background-repeat: repeat !important;</p><p>}</p><p>div.lf-input__wrap {</p><p>background: white; <br /> border: 1px solid #ffa853; <br /> border-radius: 5px; <br /> box-shadow: 0 0 5px 3px #ffa853; <br /> color: #666;</p><p>}<br />div.lf-subtitle, div.auth_copy,h1.lf-title,div.lf-description,div.signUp_signIn__link {<br />padding-left: 21px !important; padding-right: 20px !important;<br />text-decoration: none !important;<br />font-family: times, constantia, Avant Garde;<br />font-style:normal;<br />font-weight:normal;<br />font-size: 14px !important;<br />color: #eed255!important;</p><p>}<br />/* second box sign up */<br />div.sign_form.sign_form_p2::before,div.sign_form.sign_form_p2::after { <br />background: #c19aac url(<a href="{{#staticFileLink}}8797906061,original{{/staticFileLink}}">{{#staticFileLink}}8797906061,original{{/staticFileLink}}</a>) !important;<br />background-repeat: repeat !important;</p><p><br />}<br />h2.lf-subtitle {<br />color: #FFF!important;<br />}</p></div>Logo animation as soon as a member entershttps://creators.ning.com/forum/topics/logo-animation-as-soon-as-a-member-enters2022-02-11T12:56:22.000Z2022-02-11T12:56:22.000ZAlex - Rosas † Negrashttps://creators.ning.com/members/RosasNegras<div><p style="text-align:center;"><iframe title="YouTube video player" src="https://www.youtube.com/embed/qe3kbASliJ4" width="1000" height="500" frameborder="0" allowfullscreen=""></iframe></p><p style="text-align:center;">Design Studio,Custom CSS,Global CSS</p><p style="text-align:center;">img.header-logoIMG { <br /><br />-webkit-animation-name: zoomInDown;<br />animation-name: zoomInDown;<br />-webkit-animation-duration: 1s;<br />animation-duration: 1s;<br />-webkit-animation-fill-mode: both;<br />animation-fill-mode: both;<br />}<br />@-webkit-keyframes zoomInDown {<br />0% {<br />opacity: 0;<br />-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);<br />transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);<br />-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);<br />animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);<br />}<br />60% {<br />opacity: 1;<br />-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);<br />transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);<br />-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);<br />animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);<br />}<br />}<br />@keyframes zoomInDown {<br />0% {<br />opacity: 0;<br />-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);<br />transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);<br />-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);<br />animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);<br />}<br />60% {<br />opacity: 1;<br />-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);<br />transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);<br />-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);<br />animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);<br />}<br />}<br />}</p><p style="text-align:center;"> </p></div>TIP TOP TRICK ← Organic SEO and Your Community using Language Editorhttps://creators.ning.com/forum/topics/tip-top-trick-organic-seo-and-your-community2021-07-23T19:29:42.000Z2021-07-23T19:29:42.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p><span style="font-size:14pt;">Ok, the more i think about it, the more this may become the part one of about a 3 part series. Just gonna share a few things which can have long term impact on your search engine rankings AND increase engagement. </span></p><p><span style="font-size:14pt;">Language Editor Tweaks:</span></p><p> </p><p><span style="font-size:14pt;">1) Would you rather click this</span></p><p><a href="{{#staticFileLink}}9298520697,RESIZE_710x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}9298520697,RESIZE_710x{{/staticFileLink}}" alt="9298520697?profile=RESIZE_710x" width="636" /></a></p><p style="text-align:center;"><span style="font-size:24pt;">or</span></p><p style="text-align:center;"><span style="font-size:24pt;"><a href="{{#staticFileLink}}9298521866,RESIZE_930x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}9298521866,RESIZE_710x{{/staticFileLink}}" alt="9298521866?profile=RESIZE_710x" width="710" /></a></span></p><p style="text-align:center;"><span style="font-size:24pt;"><span style="font-size:14pt;">Replace the term "Back to Edit" in the language editor to something more click worthy.</span></span></p><p style="text-align:center;"><span style="font-size:24pt;"><span style="font-size:14pt;"><a href="{{#staticFileLink}}9298528679,RESIZE_930x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}9298528679,RESIZE_710x{{/staticFileLink}}" alt="9298528679?profile=RESIZE_710x" width="710" /></a></span></span></p><p style="text-align:center;"><span style="font-size:24pt;"><span style="font-size:14pt;">Why? Look how fast the return to edit screen happens </span></span></p><p style="text-align:center;"><span style="font-size:24pt;"><span style="font-size:14pt;"><a href="{{#staticFileLink}}9298522275,RESIZE_930x{{/staticFileLink}}"><img class="align-center" src="{{#staticFileLink}}9298522275,RESIZE_710x{{/staticFileLink}}" alt="9298522275?profile=RESIZE_710x" width="710" /></a></span></span></p><hr /><p style="text-align:left;"><span style="font-size:14pt;">2) Run a search in the Language editor for "All Photos" "All Videos " "All Events" ect and change them to reflect more about what your community is about...</span></p><p style="text-align:left;"><span style="font-size:14pt;">Change all the places throughout your community where it says as a default ".......this.." and change it to something better for your Search Engine Optimization....</span></p><p style="text-align:left;"> </p><p style="text-align:left;"> </p><p style="text-align:left;"> </p><p style="text-align:left;"><span style="font-size:24pt;"><strong>Related Posts </strong></span></p><h3 class="entry-title"><a href="https://creators.ning.com/forum/topics/how-to-hack-the-welcome-email-part-1">How-to Hack The Welcome Email Part 1</a></h3><h3 class="entry-title"><a href="https://creators.ning.com/forum/topics/how-to-hack-the-welcome-email-part-2">How-to Hack The Welcome Email Part 2</a></h3><h3 class="entry-title"><a href="https://creators.ning.com/forum/topics/how-to-hack-the-welcome-email-part-3">How-to Hack The Welcome Email Part 3</a></h3><p style="text-align:left;"><span style="font-size:14pt;"><a href="https://creators.ning.com/xn/detail/6651893:DiscussionEntry:1379285">Quick Language Editor Tip N2/N3: Explanation Before Signup</a></span></p><p style="text-align:left;"><span style="font-size:14pt;"><a href="https://creators.ning.com/xn/detail/6651893:DiscussionEntry:1644808">How to Reinstall your Lost Attachments / Files after Migration from N2-N3</a></span></p><p style="text-align:left;"><span style="font-size:14pt;"><a href="https://creators.ning.com/xn/detail/6651893:DiscussionEntry:1604947">Quick TIP N3.0: how to change Genres inside Audio Feature</a></span></p><p style="text-align:left;"><span style="font-size:14pt;"> <a href="https://creators.ning.com/xn/detail/6651893:DiscussionEntry:1610538">Tip 2.0 or 3.0: Small SEO Tip for "Popular Videos"</a></span></p><p style="text-align:center;"> </p></div>69 Tips for your Ning 3 thanks to John Bizleyhttps://creators.ning.com/forum/topics/69-tips-for-your-ning-3-thanks-to-john-bizley2020-09-24T20:52:00.000Z2020-09-24T20:52:00.000ZJ.Ayvarhttps://creators.ning.com/members/EsPasioncom<div><p><span style="font-size:14pt;"> </span></p><p><span style="font-size:12pt;">Some time ago <a href="https://creators.ning.com/ning-superstar-john-bizley" target="_blank">Mr. John Bizley</a> kindly shared some amazing tips and every time I start a new project I turn to them for inspiration. I hope it can help or inspire you as well.</span></p><p><span style="font-size:12pt;"> </span></p><p><span style="font-size:12pt;"> </span></p><p><span style="font-size:12pt;"> </span></p><div class="media-body" style="text-align:center;"><ol><li class="entry-title" style="text-align:center;"><span style="font-size:12pt;"><strong><a href="https://creators.ning.com/forum/topics/how-to-make-some-design-changes-to-your-sub-menu-s-ie-categories-">How To Make Some Design Changes To Your Sub Menu's ie Categories etc And TabContainers</a></strong></span></li></ol><p class="entry-content"><span style="font-size:12pt;"> </span></p><p><span style="font-size:12pt;">In our design studio we can make just about every change to the menus and links we need all that is except for our sub nav menus. These menus are thing like the categories above a page, group nav menus and also in our email. The other area we can't m</span></p><p><span style="font-size:12pt;"> </span></p><span style="font-size:12pt;"><strong><a class="entry-readMore" href="https://creators.ning.com/forum/topics/how-to-make-some-design-changes-to-your-sub-menu-s-ie-categories-">Read more</a></strong></span><div class="entry-byline"><span style="font-size:12pt;"> </span></div><div class="entry-byline"><span style="font-size:12pt;"> </span></div></div><div class="media-body" style="text-align:center;"><p style="text-align:center;"><span style="font-size:12pt;"><strong><a href="https://creators.ning.com/forum/topics/how-to-add-missing-blog-filter">How To Add Missing Blog Filter</a></strong></span></p><p class="entry-content"><span style="font-size:12pt;"> </span></p><p><span style="font-size:12pt;">One thing that is missing in the blogs pages is the chance to filter by Newest, Most Popular and Latest Activity, this is available in forums but not blogs so here is a way to be able to add one.</span></p><p><span style="font-size:12pt;">Maybe this is something the new Ning team could add bu</span></p><p><span style="font-size:12pt;"> </span></p><span style="font-size:12pt;"><a class="entry-readMore" href="https://creators.ning.com/forum/topics/how-to-add-missing-blog-filter">Read more</a></span></div><p><span style="font-size:12pt;"> </span></p><div class="media-body" style="text-align:center;"><h3 class="entry-title" style="text-align:center;"><span style="font-size:12pt;"><a href="https://creators.ning.com/forum/topics/little-enhancements-for-the-like-comments-icons-for-the-activity-">Little enhancements for the Like, Comments icons for the activity feed</a></span></h3><p class="entry-content"><span style="font-size:12pt;"> </span></p><p><span style="font-size:12pt;">These small bit sof code will give you a few little changes to your like icon and comments icon plus a small separator for when someone replies to a comment etc this is explained better in the images below.</span></p><p><span style="font-size:12pt;">Here is the after view from adding the cod</span></p><p><span style="font-size:12pt;"> </span></p><span style="font-size:12pt;"><em><strong><a class="entry-readMore" href="https://creators.ning.com/forum/topics/little-enhancements-for-the-like-comments-icons-for-the-activity-">Read more</a></strong></em></span></div><p><span style="font-size:12pt;"> </span></p><div class="media-body" style="text-align:center;"><h3 class="entry-title" style="text-align:center;"><span style="font-size:12pt;"><a href="https://creators.ning.com/forum/topics/all-the-code-i-used-to-create-my-social-channels-player">All The Code I used To Create My Social Channels Player</a></span></h3><p class="entry-content"><span style="font-size:12pt;"> </span></p><p><span style="font-size:12pt;">Here is all the code I used for changing how my social channels player looks. Rather than open a small player at the top of the site I created a much bigger player that covers the screen, also when viewed from a social channels page rather than one i</span></p><p><span style="font-size:12pt;"> </span></p><span style="font-size:12pt;"><strong><a class="entry-readMore" href="https://creators.ning.com/forum/topics/all-the-code-i-used-to-create-my-social-channels-player">Read more</a></strong></span></div><p><span style="font-size:12pt;"> </span></p><div class="media-body" style="text-align:center;"><h3 class="entry-title" style="text-align:center;"><span style="font-size:12pt;"><a href="https://creators.ning.com/forum/topics/testing-new-tip-for-viewing-items-from-activity-feed-without-leav">Testing New Tip For Viewing Items From Activity Feed Without Leaving The Page</a></span></h3><p class="entry-content"><span style="font-size:12pt;"> </span></p><p><span style="font-size:12pt;">This is a tip I have re-written, still tweaking a bit before posting the code, that I thought you might like. Basically when you or a member posts a status on the activity feed and then other members comment on it the comments can get quite long, als</span></p><p><span style="font-size:12pt;"> </span></p><span style="font-size:12pt;"><strong><a class="entry-readMore" href="https://creators.ning.com/forum/topics/testing-new-tip-for-viewing-items-from-activity-feed-without-leav">Read more</a></strong></span></div><p><span style="font-size:12pt;"> </span></p><div class="media-body" style="text-align:center;"><h3 class="entry-title" style="text-align:center;"><span style="font-size:12pt;"><a href="https://creators.ning.com/forum/topics/how-to-get-the-social-channels-working-in-tab-containers">How To Get The Social Channels Working In Tab Containers</a></span></h3><p class="entry-content" style="text-align:center;"><span style="font-size:12pt;"> </span></p><p style="text-align:center;"><span style="font-size:12pt;">Let's say you have some social channel pages but you would like to add a TabContainer on another page for example and that by using the add content insert certain social channels into a tabContainer. Now that is all pretty easy to do as it's just lik</span></p><p style="text-align:center;"><span style="font-size:12pt;"> </span></p><span style="font-size:12pt;"><strong><a class="entry-readMore" href="https://creators.ning.com/forum/topics/how-to-get-the-social-channels-working-in-tab-containers">Read more</a></strong></span><div class="entry-byline" style="text-align:center;"><span style="font-size:12pt;">Started by <a href="https://creators.ning.com/members/Bizz">Bizz ( John )</a> in</span><br /> <span class="cat1" style="font-size:12pt;"> <a href="https://creators.ning.com/forum/topics/Ning+3+Tips+and+Tricks">Ning 3 Tips and Tricks</a></span></div></div><p><span style="font-size:12pt;"> </span></p><div class="media-body" style="text-align:center;"><h3 class="entry-title" style="text-align:center;"><span style="font-size:12pt;"><a href="https://creators.ning.com/forum/topics/how-to-move-the-more-categories-link-back-into-the-navigation-men">How To Move the 'More' categories link back into the navigation menu</a></span></h3><p class="entry-content"><span style="font-size:12pt;"> </span></p><p><span style="font-size:12pt;">Small tip here to help those who have a lot of categories which will make the 'More' link show up. When it does it tends to sit right out to the right hand side away from the main categories menu. This line of code will bring it back into the categor</span></p><p><span style="font-size:12pt;"> </span></p><span style="font-size:12pt;"><strong><a class="entry-readMore" href="https://creators.ning.com/forum/topics/how-to-move-the-more-categories-link-back-into-the-navigation-men">Read more</a></strong></span></div><p><span style="font-size:12pt;"> </span></p><div class="media-body" style="text-align:center;"><h3 class="entry-title" style="text-align:center;"><span style="font-size:12pt;"><a href="https://creators.ning.com/forum/topics/how-to-remove-the-white-space-in-the-photo-viewer-for-different-s">How To Remove The White Space In The Photo Viewer For Different Size Photos</a></span></h3><p class="entry-content"><span style="font-size:12pt;"> </span></p><p><span style="font-size:12pt;">Here is one of my classic tips for removing the white space around different size photos when viewing them in the photo viewer. Normally when you have different size photos the smaller ones tend to have a lot of white space around them, this CSS code</span></p><p><span style="font-size:12pt;"> </span></p><span style="font-size:12pt;"><em><strong><a class="entry-readMore" href="https://creators.ning.com/forum/topics/how-to-remove-the-white-space-in-the-photo-viewer-for-different-s">Read more</a></strong></em></span><div class="entry-byline"><span style="font-size:12pt;"> </span></div><div class="entry-byline"><span style="font-size:12pt;"> </span></div><div class="entry-byline"><span style="font-size:12pt;"> </span></div><div class="entry-byline"><span style="font-size:12pt;"> </span></div><div class="entry-byline"><span style="font-size:18pt;"> </span></div><div class="entry-byline"><span style="font-size:18pt;"><strong><a href="https://creators.ning.com/members/Bizz/content?type=DiscussionEntry&context=all&page=1" target="_blank"> MORE tips! </a></strong></span></div><div class="entry-byline"><span style="font-size:12pt;"> </span></div><div class="entry-byline"><span style="font-size:12pt;"><strong>Thanks to John Bizley.</strong></span></div><div class="entry-byline"> </div><div class="entry-byline"> </div></div></div>Playing Videos In Activity Feed Tiphttps://creators.ning.com/forum/topics/playing-videos-in-activity-feed-tip2020-03-29T15:10:33.000Z2020-03-29T15:10:33.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>I was asked if I could post this tip again so here is the code needed. The tip allows your videos to be played in the activity feed, so when a user clicks on the video it is replaced by the video itself. When a user clicks on the link of the video etc they will still go to the main video page.</p><p>You can see an example here : <a href="https://jr-images.ning.com/" target="_blank">https://jr-images.ning.com/</a></p><p>First we need to add some custom code which goes in your Social Site Manager > Custom Code > End Of Page</p><p> </p><p><script><br />//If videos are iframed then css makes them responsive<br />x$(document).ready(function() {<br />if (x$('.videoDetailPage-video iframe').length > 0) {<br />x$('.videoDetailPage-video').addClass('iframed');<br />}<br />});<br /></script></p><p><script><br />x$(document).ready(function(){<br />var activityVideoMedia = '.feedEvent-createVideoRollup .activityFeed-content a.media-img,.feedEvent-createVideoLike .activityFeed-content a.activityFeed-image,.feedEvent-createVideoComment .activityFeed-content a.media-img, .feedEvent-createVideoRollup .activityFeed-content a.activityFeed-image,.feedEvent-featureVideo .activityFeed-content a.media-img';<br />var activityVideoMedia = '.feedEvent-createVideoRollup .activityFeed-content a.media-img,.feedEvent-createVideoLike .activityFeed-content a.activityFeed-image,.feedEvent-createVideoComment .activityFeed-content a.media-img, .feedEvent-createVideoRollup .activityFeed-content a.activityFeed-image,.feedEvent-featureVideo .activityFeed-content a.media-img';<br /> x$('body').on('click', activityVideoMedia, function(e){<br /> e.preventDefault();<br />var titleURL = x$(this).attr('href');<br />x$('.activityShowMe-container').remove();<br />x$('.feedEvent-createVideoLike .activityFeed-content a.activityFeed-image').addClass("media-img");<br />x$('.activityFeed-content').removeClass('videoActiveContent');<br />x$('.activityFeed-videos, .eventPage-image-wrapper').removeClass("ActivityvideoActive");<br />x$(document.body).css({ 'cursor': 'wait'});<br />x$(activityVideoMedia).slideDown(500);<br />x$(this).parent().addClass("ActivityvideoActive");<br />x$('.ActivityvideoActive').closest('.activityFeed-content').addClass('videoActiveContent');<br />x$(this).parent().append('<div class="activityShowMe-container"><div class="activityShowMe-header"><a class="activityShowMe-closer" title="Close the Video">X</a></div><div class="activityShowMe">Video Loading...</div><div class="activityShowMe-page"><a class="activityShowMe-comment">Comments</a><a class="myTitleLink" title="View In Main Video Page">View In Main Video Page..</a></div></div>');<br />x$('a.myTitleLink, a.activityShowMe-comment').attr("href", titleURL).appendTo('.activityShowMe-page');<br />x$('a.myTitleLink, a.activityShowMe-closer, a.activityShowMe-comment').hide();<br />x$(".activityShowMe").load(x$(this).attr("href") + " .videoDetailPage-video", function() {<br />if (x$('.videoDetailPage-video iframe').length > 0) {<br />x$('.videoDetailPage-video').addClass('iframed');<br />}<br />x$(".activityShowMe").hide().fadeIn();<br />x$(document.body).css({ 'cursor': 'default'});<br />x$('a.myTitleLink, a.activityShowMe-closer, a.activityShowMe-comment').fadeIn();<br />});<br />x$('.videoDetailPage-viewVideo').remove();<br />x$(this).slideUp();</p><p>x$('a.activityShowMe-closer').click(function(){<br />x$('.activityShowMe-container').slideUp("slow", function(){<br />x$('.activityShowMe-container').remove();<br />x$(activityVideoMedia).slideDown(500);<br />x$('.activityFeed-videos, .eventPage-image-wrapper').removeClass("ActivityvideoActive");<br />x$('.activityFeed-content').removeClass('videoActiveContent');</p><p>});<br /> });<br /> });<br /> });<br /></script></p><p> </p><p>NEXT we add some css and this goes in your Design Studio Custom CSS</p><p> </p><p>/* Make video Responsive */<br />.videoDetailPage-video.iframed{<br /> margin-bottom: 5px;<br /> width: 100%;<br /> height: 0;<br /> padding-bottom: 56.25%;<br /> position: relative;<br />}<br />.videoDetailPage-video.iframed iframe{<br /> max-width: 100%;<br /> height: 100%;<br /> width:100%;<br /> position: absolute;<br />}</p><p>.activityShowMe-container{clear:both; max-width:1280px; margin-top:10px;margin-bottom:20px;width:100% }<br />.activityShowMe-header{ width:100%;clear:both;height:40px }<br />a.activityShowMe-closer{<br /> padding: 4px 8px;<br /> border-radius: 70px;<br /> background-color:white;<br /> color: #cc7474;<br /> cursor: pointer;<br /> font-weight:bold; <br /> float:left;<br /> clear:both;<br /> border: solid 1px darkgray; <br />}<br />a.activityShowMe-closer:hover{ background-color:royalblue;text-decoration: none;color:white;font-weight:bold }<br />.activityShowMe-page a{ display:inline-block; cursor:pointer }<br />.activityShowMe-page{ margin-top:8px; text-align:right; width:100%;clear:both }<br />.activityShowMe-page a{ font-size:0.9em }<br />.activityShowMe .sheet{ padding:10px 0px 0px 0px!important }<br />a.activityShowMe-comment{ float:left }<br />.activityShowMe .site-body{ background-color:transparent }</p><p>@media only screen and (min-width:300px){<br />.activityShowMe { font-size:1.5em; }<br />}<br />.videos-only .activityFeed-videos { margin-bottom:20px; }<br />@media only screen and (min-width:771px){<br />.videos-only .activityFeed-videos:not(:only-child) { margin-bottom:20px;margin-right:5px; max-width:24%; display:inline-block }<br />}<br />.ActivityvideoActive{ width:100%!important; max-width:100%!important;clear:both }<br />.activityFeed-content.videoActiveContent{ max-width:100%!important}</p><p>.feedEvent-createVideoRollup .activityFeed-content {<br /> max-width: 100%;<br />/*Was 548px */<br />}<br />.feedEvent-createVideoComment .activityFeed-detailContent{<br />margin-top:10px;<br />}</p><p> </p><p>Enjoy, Bizz :-)</p></div>🤳UPDATED: New App for Getting Help with Your Ning Community 💹↔️ 📲https://creators.ning.com/forum/topics/new-app-for-getting-help-with-your-ning-community2019-06-07T17:31:11.000Z2019-06-07T17:31:11.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p><span style="font-size:14pt;">I was playing around with <a title="Use Glideapps to build apps for your Ning Community" href="https://glideapps.com/r/w1NNPWLDmrvkxEZQa4ZN" target="_blank">Glideapps</a> and put together this little app for finding tips and tricks and for asking questions about how to do things with your Ning Community </span></p><p><span style="font-size:14pt;"><a href="https://go.srvyr.com/ningtipsjfarrow" target="_blank">Give it a try</a> and if you like add it to your phone's home screen to reach out anytime..</span></p><p><a href="https://go.srvyr.com/ningtipsjfarrow" target="_blank"><img class="align-center" src="{{#staticFileLink}}2819771517,RESIZE_710x{{/staticFileLink}}" alt="2819771517?profile=RESIZE_710x" width="710" /></a></p><p><span style="font-size:14pt;">In addition to the updated version of the <a href="https://go.srvyr.com/ningtipsjfarrow" target="_blank">Ning tips and Tricks App</a> I built for you and for this community, i wanted to provide a little background on the incredible tool which I use for building apps for communities. I will soon roll all of the best apps into one megaapp that I will be offering to paid members of the community. I encourage you to <a href="https://glideapps.com/r/w1NNPWLDmrvkxEZQa4ZN" target="_blank">try GlideApps</a> out...</span></p><p><span style="font-size:18pt;"><strong>UPDATE:</strong> (Background) What I should have also explained is that <a href="https://go.srvyr.com/glide" target="_blank">Glideapps are built from Google Sheets</a> as backend and database,... and so you can basically build an app around any Excel, Sheets, XLS, CSV document that you have. Just drag it into Google Drive and open it with glide to start designing your app.</span></p><p><span style="font-size:18pt;">I've built spotify clones, instagram clones, podcasts, digital field notes, apps connected to groups in a community,classroom apps, dictionaries, you name it. Tonight I am trying to hammer a spreadsheet copy of the US Constitution into an app for a friend in this community.</span></p><p><span style="font-size:18pt;">To date, and <em>because it has become a borderline obsession during pandemic</em>, I have built over 100 glideapps and many of them are for <a href="http://landsurveyorsunited.com/apps" target="_blank">a global community of land surveyors</a> ive work on for close to 15 years. Glide's detailed tutorials and Learn videos make building apps fun..What i find most awesome is the amazing support community behind Glide. It reminds me of how the <a href="http://web.archive.org/web/20120818132534/http://creators.ning.com:80/" target="_blank">Old Ning Creators Forum</a> used to be- collaborative. It makes developing apps the most interesting part of running my community and the most enjoyable. Practically anything you can imagine is possible such as ...</span></p><p>MOBILE APPS - <em>LAND SURVEYING GEOMATICS</em></p><div class="inner"><p><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/1d2decbe.jpg?v66982068007851" alt="1d2decbe.jpg?v66982068007851" /><a href="https://usalandsurveyors.glideapp.io/" target="_blank"><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/78043144.jpg?v66982068007851" alt="78043144.jpg?v66982068007851" /></a></p><p><a href="https://surveyequipment.glideapp.io/" target="_blank"><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/cc8c877c.jpg?v66982068007851" alt="cc8c877c.jpg?v66982068007851" /></a></p><p><a href="https://fieldnotes.glideapp.io/" target="_blank"><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/b4b4f368.jpg?v66982068007851" alt="b4b4f368.jpg?v66982068007851" /></a></p><p><a href="https://thegeoholics.glideapp.io/" target="_blank"><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/cf45cbec.jpg?v66982068007851" alt="cf45cbec.jpg?v66982068007851" /></a></p><p><a href="https://globalsurveyors.glideapp.io/" target="_blank"><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/fe21690a.jpg?v66982068007851" alt="fe21690a.jpg?v66982068007851" /></a></p><p><a href="http://usofaz.glideapp.io/" target="_blank"><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/58a4cf2f.jpg?v66982068007851" alt="58a4cf2f.jpg?v66982068007851" /></a></p><p> </p><p><a href="https://surveyorspreadsheets.glideapp.io/" target="_blank"><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/464223cd.jpg?v66982068007851" alt="464223cd.jpg?v66982068007851" /></a></p><p><a href="https://surveyordictionary.glideapp.io/" target="_blank"><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/2861d474.jpg?v66982068007851" alt="2861d474.jpg?v66982068007851" /></a></p><p><a href="https://surveyingjobs.glideapp.io/" target="_blank"><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/c9aced53.jpg?v66982068007851" alt="c9aced53.jpg?v66982068007851" /></a></p><p> </p><p> </p><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery01/57cef016.jpg?v66982068007851" alt="57cef016.jpg?v66982068007851" /><p><a href="https://hiresurveyors.glideapp.io/"><img src="https://jfarrow.carrd.co/assets/images/gallery01/887a6cc7.jpg?v66982068007851" alt="Surveyors for Hire App" /></a></p></div><p>MOBILE APPS - <em>AUDIO / PODCASTS</em></p><div class="inner"><p><a href="https://troots.glideapp.io/" target="_blank"><img class="align-left" src="https://jfarrow.carrd.co/assets/images/gallery03/ced7d8d5.jpg?v66982068007851" alt="ced7d8d5.jpg?v66982068007851" /></a></p><p><a href="https://thegeoholics.glideapp.io/"><img src="https://jfarrow.carrd.co/assets/images/gallery03/47235734.jpg?v66982068007851" alt="The Geoholics Podcast App" /></a></p></div><p> </p><p> </p><p><span style="font-size:14pt;">and much more....I encourage you to <a href="https://glideapps.com/r/w1NNPWLDmrvkxEZQa4ZN" target="_blank">try Glide for yourself</a> but if you don't feel up to it, <strong>you can hire me</strong> to develop it for you -save some time and effort. If you have questions about what is possible with these apps drop comments below. If you need some help putting an idea together for your community, <a href="https://creators.ning.com/members/JFarrow" target="_blank">let me know</a>. Have fun!</span></p></div>2 Quick Tips in One: PDF Embed Trick + Facebook Page Tiphttps://creators.ning.com/forum/topics/2-quick-tips-in-one-pdf-embed-trick-facebook-page-tip2018-12-17T19:01:56.000Z2018-12-17T19:01:56.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Short and sweet this is two community tips in one. Take a look at <a href="https://codepen.io/JFarrow/pen/roegxB" target="_blank" rel="noopener">the following pen</a>.</p><p><a href="https://codepen.io/JFarrow/pen/roegxB" target="_blank" rel="noopener"><img class="align-full" src="https://storage.ning.com/topology/rest/1.0/file/get/401663738?profile=RESIZE_710x" width="631"/></a></p><p><iframe src="//codepen.io/JFarrow/embed/roegxB/?height=467&theme-id=3719&default-tab=html,result" height="467" frameborder="no">See the Pen <a href="https://codepen.io/JFarrow/pen/roegxB/" rel="nofollow">PDF View using gdocs</a> by JFarrow (<a href="https://codepen.io/JFarrow" rel="nofollow">@JFarrow</a>) on <a href="https://codepen.io" rel="nofollow">CodePen</a>.</iframe></p><p> </p><p><span style="text-decoration: underline;"><strong>Tip 1:</strong></span> If you wrap the url of any PDF that you upload to the community with the following bit of code, you will have a clean responsive embed... in fact it works with any kind of document, even powerpoints. For example, the parts of the code you should remember or have handy are in red.</p><p><iframe src="<strong style="color: red;"><a href="https://docs.google.com/viewer?url=" rel="nofollow">https://docs.google.com/viewer?url=</a></strong><a href="https://landsurveyorsunited.github.io/cssfiles/manuals/Surveying-Photos-Submitted-Land-Surveyors-United.pdf" rel="nofollow">https://landsurveyorsunited.github.io/cssfiles/manuals/Surveying-Photos-Submitted-Land-Surveyors-United.pdf</a><strong style="color: red;">&embedded=true" frameborder="0" height="500px" width="100%"</strong>></iframe><br/> </div></p><p> If you simply replace the url () with your own PDF or Document URL, it will use the Google Docs default viewer to embed your document into the page like so:</p><p> </p><p> </p><p><span style="text-decoration: underline;"><strong>Tip 2: </strong></span> For those who have an active facebook page dedicated to your community, you may have members who engage your page by uploading and sharing photos. I told you a while back about a Facebook Trick for how to use the submitted photos to get more followers to your page (See <a href="https://creators.ning.com/xn/detail/6651893:DiscussionEntry:1321521">You May Not Know This About Facebook</a>). If you go to the page with the archive of submitted photos, simply scroll as far down as you can go and then CTRL+P to print a PDF version of the page. Upload that into your Google Drive and whenever you have some time, go back in time by clicking on any photo and see if there were people who liked your photo but have not liked your page like so:</p><p><a href="https://creators.ning.com/forum/topics/you-may-not-know-this-about-facebook" target="_blank" rel="noopener"><img class="align-full" src="https://storage.ning.com/topology/rest/1.0/file/get/559460?profile=original"/></a>This is a good way to continually get your page more likes and more visits to your community, utilizing the content shared by your members.....or future members..</p><p> </p><p>Related Posts:</p><h3 class="entry-title"><a href="https://creators.ning.com/forum/topics/how-to-embed-facebook-comments-to-a-post?context=tag-facebook">How to Embed Facebook Comments to a Post</a></h3><p><a href="https://creators.ning.com/xn/detail/6651893:DiscussionEntry:290795">Three Handy Facebook Tricks You May Not Know</a></p><p> </p><p> </p><p>Over the holidays I will be adding some more tips and tools to the <a href="https://creators.ning.com/group/ning-powered-events" target="_blank" rel="noopener">Ning Powered Events group</a> so be sure to join it and if you need help with your community, <a href="https://creators.ning.com/members/JFarrow" target="_blank" rel="noopener">reach out</a>. Happy to help!</p></div>What I have Learned about Community Management Part 3https://creators.ning.com/forum/topics/what-i-have-learned-about-community-management-part-32017-04-02T21:00:41.000Z2017-04-02T21:00:41.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p style="text-align: center;"><span class="font-size-5"><a href="http://creators.ning.com/forum/topics/what-i-have-learned-about-community-management-part-1" target="_self">Part One Here</a> <a href="http://creators.ning.com/forum/topics/what-i-have-learned-about-community-management-part-2" target="_self">Part Two Here</a></span></p>
<div>
<div class="_1mf _1mj">
<strong><span class="font-size-5">Lead By Example</span></strong>
</div>
<div class="_1mf _1mj">
<span>Put the time in and see what you attract. If you think your community is dead because no one new is applying to join, no one posts anymore, people are leaving, or any of the 100 other reasons why communities die, you may be wrong. Word of Mouth to mouth resuscitation may save it's life. If you want for your network to expand, you must lead by example. You will never be able to effectively "pay someone to do it for" you. At the end of the day, week, month, year, decade, only you know what will gain the interest of people like you...for whom the community was intended. Take it from me..a person who like you felt at one time like i didn't know what to do next. I noticed a sort of scientific process at work that I wanted to follow closer. My original Ning <a rel="nofollow" href="http://landsurveyorsunited.com/" target="_blank">community for Professional Land Surveyors</a> built March 10th 2007 will turn 10 years old next week. I have learned a lot from managing online communities over the past decade. Hopefully some of my observations can help save a few of you some time.</span>
</div>
<div class="_1mf _1mj">
<span><span><a href="http://storage.ning.com/topology/rest/1.0/file/get/558897?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558897?profile=RESIZE_1024x1024" class="align-center" width="750"></a></span></span>Every June on the Solstice,
<a rel="nofollow" href="http://landsurveyorsunited.com/profiles/members/" target="_blank">Land Surveyors United Members</a>
<a rel="nofollow" href="http://surveyearth.com/" target="_blank">Survey Earth in a Day</a>. This year will be our 6th celebration.
</div>
<div class="_1mf _1mj"></div>
</div>
<div>
<div class="_1mf _1mj">
<span> </span>
</div>
</div>
<div>
<div class="_1mf _1mj">
<span> </span>
</div>
</div>
<p></p>
<div>
<div class="_1mf _1mj">
<strong>Takeaway and Give Back</strong>
</div>
<div class="_1mf _1mj">
<span>If you have a lot of content which has not been categorized or recollected into linktrees, you are simply missing out on all of the traffic you could and should have- would have, if you did. elink.io is not the only web service out there allowing you to curate collections of links. It is, however, the most versitile and (as a student) the cheapest to manage, in my opinion.</span>
</div>
</div>
<div>
<div class="_1mf _1mj">
<span> </span>
</div>
</div>
<div>
<div class="_1mf _1mj">
<span>Building a community doesn't happen over night.</span>
<span>In fact, it shouldn't.</span>
<span>You do not need a lot of third party add-ons to make your site attractive, but you will have to do work outside your community to bring new members in.. You simply must put in the time and effort if you hope for a community to form. The way your site is designed and layout is tuned will be an ongoing experiment for the entire life of your community. For this reason I have always tried to help save time by <a href="http://creators.ning.com/members/JFarrow/content?type=DiscussionEntry&context=all" target="_self">sharing tips</a>. In order to build a sustainable community, you must get to a place where your members feel comfortable and think of your place built for them when sharing that photo or tip or guide on the community you built for them. Progressive enhancement is the human way to increase relevance of your community for search engines, social graphs, bots, algorithms and yes, humans. You can do this for your community by channeling the traffic back into the network and reintroducing relevant content to those new members and visitors which might find it and the dialogue which occurs useful even five years in the future..</span>
</div>
<div class="_1mf _1mj"></div>
<div class="_1mf _1mj">
<div class="_1mf _1mj"></div>
<div class="_1mf _1mj" style="text-align: center;">
<span class="font-size-4"><a rel="nofollow" href="https://form.jotformpro.com/22678794816976" target="_blank">Get Private Help with Your Ning Community</a></span>
</div>
</div>
</div></div>ho ho ho! 110+ Useful Ning Tips and Tricks for 2.0 and 3.0https://creators.ning.com/forum/topics/110-useful-ning-tips-and-tricks-for-2-0-and-3-02016-12-07T23:50:17.000Z2016-12-07T23:50:17.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p><span class="font-size-7"><a href="http://creators.ning.com/members/JFarrow" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558568?profile=original" width="124" class="align-full"></a></span></p>
<p></p>
<p>Santa Never Stops and neither should you when it comes to improving your community. The best part about running a community on the Ning platform is the endless possibilities for changing and tweaking just about ever aspect of the platform. This is what has always kept me interested. This is what is exciting about cultivating a community. You can always make the platform adapt more and more to the culture of your members. This is what your member expect, after all. They want to see something new everytime they log in. It is up to you to provide that.</p>
<p>Do you think Santa makes excuses?</p>
<p>heck no! He can't wait for the world to turn, he's gotta reputation to maintain.</p>
<p><a href="http://creators.ning.com/members/JFarrow" target="_self"><img src="https://media.giphy.com/media/3o6ZsVHrPnt3WiHKz6/source.gif" class="align-full"></a></p>
<p>Back in the day this community was lively with tip sharing and many many of you have messaged me about trying to "liven up the crowd" again. Here is an attempt. Tips I've left here in this forum for other Ning Creators get buried with time, so I developed a method to resurface those good ones for another round of help. A while back I showed you <a href="http://creators.ning.com/forum/topics/megaload-of-ning-tips-tricks-and-hacks-over-200" target="_self">over 200 Ning tips</a> that I had scraped out of my own profile discussions dating back to 2007. There was quite a bit of garbage in there so I have gone through those and picked out around <a rel="nofollow" href="https://elink.io/9ac35" target="_blank">110 tips which are still relevant</a> and have compiled them <a rel="nofollow" href="https://elink.io/9ac35" target="_blank">into a collection for you</a>. You can simply learn something new every day from these tips alone. So, if you think you have done all you can do to make your network the best it can be, i am here to show you that you still have much to do. Here is the PDF of the link collection for download as well. </p>
<p style="text-align: center;"><span class="font-size-6"><a href="http://storage.ning.com/topology/rest/1.0/file/get/559044?profile=original" target="_self">Ning-Creator-Tips-Tricks-Hacks-JFarrow.pdf</a></span></p>
<p>If you need help with some aspect of your Ning community or would simply like to redesign or build your network, <a href="http://creators.ning.com/members/JFarrow" target="_self">reach out to me</a> and let's discuss it. It may be much simpler than you think. I also have a form that you can fill out for <a rel="nofollow" href="http://www.jbfarrow.com/projects/ning-help" target="_blank">private help here</a>. Good luck and by all means, be creative!</p>
<p><a href="https://elink.io/9ac35" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558886?profile=original" alt="Ning tips collection" width="100%" class="align-full"></a></p></div>Tutorial: Learning CSS Positioning in 9 stepshttps://creators.ning.com/forum/topics/tutorial-learning-css-positioning-in-9-steps2015-02-10T00:29:40.000Z2015-02-10T00:29:40.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>This is just a quick tutorial for anyone hoping to learn about positioning in CSS. In 9 steps I'll show you how positioning works so you'll have an easier time with your Advanced CSS area of the Design Studio</p>
<p></p>
<div id="text-1" class="tabbertab" title="">
<h2><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/558082?profile=original"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/558082?profile=original" width="30%"></a>1. position:static</h2>
<p>The default positioning for all elements is <em>position:static</em>, which means the element is not positioned and occurs where it normally would in the document.</p>
<p>Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.</p>
<pre>
#div-1 { position:static; } <br><br><br><br><br>--------------------------------------------------------------------------------------------------<br><br><br><br>
</pre>
<div id="text-2" class="tabbertab" title="">
<h2><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/558113?profile=original"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/558113?profile=original" width="30%"></a>2. position:relative</h2>
<p>If you specify <em>position:relative</em>, then you can use <em>top</em> or <em>bottom</em>, and <em>left</em> or <em>right</em> to move the element relative to where it would normally occur in the document.</p>
<p>Let's move div-1 down 20 pixels, and to the left 40 pixels:</p>
<pre>
#div-1 { position:relative; top:20px; left:-40px; } <br><br>
</pre>
<p>Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That's because div-1 still occupies that original space in the document, even though we have moved it.</p>
<p>It appears that <em>position:relative</em> is not very useful, but it will perform an important task later in this tutorial.</p>
</div>
</div>
<p></p>
<p></p>
<p>-----------------------------------------------------------------------------------------</p>
<p></p>
<div id="text-3" class="tabbertab" title="">
<h2><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/558148?profile=original"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/558148?profile=original" width="30%"></a>3. position:absolute</h2>
<p>When you specify <em>position:absolute</em>, the element is removed from the document and placed exactly where you tell it to go.</p>
<p>Let's move div-1a to the top right of the page:</p>
<pre>
#div-1a { position:absolute; top:0; right:0; width:200px; }
</pre>
<p>Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.</p>
<p>Also notice that div-1a was positioned in the top right corner of the page. It's nice to be able to position things directly the page, but it's of limited value.</p>
<p>What I really want is to position div-1a <em>relative</em> to div-1. And that's where relative position comes back into play.</p>
<h3>Footnotes</h3>
<ul>
<li>There is a bug in the Windows IE browser: if you specify a relative width (like "width:50%") then the width will be based on the parent element instead of on the positioning element.</li>
</ul>
<p>----------------------------------------------------------------------------------------------------</p>
<div id="text-4" class="tabbertab" title="">
<h2><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/558163?profile=original"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/558163?profile=original" width="30%"></a>4. position:relative + position:absolute</h2>
<p>If we set <em>relative</em> positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:</p>
<pre>
#div-1 { position:relative; } <br>#div-1a { position:absolute; top:0; right:0; width:200px; } <br><br><br><br><br><br>----------------------------------------------------------------------------------------------------<br><br><br>
</pre>
<div id="text-5" class="tabbertab" title="">
<h2><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/558192?profile=original"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/558192?profile=original" width="30%"></a>5. two column absolute</h2>
<p>Now we can make a two-column layout using relative and absolute positioning!</p>
<pre>
#div-1 { position:relative; }<br>#div-1a { position:absolute; top:0; right:0; width:200px; }<br>#div-1b { position:absolute; top:0; left:0; width:200px; }
</pre>
<p>One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a.</p>
<p>But wait - what happened to the other elements? They are being obscured by the absolutely positioned elements. What can we do about that?</p>
<p></p>
<p></p>
<p>--------------------------------------------------------------------------</p>
<div id="text-6" class="tabbertab" title="">
<h2><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/558211?profile=original"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/558211?profile=original" width="30%"></a>6. two column absolute height</h2>
<p>One solution is to set a fixed height on the elements.</p>
<p>But that is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.</p>
<pre>
#div-1 { position:relative; height:250px; } <br>#div-1a { position:absolute; top:0; right:0; width:200px; } <br>#div-1b { position:absolute; top:0; left:0; width:200px; } <br><br><br>--------------------------------------------------------------------------<br><br><br><br><br><br>
</pre>
<div id="text-7" class="tabbertab" title="">
<h2><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/558233?profile=original"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/558233?profile=original" width="30%"></a>7. float</h2>
<p>For variable height columns, absolute positioning does not work, so let's come up with another solution.</p>
<p>We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it's the only tool we have).</p>
<pre>
#div-1a { float:left; width:200px; } <br><br><br><br>----------------------------------------------------------------------------<br><br><br>
</pre>
<div id="text-8" class="tabbertab" title="">
<h2><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/558243?profile=original"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/558243?profile=original" width="30%"></a>8. float columns</h2>
<p>If we float one column to the left, then also float the second column to the left, they will push up against each other.</p>
<pre>
#div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; } <br><br><br><br><br><br>------------------------------------------------------------------------------------<br><br><br><br><br>
</pre>
<div id="text-9" class="tabbertab" title="">
<h2><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/558251?profile=original"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/558251?profile=original" width="30%"></a>9. float columns with clear</h2>
<p>Then after the floating elements we can "clear" the floats to push down the rest of the content.</p>
<pre>
#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p>With so much negativity lately on this forum I thought it might be nice to post something helpful for everyone to learn from . If you need further help, let me know.</p></div>Tip: Make an Image turn Black and White on hoverhttps://creators.ning.com/forum/topics/tip-make-an-image-turn-black-and-white-on-hover2013-12-05T19:01:18.000Z2013-12-05T19:01:18.000ZBernard Lamahttps://creators.ning.com/members/BernardLama<div><p>Hi NCs,</p>
<p><span>Here is a simple tip on how to get a black and white effect when you hover over a photo post. </span></p>
<p><strong><span style="text-decoration: underline; color: #ff0000;">For Ning 2.0:  </span>Simply copy and paste the following code into in Advanced CSS under Design Studio.</strong></p>
<p><em>.xg_widget_photo_index_index .xg_list_photo ul li .ib a img:hover {</em><br />
<em>-webkit-filter: grayscale(100%);</em><br />
<em>}</em></p>
<p><strong><span style="color: #ff0000;">For Ning 3.0:</span>  Simply copy and paste the following code into Custom CSS under Design Studio.</strong></p>
<p><em>.matrix-item:hover {</em><br />
<em>-webkit-filter: grayscale(100%);</em><br />
<em>}</em></p>
<p><span style="color: #339966;"><strong>DEMO <a href="http://ksnonline.ning.com/photos" target="_blank"><span style="color: #339966;">click here</span></a> to launch</strong></span></p>
<p>You can also contact me for any kind of ning custom job including ning network re-design @ bernardmax2@gmail.com</p>
<p></p>
</div>Infographic: 10 Responsive Web Design Tipshttps://creators.ning.com/forum/topics/infographic-10-responsive-web-design-tips2013-08-02T21:50:37.000Z2013-08-02T21:50:37.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Like many of you, I am always looking for ways to cover my bases and with the new 3.0 layout, here are 10 tips that you might like to keep in mind.</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556018?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556018?profile=RESIZE_1024x1024" class="align-full" width="842"></a></p>
<p> </p>
<p>(via <a rel="nofollow" href="http://www.bestpsdtohtml.com/5-infographics-to-know-more-about-responsive-web-design/" target="_blank">PSD blog</a>)</p></div>Become a Youtube Master with These 4 Trickshttps://creators.ning.com/forum/topics/become-a-youtube-master-with-these-4-tricks2013-05-05T03:10:10.000Z2013-05-05T03:10:10.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>In the past, I have shown you some interesting tricks for embedding youtube videos into your site. For example, <a href="http://creators.ning.com/forum/topics/how-to-embed-youtube-videos-without-the-youtube-logo-hack" target="_self">How to Embed without Youtube Logo</a> and <a href="http://creators.ning.com/forum/topics/how-to-embed-a-youtube-playlist-into-ning-network-videos-section" target="_self">how to embed playlists</a> (more at bottom of the post). Today I am going to show you 4 new tricks for becoming a Youtube Master on your Ning network.</p>
<p><span style="color: #888888;" class="font-size-7">1) A Better Way to Embed Youtube Videos</span></p>
<p>When you embed any YouTube video on a website using standard IFRAME tags, you’ll be surprised to know how many extra pounds that video adds to your page.</p>
<p><a href="http://www.labnol.org/internet/light-youtube-embeds/27941/" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/554963?profile=original" width="713" class="align-full"></a></p>
<p>Image from Amit of Labnol</p>
<p>The web page has to download additional ~400 kB of resources (CSS, JavaSript and Image files) for rendering the video player alone and these extra resources will download even if the site visitor has chosen not to watch the embedded YouTube video.</p>
<p>This can be a problem for two reasons. Once, we are indirectly adding extra weight (nearly 0.4 MB) to our pages and second, the visitor’s browser has to make multiple HTTP requests to render the video player.</p>
<h2>Neat Solution: Load the YouTube Video Player On-Demand</h2>
<p>Google Plus uses a clever workaround to reduce the time it takes to initially load the YouTube video player and we can easily incorporate that approach on our sites as well.</p>
<p>Instead of embedding the full Youtube video player, Google+ only displays the thumbnail of a YouTube video and then overlays a play icon over the video so the image resembles a video player. Take a look at this sample video embedded below (or on <a rel="nofollow" href="https://plus.google.com/104968860811185326874/posts/9uL7qpFcwhK" target="_blank">Google Plus</a>).</p>
<p><iframe width="320" height="180" src="http://www.youtube.com/embed/SFWi_iEKb-A?wmode=opaque"></iframe></p>
<p>compared to this:</p>
<div class="youtube" id="SFWi_iEKb-A" style="width: 320px; height: 180px;"></div>
<p></p>
<p>When the user hits the play button, the image thumbnail gets replaced with the standard video player. Thus, the extra player-specific resources are loaded only when the user has decided to play the embedded video and not otherwise.</p>
<h3>Code: Embed YouTube Videos without Increasing Load Time</h3>
<p>The regular embed code for YouTube looks something like this. You specify the height of the player (in pixels), the width and the unique YouTube ID of the video.</p>
<p><iframe width="320" height="180"<br> src="http://www.youtube.com/embed/SFWi_iEKb-A"><br> </iframe></p>
<p><span>And here’s the corresponding on-demand code for YouTube. You have to replace the height, width and the Youtube ID in the code above and then copy-paste it anywhere in your web template.</span></p>
<p><div class="youtube" id="SFWi_iEKb-A" style="width: 320px; height: 180px;"></div><br> <script src="https://labnol.googlecode.com/files/youtube.js"></script></p>
<p><span class="font-size-7">2)Add a Subscribe Button for Your Youtube Channel</span></p>
<p>Do you have a video channel on YouTube? Then you may want to add this simple “Subscribe” button to your website that will help visitors subscribe to your YouTube channel with a click without having to leave your site for YouTube.</p>
<p><a href="https://www.youtube.com/landsurveyorsu" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/555005?profile=original" width="120" class="align-full"></a></p>
<p>For example, here’s a “live” subscription button for my <a rel="nofollow" href="http://www.youtube.com/landsurveyorsu" target="_blank">video channel</a> on YouTube:<iframe width="320" height="240" src="http://www.youtube.com/subscribe_widget?p=landsurveyorsu&wmode=opaque" frameborder="0"></iframe></p>
<p><span>To embed this button to your own website, just copy-paste the following block of HTML code anywhere in your website. Then replace XYX in the subscription URL with your own YouTube username.</span></p>
<p><iframe src="http://www.youtube.com/subscribe_widget?p=XYZ"<br> style="overflow: hidden; height: 105px; width: 300px; border: 0;"<br> scrolling="no" frameBorder="0"><br> </iframe></p>
<p> </p>
<p><span class="font-size-5">Subscribe to Channel with a Single Click!</span></p>
<p>When you create a link from the website to your YouTube channel, there’s a probability that that visitor may fail to notice the “subscribe” button on the already crowded YouTube channel page.</p>
<p>However, if you add “sub_confirmation=1″ to the YouTube channel link, the visitor will get a prompt to subscribe to your channel while they are on the YouTube website. <a rel="nofollow" href="http://www.youtube.com/user/labnol?sub_confirmation=1" target="_blank">Click here</a> for a live example.</p>
<p> </p>
<p><span class="font-size-7">3) Add Your Own Logo to Youtube Videos</span></p>
<p>You can use any video editing software to add logos or watermarks to your videos before uploading them to YouTube but how do you put them in your existing videos that are already on the web?</p>
<p>Well, YouTube has recently added a new feature called <a rel="nofollow" href="http://www.youtube.com/account_featured_programming?ytsession=8H7Vjpvn5hlUmYzohphEQA4izTeBR1l6u1cPB6MGKhGW9MMVhS9nUC3sHoUPW1FuPALIbu7Du5kjcza8iF2jnOe6Lss4fx8Dtq3urcZbzjP4wVkob8r5haKs4Qu7zkAPGudj0w1vk1lorzoZq6dwbuA73bwjxMym9vYEyqFFZ5ojv4FDrvRDz-pUR42rekwYnnLTCzk2tupNxx9cSce1Hv8PCElmDn3FN8ptyvxMG1nO3G2S3tnZTWLOMyy1mE-lHCtTMMqs-1c" target="_blank">InVideo Programming</a> that will help you add any custom image to all your Youtube videos with a few clicks without having to edit the original video.</p>
<p><img src="http://storage.ning.com/topology/rest/1.0/file/get/555034?profile=original" width="726" class="align-full"></p>
<p>You can choose to display the logo at the start of the video, somewhere in the middle or even for the entire duration of the video. Also, the logo can be placed in either corners of the YouTube player.</p>
<p>NOTE: YouTube internally uses annotations to display the images over the video and thus, if you a YouTube viewer has turned off annotations, your logo won’t be visible.</p>
<p> </p>
<p><span class="font-size-7">4) Use Any Youtube Video as a Background for your Ning Site Pages</span></p>
<p>You are probably using a single static image as the background for your Ning site but it may offer a slightly more richer experience if you could consider placing moving images, like an animation or a self-playing video clip, in the background of your web pages.</p>
<p><a href="http://www.labnol.org/internet/youtube-video-background/27933/" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/555080?profile=original" width="750" class="align-full"></a></p>
<p>The Bing homepage, for example, frequently uses video backgrounds, like those <a rel="nofollow" href="http://www.youtube.com/watch?v=J0nsQdGPBF0" target="_blank">penguins jumping out</a> of an ice hole one after another, and so can you on your own website.</p>
<p>There are several approaches here:</p>
<ul>
<li><span>Bing uses the standard HTML5 <video> tags to serve <a rel="nofollow" href="http://www.labnol.org/internet/video-homepage-for-bing/20128/">videos on the homepage</a>. The embedded video has a fixed size and it doesn’t resize itself with the browser.</span></li>
<li>There are ready-to-use jQuery plugins, <a rel="nofollow" href="https://code.google.com/p/jquery-tubular/" target="_blank">Tubular</a> and <a rel="nofollow" href="https://github.com/dfcb/BigVideo.js" target="_blank">BigVideo.js</a> for example, that let you easily use any video, or a series of videos, as page backgrounds.</li>
<li>The other more simple approach, as you can see in <a rel="nofollow" href="http://img.labnol.org/files/video-background.html">this demo</a>, uses HTML and CSS tags (no JavaScript) to help you place any YouTube video in the page background.</li>
</ul>
<h2>YouTube Video Backgrounds</h2>
<p>To get started, simply paste the code below near the opening <body> tag of your web template. You should also replace the ID with the actual video ID of the YouTube video that you would like to use in the background.</p>
<p><div style="xg-p: fixed; z-index: -99; width: 100%; height: 100%"><br> <iframe frameborder="0" height="100%" width="100%"<br> src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1"><br> </iframe><br> </div></p>
<p>// Replace ID with the actual ID of your YouTube video</p>
<p>Internally, we are using YouTube’s IFRAME tags to embed that video such that it occupies the entire page (both width and height are set to 100%). Also, the z-index is set to negative so the YouTube video layer will appear several levels below the main content of your page.</p>
<p>The downside is that your background video won’t work on mobile devices and it is not possible to mute the sound of a video without using JavaScript.</p>
<p>Thanks to <a rel="nofollow" href="http://www.labnol.org/internet/light-youtube-embeds/27941/" target="_blank">Amit</a> for great tips and tricks!</p>
<p></p>
<p><span style="text-decoration: underline;"><span class="font-size-4">Other Youtube Tips and Tricks:</span></span></p>
<p><a href="http://creators.ning.com/forum/topics/url-tricks-for-embedding-youtube-videos">URL Tricks for Embedding Youtube Videos</a></p>
<p><a href="http://creators.ning.com/forum/topics/how-to-embed-a-youtube-playlist-into-ning-network-videos-section">How To Embed a Youtube Playlist Into Ning Network Videos Section</a></p>
<p><a href="http://creators.ning.com/forum/topics/videos-tip-build-your-video-library-with-video-alerts">Videos TIP: Build Your Video Library with Video Alerts</a></p>
<p><a href="http://creators.ning.com/forum/topics/hack-to-embed-facebook-videos">Hack To Embed Facebook Videos Into Your Ning</a></p>
<p><a href="http://creators.ning.com/forum/topics/do-more-with-your-video-embed">Do More with Your Video Embed Option...and Smile.</a></p>
<p><a href="http://creators.ning.com/forum/topics/hack-for-using-videos-to-drive-group-involvement">Hack for Using Videos to Drive Group Involvement</a></p>
<p><a href="http://creators.ning.com/forum/topics/how-to-embed-youtube-videos-without-the-youtube-logo-hack">How To Embed YouTube Videos without the YouTube Logo-Hack</a></p>
<p><a href="http://creators.ning.com/forum/topics/now-you-can-upload-photos-to-youtube">Now You Can Upload Photos to Youtube</a></p></div>Simplify Your Coding Life with Codepen for HTML, CSS and JShttps://creators.ning.com/forum/topics/simplify-your-coding-life-with-codepen-for-html-css-and-js2012-07-04T00:25:20.000Z2012-07-04T00:25:20.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>I just thought it would be nice and useful to share this new tool i've been using with my fellow Ning Creators. Its called <a rel="nofollow" href="http://codepen.io" target="_blank">Codepen</a> and it allows you to visually see the result of your markup in HTML, CSS and JS while you work</p>
<p></p>
<p></p>
<p>you can even embed your codepens into Creators to share tricks and hacks:</p>
<pre class="codepen">
<code><div class="layered-paper"> Whatever you want to sit on top of the layered background (in this case, "Howdy") You will enjoy the simplicity of using codepen </div></code>
</pre>
</div>How to Convert your CSS into LESS using CSS2LESShttps://creators.ning.com/forum/topics/how-to-convert-your-css-into-less-using-css2less2012-05-11T21:45:57.000Z2012-05-11T21:45:57.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Last week i showed you guys a cool tool i found for <a href="http://creators.ning.com/forum/topics/new-tool-for-crunching-less-css" target="_self">CRUNCHING LESS and CSS</a>, but today I came across an equally useful tool for CONVERTING CSS to LESS. </p>
<h1 style="margin: 0px; padding: 0px; font-size: 20px; font-weight: normal; color: #fc2772; font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; letter-spacing: -1px; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">Convert CSS Into LESS With Css2Less</h1>
<p style="font-size: 12px; line-height: 17px; margin: 12px 0px; color: #35383d; font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">If you are one of the NING designers/developers who jumped into the LESS when the new design studio came out and you'd like to know how to get more out of CSS on your Ning network, you will love playing with <a rel="nofollow" href="http://css2less.cc/" target="_blank" style="text-decoration: underline; color: #00a0e3; border-width: 0px;"><strong>Css2Less</strong></a>.</p>
<p style="font-size: 12px; line-height: 17px; margin: 12px 0px; color: #35383d; font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">It is a<span class="Apple-converted-space"> </span><strong>web-based tool for converting CSS files into LESS</strong><span class="Apple-converted-space"> </span>by simply copy-pasting the styles.</p>
<p style="font-size: 12px; line-height: 17px; margin: 12px 0px; color: #35383d; font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">The tool uses the<span class="Apple-converted-space"> </span><a rel="nofollow" href="http://rubygems.org/gems/css2less" target="_blank" style="text-decoration: underline; color: #00a0e3; border-width: 0px;">css2less Ruby library</a><span class="Apple-converted-space"> </span>in the backend and its<span class="Apple-converted-space"> </span><a rel="nofollow" href="https://github.com/nicooprat/Css2Less" target="_blank" style="text-decoration: underline; color: #00a0e3; border-width: 0px;">website is open sourced</a><span class="Apple-converted-space"> </span>for anyone willing to host it themselves.</p>
<p></p>
<h1 style="margin: 0px; padding: 0px; font-size: 20px; font-weight: normal; color: #fc2772; font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; letter-spacing: -1px; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;"><a target="_blank" href="http://css2less.com"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/551574?profile=original" width="750"></a></h1>
<p></p>
<p>Other CSS Related Tips I've Shared over Time:</p>
<h3><a href="http://creators.ning.com/forum/topics/layered-paper-look-with-pure-css">Layered Paper Look with Pure CSS</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/all-ning-network-search-forms-on-one-page">All Ning Network Search Forms on One Page</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/tips-for-those-using-external-css-files">Tips for Those Using External CSS Files</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/freebie-1-magazine-style-css">FREEBIE #1 Magazine Style CSS Template for Ning Pages</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/hack-to-embed-facebook-videos">Hack To Embed Facebook Videos Into Your Ning</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/a-page-template-to-categorize">A Page Template to Categorize Your Ning</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/progress-bar-to-show-member">Progress Bar to Show Member Profile Completeness</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/howto-launch-all-external">How-to Launch all external links in a new window with jQuery</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/monster-list-of-button">MONSTER LIST of Button Generators</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/styling-groups-with-new-design">Styling Groups with New Design Studio with CSS and a Swift Hack</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/howto-control-number-of-member">How-to Control Number of Member Profiles on Member Page Using CSS</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/how-to-add-a-border-to">How to Add a Border to Anything on Ning Network Using CSS</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/find-unused-css-selectors-and">Find Unused CSS Selectors and Increase Load Speed</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/customize-your-pagination">Customize Your Pagination Style with CSS</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/css-best-way-to-clean-and">CSS: Best Way to Clean and Optimize</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/design-hack-3-how-to-have-2">Design Hack #3: How to have 2 RSS Modules Side by Side</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/design-hack-how-to-make-video">Design Hack: How to Make Video and Photo Modules Side by Side</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/design-hack-add-a-text-box">Design Hack: Add A Text Box which Spans All 3 Columns</a></h3>
<h3><a href="http://creators.ning.com/forum/topics/awesome-tweak-tip-animate-your">Awesome Tweak Tip: Animate Your Network Logo With Pure CSS-No Gifs</a></h3>
<p></p></div>Add Pure HTML Sidebar Floating Quicklinks To Your Ninghttps://creators.ning.com/forum/topics/add-pure-html-sidebar-floating-quicklinks-to-your-ning2012-04-24T15:14:44.000Z2012-04-24T15:14:44.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/551335?profile=original"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/551335?profile=original" width="158"></a>The problem with image based navigation is that it will weigh your site down tremendously because everytime the page loads, it has to make a http: request for each and every image. A solution that i have found is to combine a little Jensocial floating navigation goodness with pure HTML character codes which you can find here: <a rel="nofollow" href="http://copypastecharacter.com/all-characters">http://copypastecharacter.com/all-characters</a></p>
<p><a target="_blank" href="http://copypastecharacter.com/all-characters"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/551360?profile=original" width="350"></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>To the right you see a floating sidebar for quick links to various parts of the sites..tiny calls to action, which I can't remember if I developed or found somewhere along the line..its been so long.</p>
<p></p>
<p><a target="_blank" href="http://landsurveyorsunited.com/main"><img class="align-right" src="http://storage.ning.com/topology/rest/1.0/file/get/551381?profile=original" width="142"></a>Today, however, I decided to try something different, a little hack to the previous version and replace all of these icons with simply HTML character codes which represent symbols. At the link above you can switch out any symbols that you like from the attached code and do the same for you ning if you like. Not only will it speed up your site, but it will also do the same trick as before but in a lighter fashion.</p>
<p></p>
<p>HTML unicode symbols look something like this:</p>
<p> <span class="font-size-7">✌</span> = &#9996;</p>
<p></p>
<p></p>
<p>Place the following code into your custom code box, replace YOURNING with your own site and enjoy. See it in action while it lasts on <a rel="nofollow" href="http://landsurveyorsunited.com/main" target="_blank">Land Surveyors United</a>.</p>
<p><strong>TIP:</strong> for best results, use <a rel="nofollow" href="http://jensocial.com/page/wysiwyg-html-editor" target="_blank">Jen's HTML editor</a> after formatting your links so that you know it will layout properly on your ning site.</p>
<p><div style="border: 2px solid black; xg-p: fixed; bottom: 65px; left: 4px; width: 18px; text-align: center; color: #cccccc; background-color: #666666;"><a href="http://YOURNING.com/profiles/blog/new"><big style="color: white;">✍</big></a> <br style="color: white;" /> <a href="http://YOURNING.com/profiles/blog/new"><big style="color: white;" title="Add a topic in News">✎</big></a><br style="color: white;" /> <a href="http://YOURNING.com/forum/topic/new?target=http://landsurveyorsunited.com/forum"><big style="color: white;" title="Add a discussion in the Forum">➫</big></a><br style="color: white;" /> <a href="http://YOURNING.com/photo/photo/newWithUploader"><big style="color: white;">⍝</big></a><br style="color: white;" /> <a style="color: white;" title="Add a video" href="http://YOURNING.com/video/video/newWithUploader"><br /> <big style="color: white;"><big>❒</big></big></a><br style="color: #cccccc;" /> <a href="http://YOURNING.com/events/event/new"><big style="color: white;"><big>⌚</big></big></a><br style="color: white;" /> <a href="http://YOURNING.com/profiles/message/new?folder=Inbox&amp;page=1"><span style="color: white;">✉</span></a><br /></div></p>
<p>Updated:</p>
<p>on <a rel="nofollow" href="http://jsfiddle.net/landsurveyors/nS2dG/" target="_blank">JSFiddle</a></p></div>Get a logo for your network for free...I mean really free.https://creators.ning.com/forum/topics/get-a-logo-for-your-network-for-free-i-mean-really-free2012-03-09T01:11:07.000Z2012-03-09T01:11:07.000ZDenishttps://creators.ning.com/members/Denis123<div><p>Many NCs like me don't have the skill to design a professional logo for their small networks.</p>
<p>It's also not easy to find a service online offering this cheap or for free. I have always been searching for such a link. Where you can pop in, come up with a simple but cool logo in minutes. Most of the links that say make a free logo let you waste your time customizing it but when you want to save it to your PC you find out all what they said at the beginning was a lie. You have to pay. They always have hidden fees but today I stumbled upon one unlike others. When I finished and saved the two logos I designed in less than 30 minutes, I couldn't help writing back to them.</p>
<p><a rel="nofollow" href="http://www.logosnap.com/logo.php?action=create" target="_blank">Click here to visit them</a>.</p>
<p>They have a donate button you can opt to use</p>
<p>I hope this helps the less computer savvy NCs like us.</p>
</div>Just a creative Idea on solving some popular Paywall issues and getting members to payhttps://creators.ning.com/forum/topics/just-a-creative-idea-on-solving-some-popular-paywall-issues-and2011-09-19T22:46:07.000Z2011-09-19T22:46:07.000ZIdáliz Escalantehttps://creators.ning.com/members/IdalizEscalante<div><p><strong>Just a creative Idea on solving some popular Paywall issues</strong></p>
<p> </p>
<p>Well, I instaled the Paywall about a week and a half ago. So far I've done a couple of changes but it's working.</p>
<p> </p>
<p><strong>Did a few changes to make it work for me</strong></p>
<p> </p>
<p>1. First, I really really didn't want to lose any existing members (1,800 so far) so I gave two options: a <strong>paid unlimited option</strong> for $29.95, and a <strong>free limited</strong> option for 6 months.</p>
<p><strong>Didn't work!</strong> When you give a free option no matter how bad you make it sound, they'll go for it!</p>
<p>2. Then I reduced the 6 months to one month...same results! Everyone went for the free option! bla!!</p>
<p>3. <span style="text-decoration: underline;">So, since we get what we demand</span> (law of attraction people!) I totally eliminated any free offers. So to say if you want to be here you have to pay and thats final! jajaja sounds a little hard, but bare in mind that <strong>my network is for business women</strong>. They promote their own businesses, publish their own groups and events, we have live chats every week on different toppics for business and personal growth and a whole bunch of other online and offline activities and bennefits and they love the site.</p>
<p> </p>
<p><strong>So, to deal with other issues now that there's no other option but to pay to get in I've gotten a little creative.</strong></p>
<p>Some people can't or won't pay with Paypal for whatever reason but that shouldn't be something to come between you and your well earned money.</p>
<p>I'm pretty sure I read somewhere that NC's can publish and unpublish the paywall whenever they want right. So just an idea here that I'm planning on doing with my Network if anyone wants to join but for some reason can't pay with Paypal.</p>
<p> </p>
<p>1. I'm giving them the option of paying any other way (check, cash, whatever) </p>
<p>2. I set with them a date and time (exact) for them to login (I have to be online also).</p>
<p>3. I'll unpublish the Paywall just long enough to let them through and then publish it right back up.</p>
<p> </p>
<p>That's if it's a new member. For existing members who also can't pay straight through the Paywall, they pay by any of these options and as soon as I have the payment I <strong>comp them.</strong></p>
<p> </p>
<p>Hope this this is useful to anyone out there.</p>
<p> </p>
<p>Before I leave, <strong><span style="color: #800000;">heres a note to Ning</span></strong> I think should be looked at. When a NC publishes the Paywall with more than one option, the lower amount option is marked by default. That's an issue because people either think your suggesting that option or simply go right in without considering any other option.</p>
</div>TIPS: Highlight Activity on Mouse Overhttps://creators.ning.com/forum/topics/tips-highlight-activity-when-mouse-over2011-09-18T13:54:14.000Z2011-09-18T13:54:14.000ZAlex 小正正https://creators.ning.com/members/Alexxiaozhengzheng<div><p>I learn this form Google+. When you focus on one activity feed, you need to highlight it to make it more outstanding and readable. So this tips will tell you how to highlight one activity feed when mouse over:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/548396?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/548396?profile=RESIZE_320x320" width="300" class="align-left"></a></p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/548417?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/548417?profile=RESIZE_320x320" width="300" class="align-left"></a></p>
<p> </p>
<p> </p>
<p style="clear: both;"> </p>
<p style="clear: both;">It's really simple:</p>
<p style="clear: both;"> </p>
<p style="clear: both;"><strong><span style="font-family: 'arial black', 'avant garde';" class="font-size-5">1.</span></strong> Download this CSS file <a href="http://storage.ning.com/topology/rest/1.0/file/get/548484?profile=original" target="_self">mouse_over_highlight_activity.css</a> </p>
<p style="clear: both;"><strong><span style="font-family: 'arial black', 'avant garde';" class="font-size-5">2.</span></strong> Open it in any text editor. Modify the padding, margin, border and background color for your site.</p>
<p style="clear: both;">You can easily <a rel="nofollow" href="http://www.colorzilla.com/gradient-editor/" target="_blank">make a different beautiful gradient and get the CSS code here</a>. Once you have the gradient code, copy and paste it between the two comments and <strong>add <span style="color: #ff0000; font-family: 'courier new', courier;">!improtant</span> before every semicolon ; in the gradient CSS code</strong>:</p>
<p class="p1"><span style="font-family: 'courier new', courier;">/*mouse over highlight background color start*/</span></p>
<p class="p1"><span style="font-family: 'courier new', courier;">/*mouse over highlight background color end*/</span></p>
<p style="clear: both;"><span style="color: #ff0000;">If you don't need background, just remove the code between this two comments.</span></p>
<p style="clear: both;"> </p>
<p style="clear: both;"><strong><span style="font-family: 'arial black', 'avant garde';" class="font-size-5">3.</span></strong> Copy and paste all these CSS code to Advanced CSS. No matter you use Design Studion or not. </p>
<p style="clear: both;"> </p>
<p style="clear: both;">Here is the snap pic of the CSS code in the file above:</p>
<p style="clear: both;"> </p>
<p style="clear: both;"><a href="http://storage.ning.com/topology/rest/1.0/file/get/548446?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/548446?profile=RESIZE_1024x1024" width="750" class="align-full"></a></p>
<p> </p>
<p> </p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/548466?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/548466?profile=original" class="align-full"></a></p>
<p> </p>
<p>This tips can be used with both Design Studio and old themes.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" href="http://www.iyoume.net" target="_blank">iYouMe.net</a>.</p></div>How To Add Google PlusFeed To Your Ning RSS Modulehttps://creators.ning.com/forum/topics/how-to-add-google-plusfeed-to2011-07-27T01:22:02.000Z2011-07-27T01:22:02.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Its a simple little hack which may go a long way. Go to your Google+ Public Profile (using Firefox is easiest and make sure your GooglePlus profile is set to public) and look in your browserbar for the RSS Icon on right: Click on it</p>
<p><a target="_blank" href="http://landsurveyorsunited.com"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/547642?profile=original" width="750"></a>After you click the RSS you'll see a new feed URL ending in /public</p>
<p><a target="_blank" href="http://landsurveyorsunited.com/photo"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/547655?profile=original" width="750"></a>Copy that entire address and paste it into a <strong>RSS Module</strong> on your homepage or somewhere within your site (members can do this on their profiles too)</p>
<p> </p>
<p>This this what it looks like in <strong>Titles Only</strong> View</p>
<p><a target="_blank" href="http://landsurveyorsunited.com/leaderboards"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/547671?profile=original" width="325"></a></p>
<p>This is the <strong>Details View</strong></p>
<p><a target="_blank" href="http://landsurveyorsunited.com/"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/547691?profile=original" width="327"></a>You can see it live on <a rel="nofollow" href="http://landsurveyorsunited.com/" target="_blank">Land Surveyors United Network</a> Enjoy!</p></div>FREEBIE #1 Magazine Style CSS Template for Ning Pageshttps://creators.ning.com/forum/topics/freebie-1-magazine-style-css2011-07-16T00:13:46.000Z2011-07-16T00:13:46.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>I've been working on a project for a client which you'll all be most interested to see when I'm finished- basically a magazine-style build out on a Ning. One of my tasks this week was to create various magazine style templates that are compatible with pages on Ning. Today I am going to give you all one of these templates for two reasons.</p>
<p> </p>
<p>1) I want to show those of you who are unaware how powerful CSS can be and how it can be used on your Ning network.</p>
<p>2) I hope to raise the bar on the types of pages which can be produced using the ning platform and give you all a chance to build on a few examples and hopefully teach me something I haven't thought of yet.</p>
<p> </p>
<p>Below it a template for you to download and edit in your own text editor. If you do not have a text editor or are new to CSS/HTML, i suggest (<a rel="nofollow" href="http://kompozer.net" target="_blank">KOMPOZER</a>). The following template contains these features:</p>
<p>***Pure CSS layout with columns (2 images for place holders which you'll need to swtich out or substitute as you wish)</p>
<p>***Layout will work for BOTH Full Page Width Pages and Pages which retain the sidebar because the template is FLUID. If you would like to make this template a set width, you simply need to go into the first lines of code and look for "100%" and change that to say "600px" for example.</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557432?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/557432?profile=RESIZE_180x180" width="150"></a></p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557476?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/557476?profile=RESIZE_180x180" width="150"></a></p>
<p>The entire layout is heavily commented so you know what you are working with...simply view source and you'll see what I mean.</p>
<p> </p>
<p> </p>
<p> </p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/557528?profile=original">ATEAM-MAGAZINE.html</a></p>
<p>Play around with this and see what types of possibilities you can come up with. I suggest downloading it, open it with your text editor, customize it and copy the entire contents of the template from this section of the template</p>
<p><!-- **************************************************************<br> DIV FOR TOP</p>
<p> </p>
<p>to this section:</p>
<p>alt="placeholder image is 150 x 350"></p></p>
<p> </p>
<p>into your page, into the HTML view. When copy/pasting into your page, leave out everything above the <body> tag and everything below </body> tag. You might also be adventurous and deck this baby out into a magazine style splash page. As you can see, i got a little stupid with the A-Team Theme, but it just goes to show, the possibilities are endless. Enjoy!</p>
<p> </p>
<p>If you are looking for some ninjas to customize your Ning for you...look no further than <a rel="nofollow" href="http://work.justninjas.com" target="_blank">JUSTNINJAS</a> </p></div>TIPS: Add ADs only in main page, profile pages or any other pageshttps://creators.ning.com/forum/topics/tips-add-ads-only-in-main-page2011-06-30T03:32:26.000Z2011-06-30T03:32:26.000ZAlex 小正正https://creators.ning.com/members/Alexxiaozhengzheng<div><p>Sometimes you may want ADs or special contents display in the main page, profile pages or any other pages only. It's easy to display contents only in main page. Because you could add a text box that only show in main page. But how to control contents only display in profile pages but not in main page and any other pages? And how to control contents display in every pages except the main page and profile pages? Actually it's very easy. You just need a little CSS. </p>
<p> </p>
<p>Here are the steps:</p>
<p><strong><span style="font-family: 'arial black', 'avant garde';" class="font-size-5">1.</span></strong> Add a text box for all pages.</p>
<p><strong><span style="font-family: 'arial black', 'avant garde';" class="font-size-5">2.</span></strong> Edit the text box in HTML mode, put all content/ad inside a div tag with a special unique id:</p>
<p><span style="font-family: 'courier new', courier; color: #ff6600;"><div id="<span style="color: #000000;"><strong><em>ad_sidebar01</em></strong></span>"><br> <em><span style="color: #000000;">.... Your content or ad code here .... </span><br></em> </div></span></p>
<p> </p>
<p><strong><span style="font-family: 'arial black', 'avant garde';" class="font-size-5">3.</span></strong> Go to the <strong>Advance CSS</strong>, add this CSS code if you don't want it display in the main page but any other pages:</p>
<p><span style="font-family: 'courier new', courier; color: #ff6600;">.xg_widget_main <em><strong>#ad_sidebar01</strong></em> {display:none;}</span></p>
<p> </p>
<p>Or this CSS code if you don't want it display in all profile pages:</p>
<p><span style="color: #ff6600;"><span style="font-family: 'courier new', courier;">.xg_widget_profiles_profile</span> <span style="font-family: 'courier new', courier;"><em><strong>#ad_sidebar01</strong></em> {display:none;}</span></span></p>
<p> </p>
<p>If you add both, the content will display in every pages except the main page and profile pages.</p>
<p> </p>
<p><strong><span style="font-family: 'arial black', 'avant garde';" class="font-size-5">4.</span></strong> If you want it display in profile pages only, use this code:</p>
<p><span style="color: #ff6600; font-family: 'courier new', courier;"><em><strong>#ad_sidebar01</strong></em> {display:none;}<br></span> <span style="color: #ff6600; font-family: 'courier new', courier;">.xg_widget_profiles_profile <em><strong>#ad_sidebar01</strong></em> {display:block;}</span></p>
<p> </p>
<p>Remember to replace <em><strong>#ad_sidebar01</strong></em> with yours.</p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/547312?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/547312?profile=RESIZE_180x180" width="90" class="align-full"></a></p>
<p>This tips is tested with both Design Studio and old themes.</p>
<p> </p>
<p><a rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" target="_blank" href="http://www.iyoume.net">iYouMe.net</a>.</p></div>