activity - FORUM - Ning Creators Social Network2024-03-29T10:26:11Zhttps://creators.ning.com/forum/topics/feed/tag/activityWhen Activity Feed. 3.0?https://creators.ning.com/forum/topics/when-activity-feed-3-02021-04-09T07:32:23.000Z2021-04-09T07:32:23.000ZJ.Ayvarhttps://creators.ning.com/members/EsPasioncom<div><p>I Wonder when Ning will Update the activity Feed. I remember the activity Feed for Ning 2 was more friendly . We are talking about 10 o more years ago.</p><p>PD. I miss emojis Also. </p></div>Tip: Adding YouTube Videos , Vimeo etc into the activity feed ( updated )https://creators.ning.com/forum/topics/tip-adding-youtube-videos-vimeo-etc-into-the-activity-feed-update2021-01-20T23:03:54.000Z2021-01-20T23:03:54.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>Here is an updated tip as seems some things have changed since last time I posted that last tip.</p><p>You can try it and see how it looks here: <a href="https://jr-images.ning.com/" target="_blank">https://jr-images.ning.com/</a></p><p>First of all not many people know that you can add videos into the activity feed using the status share box, you can also add soundcloud into it, this has always been available but just not well known. You can embed but only using the link option( see image below ) to do it so you just copy the link from youtube and add it in the box then click share</p><p><a href="{{#staticFileLink}}8445027873,RESIZE_584x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8445027873,RESIZE_584x{{/staticFileLink}}" width="533" alt="8445027873?profile=RESIZE_584x" /></a>However it doesn't quite look ok for me as a bit small with grey borders and the video itself does not quite fit so here is some code to fix that.</p><p>BEFORE</p><p><a href="{{#staticFileLink}}8445034852,RESIZE_930x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8445034852,RESIZE_710x{{/staticFileLink}}" width="710" alt="8445034852?profile=RESIZE_710x" /></a>AFTER</p><p><a href="{{#staticFileLink}}8445035884,RESIZE_930x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8445035884,RESIZE_710x{{/staticFileLink}}" width="710" alt="8445035884?profile=RESIZE_710x" /></a>Again in my previous video I added a popout button but know we just can use youtube's pop out to watch the video outside of the page, you can also move it about and resize it.</p><p><a href="{{#staticFileLink}}8445038291,RESIZE_930x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8445038291,RESIZE_710x{{/staticFileLink}}" width="710" alt="8445038291?profile=RESIZE_710x" /></a><a href="{{#staticFileLink}}8445038871,original{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8445038871,RESIZE_710x{{/staticFileLink}}" width="710" alt="8445038871?profile=RESIZE_710x" /></a>Ok so here is the code to make the display a little better, the code just goes in your design studio custom css</p><p>.feedEvent-createStatus .activityFeed-content.media-frame { max-width:100%}<br />.activityFeed-embed[data-type="video"] > .activityFeed-embedContent{<br /> position: relative;<br /> box-sizing: border-box;<br /> padding-bottom: 56.25%!important;<br /> height: 0;<br /> overflow: hidden;<br /> max-width: 100%;<br /> width: auto;<br /> background: none;<br />padding:0px;<br />}<br />.activityFeed-embed[data-type="video"] > .activityFeed-embedContent iframe{<br /> position: absolute;<br /> min-width: 200px;<br /> max-width: 100%;<br /> min-height: 100%;<br /> width: 100% !important;<br /> height: 100%;<br /> top: 0;<br /> left: 0;<br />}</p><p> </p></div>TIP: Adding YouTube Videos Into Your Activity Feedhttps://creators.ning.com/forum/topics/tip-adding-youtube-videos-into-your-activity-feed2021-01-05T01:27:43.000Z2021-01-05T01:27:43.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>Now this is not something that a lot of NC's realise that you can do, you can add YouTube videos and other things like Soundcloud music into your activity feed. It's always been available but just not mentioned. The only problem with adding YouTube videos is that they where not big or responsive so here is a tip to remedy that. The videos you add do NOT get added to your current video pages they are just available in the activity feed.</p><p>This will work in the activity feeds in profile pages, side columns etc. The activity feeds must be set to detail and not titles only.</p><p>Here is an Example on my demo site, you will see I have added an activity feed in the side column as well so you can see it working there. I added a link to my profile page so you can check it out on profile pages also.</p><p>SITE URL: <a href="https://jr-images.ning.com/" target="_blank">https://jr-images.ning.com/</a></p><p>MY PAGE URL: <a href="https://jr-images.ning.com/members/bizz" target="_blank">https://jr-images.ning.com/members/bizz</a></p><p><strong>NOTE: Just use the YouTube link from share and not the embed option.</strong></p><p>No custom code is needed just css so all the code just goes in your design studio custom css. The first parts are optional but the last part is required.</p><p>First how to add a YouTube link to your activity. All you do is go to a video on YouTube you want to share then choose the share option under the video and copy the link ( don't choose embed )</p><p><a href="{{#staticFileLink}}8384734683,RESIZE_584x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8384734683,RESIZE_584x{{/staticFileLink}}" width="533" alt="8384734683?profile=RESIZE_584x" /></a>This is what you will paste into the status share box on your site at the top of your activity ( your members can do this as well ). If you don't want to add any text then just paste the link and choose share on your site or whatever you named the button.</p><p>If you are adding a little text like a description add that first then press enter and add the link on a new line.</p><p>Ok so here is the code. In the optional parts you can add all of the blocks of code or just the ones you want. You MUST add the required code at the bottom though.</p><p>/*** THESE ARE OPTIONAL SETTINGS ***/</p><p>/* Changes the text on status post back to normal rather than bold */<br />.activityFeed-detailTitle {<br /> font-weight:normal;<br /> margin-top:1em;<br /> }</p><p><br />/*Add the Words You Tube link above the link added */<br />.activityFeed-detailTitle.create_status > a[href^="https://youtu.be/"]::before,<br />.statusDetailPage-mainSection .activityFeed-headline > a[href^="https://youtu.be/"]::before{<br />content:"You Tube Link";display:block;<br /> }</p><p><br />/* Adds Some Padding and margin between the Headline and link */<br />.statusDetailPage-mainSection .activityFeed-headline > a[href^="https://youtu.be/"],<br />.activityFeed-detailTitle.create_status > a[href^="https://youtu.be/"]{<br />display:block;<br />clear:both;<br />margin-top:1em;<br />padding:5px 0px 0px 5px;<br /> }</p><p><br />/*Widens the box which holds the status content */<br />.feedEvent-createStatus .activityFeed-content,<br />.statusDetailPage-mainSection .activityFeed-content{<br /> max-width:100%<br /> }</p><p> </p><p>/** THESE ARE REQUIRED to make the video bigger and responsive **/</p><p>.activityFeed-embed[data-type="video"] > .activityFeed-embedContent{<br /> position: relative!important;<br /> padding-bottom: 56.25%!important;<br /> height: 0!important;<br /> overflow: hidden!important;<br /> max-width: 100%!important;<br /> height: auto!important;<br /> width:auto;<br /> background:none;<br />}<br />.activityFeed-embed[data-type="video"] .videoFrame iframe,<br />.activityFeed-embed[data-type="video"] > .activityFeed-embedContent iframe{<br /> border: none!important;<br /> overflow: hidden!important;<br /> position: absolute!important;<br /> top: 0!important;<br /> left: 0!important;<br /> width: 100%!important;<br /> height: 100%!important;<br />}</p></div>Tip: Adding a plus media button to your activity feedhttps://creators.ning.com/forum/topics/tip-adding-a-plus-media-button-to-your-activity-feed2020-04-06T15:09:53.000Z2020-04-06T15:09:53.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>The other day I posted a tip for adding some buttons for adding content in the activity feed, the photo and video buttons was using one of each of the modules add buttons so was a bit restrictive if you had more than one instance of them so here is another way so if you have more than one photo page and video page you can have the member choose which to add the content to.</p><p>Below is and example of the new add media button and also showing once clicked the modules which show up. I added a few pages of each so you can see how it looks when you add a few of the modules.</p><p><a href="{{#staticFileLink}}4342119118,original{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}4342119118,RESIZE_710x{{/staticFileLink}}" width="710" alt="4342119118?profile=RESIZE_710x" /></a>And when the +Media button is clicked it show this</p><p><a href="{{#staticFileLink}}4342128843,original{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}4342128843,RESIZE_710x{{/staticFileLink}}" width="710" alt="4342128843?profile=RESIZE_710x" /></a>So now the member can choose which page they want to add them too.</p><p>How this works is we use the add content feature to add the pages we want making use of the new Add Photo / Video buttons ning have added, we are just keeping the top part and hiding the image below it. As you can see in the picture we can still add content into the other columns as normal.</p><p>How we set this up is we go to our sites and pages and use the add content to add the modules we want and place them above the activity so we can see which we have added, make sure the box for hiding the add button is un-checked. You can see below I have added an image to show how I added mine for the above demo pics.</p><p>PLEASE NOTE: The code will add the photo and video bundles you add to the column you have chosen to use the code for. Below is two sets of code, one for if you have your activity in the wide column and the other if you have your activity in the side narrow columns. Please choose the code you want for your column.</p><p>Here is an image of how mine is set up</p><p><a href="{{#staticFileLink}}4342185857,RESIZE_930x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}4342185857,RESIZE_710x{{/staticFileLink}}" width="710" alt="4342185857?profile=RESIZE_710x" /></a><a href="{{#staticFileLink}}4296473386,RESIZE_710x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}4296473386,RESIZE_710x{{/staticFileLink}}" width="611" alt="4296473386?profile=RESIZE_710x" /></a>So here is the codes</p><p><strong>WIDE COLUMN</strong> CODE</p><p><strong>CSS which goes in your design studio custom css</strong></p><p>.js-statusForm > .pullright-photo{<br />float: none!important;<br /> width: 100%;<br /> clear: both;<br /> text-align: right;<br /> margin-bottom: 10px;<br />}<br />.isActivityPage .column-wide .section-photoBundle, .isActivityPage .column-wide .section-videoBundle{ display:none }<br />.photoChoice .grid-frame{ width:50%; display:inline-block!important;}<br />.photoChoice .module-body, .photoChoice .module-footer{ display:none }</p><p><br />a.OpenStatusAddPhoto-more{<br />margin-right: 10px;<br /> background-color: #f2eeee;<br /> padding: 7px;<br />}<br />a.OpenStatusAddPhoto-more:hover{<br />background-color:royalblue;<br />color:white;<br />cursor:pointer;<br />}</p><p><strong>CUSTOM CODE which goes in your Social Site Builder > Custom Code > End Of Page</strong></p><p><script><br />x$('<a class="OpenStatusAddPhoto-more" title="Add Media">+ Media</a>').insertBefore('.js-statusForm .pull-right .button.button-primary');<br /></script></p><p><script><br />x$(document).ready(function() {<br />x$('.section-activity, .section-member-activity').closest('body').addClass('isActivityPage');<br />});<br /></script></p><p><script><br />x$(document).ready(function() {<br />x$('<div/>',{ class : 'photoChoice'}).appendTo('.js-statusForm.statusForm').hide();<br />x$('.isActivityPage .column-wide .section-photoBundle,.isActivityPage .column-wide .section-videoBundle').hide();<br />x$('.isActivityPage .column-wide .section-photoBundle').appendTo('.photoChoice');<br />x$('.isActivityPage .column-wide .section-videoBundle').appendTo('.photoChoice');<br />});<br /></script></p><p><script><br /> x$("a.OpenStatusAddPhoto-more").toggle(<br />function(){<br />x$('.js-statusForm .pull-right').addClass('pullright-photo');<br />x$('.isActivityPage .column-wide .section-photoBundle').show();<br />x$('.isActivityPage .column-wide .section-videoBundle').show();<br />x$('.isActivityPage .column-wide .photoChoice').slideDown(500);<br />},<br />function(){ <br />x$('.photoChoice').slideUp(500);<br />x$('.isActivityPage .column-wide .section-photoBundle').hide();<br />x$('.isActivityPage .column-wide .section-videoBundle').hide();<br /> }); <br /> </script></p><p> </p><p><strong>NARROW COLUMNS</strong> ie Side Columns</p><p><strong>CSS into your design studio custom css</strong></p><p>.js-statusForm > .pullright-photo{<br />float: none!important;<br /> width: 100%;<br /> clear: both;<br /> text-align: right;<br /> margin-bottom: 10px;<br />}<br />.isActivityPage .column-narrow .section-photoBundle, .isActivityPage .column-narrow .section-videoBundle{ display:none }<br />.photoChoice .grid-frame{ width:50%; display:inline-block!important;}<br />.photoChoice .module-body, .photoChoice .module-footer{ display:none }<br />.isActivityPage .column-narrow .photoChoice .grid-frame { width:100%; display:block!important;}</p><p><br />a.OpenStatusAddPhoto-more{<br />margin-right: 10px;<br /> background-color: #f2eeee;<br /> padding: 7px;<br />}<br />a.OpenStatusAddPhoto-more:hover{<br />background-color:royalblue;<br />color:white;<br />cursor:pointer;<br />}</p><p> </p><p><strong>CUSTOM CODE which goes in your Social Site Builder > Custom Code > End Of Page</strong></p><p><script><br />x$('<a class="OpenStatusAddPhoto-more" title="Add Media">+ Media</a>').insertBefore('.js-statusForm .pull-right .button.button-primary');<br /></script></p><p><script><br />x$(document).ready(function() {<br />x$('.section-activity, .section-member-activity').closest('body').addClass('isActivityPage');<br />});<br /></script></p><p><script><br />x$(document).ready(function() {<br />x$('<div/>',{ class : 'photoChoice'}).appendTo('.js-statusForm.statusForm').hide();<br />x$('.isActivityPage .column-narrow .section-photoBundle,.isActivityPage .column-narrow .section-videoBundle').hide();<br />x$('.isActivityPage .column-narrow .section-photoBundle').appendTo('.photoChoice');<br />x$('.isActivityPage .column-narrow .section-videoBundle').appendTo('.photoChoice');<br />});<br /></script></p><p><script><br /> x$("a.OpenStatusAddPhoto-more").toggle(<br />function(){<br />x$('.js-statusForm .pull-right').addClass('pullright-photo');<br />x$('.isActivityPage .column-narrow .section-photoBundle').show();<br />x$('.isActivityPage .column-narrow .section-videoBundle').show();<br />x$('.isActivityPage .column-narrow .photoChoice').slideDown(500);<br />},<br />function(){ <br />x$('.photoChoice').slideUp(500);<br />x$('.isActivityPage .column-narrow .section-photoBundle').hide();<br />x$('.isActivityPage .column-narrow .section-videoBundle').hide();<br /> }); <br /> </script></p><p> </p><p>That's it, hope you find it useful</p><p>Bizz :-)</p></div>Tip: Adding add content links to your activity feedhttps://creators.ning.com/forum/topics/tip-adding-add-content-links-to-your-activity-feed2020-04-01T19:32:35.000Z2020-04-01T19:32:35.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>This tip will allow you to add some add content links below your status box on the activity feed to make it easier for members to add stuff. Seeing as now Ning haved added a new button on the photos modules we can also use this to our advantage as we can trigger the add photo button they have now. Here is an image of the links and below that is a description and code of how to add them.</p><p><a href="{{#staticFileLink}}4296448724,RESIZE_1200x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}4296448724,RESIZE_710x{{/staticFileLink}}" width="710" alt="4296448724?profile=RESIZE_710x" /></a>Ok so let's talk about the +Photo button and how we need to set that up as this it what fires the add photo, the others are just simply opening the relevent page to add the content. So how the add photo one works is we are going to use the new Add Photo button that is now there when we add photo content to the page, ie latest photos etc.</p><p><a href="{{#staticFileLink}}4296473386,RESIZE_710x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}4296473386,RESIZE_710x{{/staticFileLink}}" width="611" alt="4296473386?profile=RESIZE_710x" /></a>As you can see in the above image I have added two photo blocks for demostration, you don't have to add two but it is easier to explain how this works by doing so. So we add the content to the add as normal making sure the Hide 'Add Content' button is not ticked as we need that button. We can add more than one photo instance as the code will look for the first one to use so always make sure this main one is above any others.</p><p>The code will alos add the links to the members profile page.</p><p>So what is going to happen is the code will hide the add photo button on the first module, you can still keep the button if you want by not adding the css which hides it there is also a line of code to hide the module completly if you want. When a member clicks on the new add photo button in the links we have added it will fire the add photo button so the process of adding a new photo begins.</p><p>I will be add a further option at a later stage so if you have multiple photo pages you can select which one you want to add photos to.</p><p>Ok so first we need to add some custom code and this goes in your Social Site Builder > Custom Code > End of page section.</p><p>PLEASE NOTE: the links in the code will need to be altered if you have named your blog, forum, videos something else, so for instance if you have named your video page media then you would alter this line with the new name</p><p>default: x$('<a href="/videos/video/new"</p><p>to</p><p>new: x$('<a href="/media/video/new"</p><p>Ok so copy this code below and add it to your custom code</p><p><script><br />// Holding div for the link<br />x$('<div/>',{ class : 'OpenStatus-Links'}).appendTo('.js-statusForm.statusForm, .profileCoverArea-actions');<br />//LINKs TO OPEN THE ADD PHOTO blogs discussions etc<br />x$('<a class="OpenStatusAddPhoto" title="Add Photo/s">+ Photo</a>').appendTo('.OpenStatus-Links');<br />x$('<a href="/videos/video/new" class="OpenStatusAddVideo" title="Add Video">+ Video</a>').appendTo('.OpenStatus-Links');<br />x$('<a href="/blog/blogpost/new" class="OpenStatusAddBlog" title="Add Blog">+ Blog</a>').appendTo('.OpenStatus-Links');<br />x$('<a href="/forum/discussion/new" class="OpenStatusAddDiscussion" title="Add Discussion">+ Discussion</a>').appendTo('.OpenStatus-Links');<br /></script></p><p><script><br />//Add a class for the photo bundle to be used<br />x$(document).ready(function() {<br />x$('.section-activity, .section-member-activity').closest('body').addClass('isActivityPage');<br />x$('.section-photoBundle:first-of-type').addClass('photoBundle-one');<br />});<br /></script></p><p><script><br />// Opens the add photo container<br />x$(document).ready(function() {<br />x$('a.OpenStatusAddPhoto').click(function(){<br />x$('.section-photoBundle.photoBundle-one .section_header .pull-right').contents().find('.transparentFileInputButton-fileInput').trigger( "click" );<br />});<br />});<br /></script></p><p>NEXT IS CSS. So now we need to add a little css to your design studio custom css, depending on your colour scheme you may have to adjust the css colours in the .OpenStatus-Links a{ section</p><p>The options for hidng the button and module is at the bottom so you either add them or not as it's upto you how you want that.</p><p>/* Add photo blog discussion video link buttons*/<br />@media only screen and (max-width:771px){<br />.OpenStatus-Links{<br /> float:left; clear:both;<br />width:100%; <br />margin-top:10px }<br />}</p><p>a.OpenStatusAddPhoto:hover, a.AddPhotoContainer-Closer:hover{ cursor: pointer}<br />.OpenStatus-Links{ <br />margin-top:5px; <br />margin-bottom:10px;<br />text-align:right;<br />}<br /> .OpenStatus-Links a{<br /> display:inline-block; <br />margin-right:10px;<br />margin-bottom:10px;<br />background-color:#f4f4f4; <br />color:darkgrey; <br />padding:4px 6px; border-radius:3px; }<br /> .OpenStatus-Links a:hover{ <br />cursor:pointer; <br />background-color: #7690EA; <br />color: white; <br />text-decoration: none;<br />}</p><p>/** This hides just the add photo button the module **/<br />.isActivityPage .section-photoBundle.photoBundle-one .section_header .pull-right{ display:none }</p><p>/*** This hides the bundle all together **/<br />.isActivityPage .photoBundle-one{ display:none }</p><p> </p><p>Hope you find this useful</p><p>Bizz :-)</p></div>Display all discussion topics and replies from all groups on custom page?https://creators.ning.com/forum/topics/display-all-discussion-topics-and-replies-from-all-groups-on-cust2018-04-25T23:50:54.000Z2018-04-25T23:50:54.000ZJeff Lynnhttps://creators.ning.com/members/JeffLynn<div><p>I want to make a page where I can display all discussion topics and replies from all groups. I do not want the feed to display any other activity. Is this possible? </p></div>Videos Playing In Activity Feed, check it out on my site, Now shows photos to ( Updated: 27-04-17 )https://creators.ning.com/forum/topics/videos-playing-in-activity-feed-check-it-out-on-my-site2017-04-18T23:15:06.000Z2017-04-18T23:15:06.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>UPDATED 27-04-17</p>
<p>Well I thought I would re-write this post as quite a few updates since I posted this so here is what this all does now.</p>
<ol>
<li>When videos are added they show in the activity feed so we can now play them in the feed by clicking on the video image</li>
<li>You can also comment on it by clicking the comment link or view it in the main video page via the link for that.</li>
<li>Close the video by the little X button or it will close on it's own if you click on another one.</li>
<li>Works when multiple photos have been added, click on one in the list and it will show up, click on another one and it will be replaced by that one.</li>
<li>Works now on photos posted to.</li>
<li>Click on a photo in the feed and it will show bigger with options to comment</li>
<li>Click the image again and it goes full screen ( a bit like facebook ones do ) click the photo in full screen to return to feed.</li>
</ol>
<p>I will post how I did all this as in the process of tidying up the code for sharing but in the mean time you can visit my site to try it out.</p>
<p><a href="http://bizzssite.ning.com/" target="_blank">http://bizzssite.ning.com/</a></p>
<p>John :-)</p>
</div>Testing New Tip For Viewing Items From Activity Feed Without Leaving The Pagehttps://creators.ning.com/forum/topics/testing-new-tip-for-viewing-items-from-activity-feed-without-leav2016-12-31T00:15:27.000Z2016-12-31T00:15:27.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>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, also when you click on the comment count you get taken to another page to view the status. Now the problem with that is you then have to click the back button or home tab to get back to where you came from and then scroll back down the activity feed.</p>
<p>So what this tip does is open that status page over the top of the activity feed so you do not leave that page or place in the feed. With regards to the comments list I have let only the Latest comment display in the activity stream to keep it a little cleaner, if the member wants to see all the comments they just click on the link with the comments count in.</p>
<p>I have added a short status comment in my feed so you can see how that looks. I have also added a soundcloud post and a video post so you can see how that would look if a members adds one of those into the activity feed, by the way I have added a lot of demo comments on the video one so you can see how a long list looks of comments.</p>
<p>The other part I added was for the photos, so if you click on a photo in the activity or it's title or it's comment count that will open over the activity feed as well. This is quite nice as again you can view, comment or like a photo without leaving the activity feed.</p>
<p>I have not added this for forums or blogs as those I think are quite important to go directly to those pages but it could be added.</p>
<p>I have tried this on quite a few devices and browsers ( except safari ) and all works a treat. Any way take a look and let me know how it works for you then I will share all the code etc after a bit more of a code tidy up.</p>
<p>Here is the link to my site: <a href="http://bizzssite.ning.com/" target="_blank">http://bizzssite.ning.com/</a></p>
<p>John :-)</p>
</div>How to generate activity...https://creators.ning.com/forum/topics/how-to-generate-activity2011-11-01T01:05:27.000Z2011-11-01T01:05:27.000ZAlex from Bougex.comhttps://creators.ning.com/members/AlexfromBougexcom<div><p>I found a good way to generate activity on my network : </p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/548851?profile=original"><img class="align-full" width="356" src="http://storage.ning.com/topology/rest/1.0/file/get/548851?profile=original"></a></p>
<p>You just need to go in the language editor and search for "Settings" </p>
<p>Change "Settings" by : </p>
<blockquote>
<p>Settings</a><br><br><h2>Add</h2><a href="/events/event/new" target="_top" title="Add an event"><img src="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/calendar.png" width="48" /></a> <a href="/photo/photo/newWithUploader" target="_top" title="Add Photos"><img src="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/camera.png" width="48" /></a> <a href="/video/video/addEmbed" target="_top" title="Add a Video"><img src="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/video.png" width="48" /></a> <a href="http://www.ning.com" target="_top" title="Add a Classified"><img src="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/shopping_cart.png" width="48" /></a> <a href="http://www.ning.com" target="_top" title="Add a Discussion"><img src="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/comments.png" width="48" /></a> <a href="/profiles/blog/new" target="_top" title="Add a Blog Post"><img src="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/blog.png" width="48" /></a></p>
</blockquote>
<p>Enjoy ! </p>
<p>Alex <br> <a rel="nofollow" href="http://On.Zocalox.com">http://On.Zocalox.com</a> </p></div>TIPS: Move Quick Share Links to the Bottom of Status Feedhttps://creators.ning.com/forum/topics/tips-move-quick-share-links-to-the-bottom-of-status-feed2011-08-09T11:27:38.000Z2011-08-09T11:27:38.000ZAlex 小正正https://creators.ning.com/members/Alexxiaozhengzheng<div><p>If you want the quick share links move to the bottom status feed:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/547922?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/547922?profile=original" width="510" class="align-full"></a>Add these in Advanced CSS:</p>
<p> </p>
<p><span style="color: #808080;"><strong><span style="font-family: 'courier new', courier;">/* status feed module */</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper{position: relative;}</span></strong></span></p>
<p><span style="color: #808080;"><strong><span style="font-family: 'courier new', courier;">/* quick-add links bar */</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .quickadd-options-links{position: absolute;<br> bottom:2.5em; right:0;}</span></strong></span></p>
<p><span style="color: #808080;"><strong><span style="font-family: 'courier new', courier;">/* space above of the share button */</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .xj_hint_container{padding-top: 1.5em;}</span></strong></span></p>
<p><span style="color: #808080;"><strong><span style="font-family: 'courier new', courier;">/* hide share wording */</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .list-title{display:none;}</span></strong></span></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>If you want it inside the status feed input box, like Google+ style:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/547948?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/547948?profile=original" width="510" class="align-full"></a>Use these CSS:</p>
<p> </p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper {position: relative;}</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .quickadd-options-links{position: absolute;<br> bottom:3.2em; right:1em;}</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .input-container{padding-bottom: 1.5em !important;}</span></strong></span></p>
<p><span style="color: #ff6600;"><strong><span style="font-family: 'courier new', courier;">.xg_status_wrapper .list-title{display:none;}</span></strong></span></p>
<p> </p>
<p> </p>
<p>Enjoy!!</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/547970?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/547970?profile=original" width="100" class="align-full"></a>This tips can be used with both Design Studio and old themes.</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>TIPS: Add customize icons with share links in activity feedhttps://creators.ning.com/forum/topics/tips-add-customize-icons-with-share-links-in-activity-feed2011-08-05T22:44:21.000Z2011-08-05T22:44:21.000ZAlex 小正正https://creators.ning.com/members/Alexxiaozhengzheng<div><p> </p>
<p>I know you want icons, just like what we see in Facebook and Google+.</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/547862?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/547862?profile=original" width="511" class="align-full"></a></p>
<p> </p>
<p>Now you get the TIPS!!</p>
<p> </p>
<p>This tips is for everyone who put the activity feed in the main column. But if you are using NING Pro and have all functions/modules in your site. Maybe there is not enough space for you to add all icons with all the share links if your page is 3 columns layout. I'll have another tips that use ICON ONLY for the share links. You'll find that tips in <a rel="nofollow" href="http://jensocial.com/" target="_blank">jensocial</a>.</p>
<p> </p>
<p>You have chooses to add icons. Using NING's icons or yours.</p>
<p>Let's talk about add NING's icons first. Just add the following CSS in <strong>Advanced CSS</strong>:</p>
<p> </p>
<p class="p1"><strong><span style="font-family: 'courier new', courier; color: #808080;">/* quick add link icons */</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">padding-left: <span class="s1">20</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">background-repeat: no-repeat;</span></strong></p>
<p class="p3"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"><span class="s2">background-image: url(</span>'http://static.ning.com/socialnetworkmain/widgets/index/gfx/icons/xg_sprite-FF3333.png'<span class="s2">);</span></span></strong></p>
<p class="p3"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"><span class="s2">_background-image: url(</span>'http://static.ning.com/socialnetworkmain/widgets/index/gfx/icons/ie6/xg_sprite-FF3333.png'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"post"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3251</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"discussion"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3287</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"event"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3321</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"photo"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3463</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"video"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3497</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"music"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> background-position: left -<span class="s1">3394</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p> </p>
<p><strong>The codes that include the background image files should be one line non-break. </strong>You can simply download this <a href="http://storage.ning.com/topology/rest/1.0/file/get/547921?profile=original" target="_self">share_link_icon.css</a> and copy paste. Same CSS code as above.</p>
<p>If you want to change the color of icons, just change background image file name. For example, </p>
<p><span style="font-family: 'courier new', courier;">xg_sprite-3366FF.png</span></p>
<p><span style="font-family: 'courier new', courier;">xg_sprite-0000FF.png</span></p>
<p><span style="font-family: 'courier new', courier;">xg_sprite-FF3333.png</span></p>
<p> </p>
<p>for xg_sprite-<strong>3366FF</strong>.png , the color is #3366FF. Use Capital.</p>
<p>I'm not sure how many colors NING provide. Change the hex color numbers feels like a lucky draw. :P</p>
<p> </p>
<p>If you want use your own icons, add these CSS in <strong>Advanced CSS</strong>:</p>
<p class="p1"> </p>
<p class="p1"><strong><span style="font-family: 'courier new', courier; color: #808080;">/* quick add link customize icons*/</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">padding-left: <span class="s1">20</span>px;</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">background-repeat: no-repeat;</span></strong></p>
<p class="p3"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"post"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-post-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"discussion"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-post-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"event"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-discussion-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"photo"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-photo-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"video"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-video-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">.quickadd-options-links a[data-value=<span class="s3">"music"</span>] {</span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;"> <span class="s2">background-image: url(</span>'<span style="color: #99cc00;">your-music-icon.png</span>'<span class="s2">);</span></span></strong></p>
<p class="p2"><strong><span style="font-family: 'courier new', courier; color: #ff6600;">}</span></strong></p>
<p> </p>
<p>If you create your own icon set, please kindly share with us. Thank you.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/547887?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/547887?profile=original" width="100" class="align-full"></a>This tips can be used with both Design Studio and old themes.</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>TIPS: Add more share links below the status box in main pagehttps://creators.ning.com/forum/topics/tips-add-more-share-links2011-06-25T22:29:31.000Z2011-06-25T22:29:31.000ZAlex 小正正https://creators.ning.com/members/Alexxiaozhengzheng<div><p><a target="_self" href="http://creators.ning.com/forum/topics/activity-feed-roundup">NING said</a> they will integrate the super-useful but rarely-used Quick Add drop-down into the Activity Feed, so members can add content like photos or blog posts directly from the Main Page. But before that, you still can have these Quick Add links and make them useful.</p>
<p>Base on <a target="_self" href="http://creators.ning.com/forum/topics/code-to-insert-add-buttons-for">this discussion</a> and thanks <a href="http://creators.ning.com/profile/Mikeutah">Mike</a> for the idea and the code. I recreate it. Should be more light and performance. But you need to do more steps.</p>
<p> </p>
<p>Add more share links below the status box in main page. Looks like this:</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/547212?profile=original"><img class="align-full" width="516" src="http://storage.ning.com/topology/rest/1.0/file/get/547212?profile=original"></a></p>
<p> </p>
<p><span class="font-size-5" style="font-family: 'arial black', 'avant garde';">1.</span> Edit any <strong>text box</strong> in the main page. Add the HTML code into the text box for the links:</p>
<p> </p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/547232?profile=original"><img class="align-full" width="612" src="http://storage.ning.com/topology/rest/1.0/file/get/547232?profile=original"></a></p>
<p>Right click to download the HTML code here: <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/547325?profile=original">activity_share_links.html</a></p>
<p>You can modify it. Remember to paste it in the HTML Editor view. If you don't know which text box should be used. I suggest you pick one that only displayed in main page. The links won't display at the first time, it doesn't matter which text box you used. Because it only for main page. So pick one text box that only displayed in main page is better.</p>
<p> </p>
<p><span style="font-family: 'arial black', 'avant garde';" class="font-size-5">2.</span> Go to the <strong>Custom Code</strong>, add this line for YUI 3 if you don't have yet:</p>
<p><span style="font-family: 'courier new', courier;"><script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script></span></p>
<p> </p>
<p><span class="font-size-5" style="font-family: 'arial black', 'avant garde';">3.</span> Copy the url link of this Javascript file: <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/547351?profile=original">ningActivityFeedShareLinks.js</a></p>
<p> </p>
<p><span class="font-size-5" style="font-family: 'arial black', 'avant garde';">4.</span> Go to the <strong>Custom Code</strong>, add this line for the Javascript file you just copied. </p>
<p><span style="font-family: 'courier new', courier;"><script src="http://api.ning.com:80/files/............/ningActivityFeedShareLinks.js" charset="utf-8"></script> </span></p>
<p> </p>
<p><span class="font-size-4">Save and you get it!!</span></p>
<p> </p>
<p>Here is the content of the Javascript file:</p>
<p> </p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/547258?profile=original"><img class="align-full" width="638" src="http://storage.ning.com/topology/rest/1.0/file/get/547258?profile=original"></a></p>
<p> </p></div>