events - FORUM - Ning Creators Social Network2024-03-29T05:51:40Zhttps://creators.ning.com/forum/topics/feed/tag/eventsTIP: TURN OFF REQUIRED EVENT IMAGE AND USE THE DEFAULT ONEhttps://creators.ning.com/forum/topics/tip-turn-off-required-event-image-and-use-the-default-one2021-01-10T23:13:43.000Z2021-01-10T23:13:43.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>Been meaning to get around to this as it has been requested. What this does is turn of the required event image when creating one and so leave the default one provided. In part two I will show how to add your own default one in another tip.</p><p>You can see how the default image looks in the images below. or you can visit my site here to see a live preview <a href="https://jr-images.ning.com/events" target="_blank">https://jr-images.ning.com/events</a></p><p>So first off all you will need to edit the code if you have called your events page something else, if you left it as events then you just need to add the code as it is.</p><p>So if you named your events page to something else then you need to add your page name by replacing the part in bold, so if you called it something like our events then you would enter this</p><p>.page-our-events</p><p>Notice the hyphen's to replace the spaces</p><p>So here is the part you need to change in the code block</p><p>x$(' <strong>.page-events</strong> .entryEditPage #entry-form ')</p><p><strong>So here is the code you need to add and you add this to your Social Site Manager > Custom Code > end of page section ( do not include this line with the code )</strong></p><p> </p><p><script><br />// Remove Image require in events, change to default image<br />x$(document).ready(function(){<br />x$('.page-events .entryEditPage #entry-form').attr('data-image-required','false');<br />});<br /></script></p><p> </p><p>And here are some demo images of how it would look with the default image</p><p>ACTIVITY FEED</p><p><a href="{{#staticFileLink}}8409899081,RESIZE_930x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8409899081,RESIZE_710x{{/staticFileLink}}" width="710" alt="8409899081?profile=RESIZE_710x" /></a>AND THE EVENT ITSELF</p><p><a href="{{#staticFileLink}}8409899653,RESIZE_930x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8409899653,RESIZE_710x{{/staticFileLink}}" width="710" alt="8409899653?profile=RESIZE_710x" /></a></p></div>Events Months Styling Tiphttps://creators.ning.com/forum/topics/events-months-styling-tip2019-05-03T22:25:39.000Z2019-05-03T22:25:39.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>I added a tip for adding a widget to your site which checks against your events and will show events that are upcoming for the current month and if none will let your members know, you can find that tip here and what it looks like with also the code for it :<a href="https://creators.ning.com/forum/topics/add-a-this-months-events-display-widget-to-your-site-tip" target="_blank" rel="noopener">Add Events Widget</a></p><p>This tip here is now how to seperate each month and by doing so we can style them to make it easier to view events by the month while also tidying up the display of them a little better. We need to add two lots of code for this, the first is some custom code to wrap out events and the second is some css to style them.</p><p>Here is alink to my events page; <a href="https://gromsquad.ning.com/events" target="_blank" rel="noopener">https://gromsquad.ning.com/events</a></p><p>First we need to add some custom code so we can wrap the event months ready for styling. This code goes in your social site manager > custom code > end of page section</p><p><script><br/>x$(document).ready(function(){<br/>//Add the classes to the months<br/>//13-04-19 John Bizley<br/>//Add A Class To The Start Month In eventPage-detail in eventlistpage<br/>var StartMonth = x$('.eventPage-details .span10 ul:nth-child(1) > li:nth-child(2) > a:nth-child(1)').addClass('startMonth');<br/>var $January = x$('.eventListPage .startMonth:contains(Jan)').closest('article.entry').addClass('january').wrapAll('<div id="JanWrap" class="calendarGrid"></div>');<br/>var $February = x$('.eventListPage .startMonth:contains(Feb)').closest('article.entry').addClass('february').wrapAll('<div id="FebWrap" class="calendarGrid"></div>');<br/>var $March = x$('.eventListPage .startMonth:contains(Mar)').closest('article.entry').addClass('march').wrapAll('<div id="MarWrap" class="calendarGrid"></div>');<br/>var $April = x$('.eventListPage .startMonth:contains(Apr)').closest('article.entry').addClass('april').wrapAll('<div id="AprWrap" class="calendarGrid"></div>');<br/>var $May = x$('.eventListPage .startMonth:contains(May)').closest('article.entry').addClass('may').wrapAll('<div id="MayWrap" class="calendarGrid"></div>');<br/>var $June = x$('.eventListPage .startMonth:contains(Jun)').closest('article.entry').addClass('june').wrapAll('<div id="JunWrap" class="calendarGrid"></div>');<br/>var $July = x$('.eventListPage .startMonth:contains(Jul)').closest('article.entry').addClass('july').wrapAll('<div id="JulWrap" class="calendarGrid"></div>');<br/>var $August = x$('.eventListPage .startMonth:contains(Aug)').closest('article.entry').addClass('august').wrapAll('<div id="AugWrap" class="calendarGrid"></div>');<br/>var $September = x$('.eventListPage .startMonth:contains(Sep)').closest('article.entry').addClass('september').wrapAll('<div id="SeptWrap" class="calendarGrid"></div>');<br/>var $October = x$('.eventListPage .startMonth:contains(Oct)').closest('article.entry').addClass('october').wrapAll('<div id="OctWrap" class="calendarGrid"></div>');<br/>var $November = x$('.eventListPage .startMonth:contains(Nov)').closest('article.entry').addClass('november').wrapAll('<div id="NovWrap" class="calendarGrid"></div>');<br/>var $December = x$('.eventListPage .startMonth:contains(Dec)').closest('article.entry').addClass('december').wrapAll('<div id="DecWrap" class="calendarGrid"></div>');<br/>var cgTitle = x$('.calendarGrid').prepend('<div class="calendarGrid-Title"></div>');<br/>var cgTitleName = x$('.calendarGrid-Title').append('<h3 class="monthHeader-name">Month</h3>');</p><p>x$('#JanWrap h3.monthHeader-name').html("January");<br/>x$('#FebWrap h3.monthHeader-name').html("February");<br/>x$('#MarWrap h3.monthHeader-name').html("March");<br/>x$('#AprWrap h3.monthHeader-name').html("April");<br/>x$('#MayWrap h3.monthHeader-name').html("May");<br/>x$('#JunWrap h3.monthHeader-name').html("June");<br/>x$('#JulWrap h3.monthHeader-name').html("July");<br/>x$('#AugWrap h3.monthHeader-name').html("August");<br/>x$('#SepWrap h3.monthHeader-name').html("September");<br/>x$('#OctWrap h3.monthHeader-name').html("October");<br/>x$('#Noverap h3.monthHeader-name').html("November");<br/>x$('#DecWrap h3.monthHeader-name').html("December");<br/>});<br/></script></p><p> </p><p>NEXT we can add our css which will style the events list page and detail page. This code goes in your design studio custom css</p><p>/************* EVENTS AND EVENT WIDGET ***********/</p><p>/*Adding a background to a wrap*/<br/>#DecWrap{background-image: url("{{#staticFileLink}}1952482221,original{{/staticFileLink}}");}<br/>#DecWrap .monthHeader-name{ color:white }</p><p>#DecWrap .entry.december{background-image: url("{{#staticFileLink}}1952482226,original{{/staticFileLink}}");}<br/>#DecWrap .entry.december .media-body, #DecWrap .entry.december .media-body a{ color:white }<br/> #DecWrap .entry.december .media-body a:hover{ color:#7df07e }<br/>#DecWrap .entry.december .media-body{ background-color: rgba(129, 35, 35, 0.79);}<br/>#DecWrap .entry.december .span3 {color: white; background-color: rgba(129, 35, 35, 0.49);text-align:center}</p><p>/** CALENDAR GRID This is the grid which will surround each of the months **/</p><p>/** Events Monthly Headers **/<br/>.calendarGrid-Title{<br/> width:100%; clear:both;<br/> }<br/>.monthHeader-name{<br/>font-weight:bold;<br/>display:block;<br/>padding:10px 20px;<br/>color:#1a11b1;<br/>background-color:rgba(127, 63, 191,0.3);<br/>border-radius:6px 6px 0px 0px; font-size:1.7em<br/>}<br/>.eventListPage.sheet{<br/>background-color:#fbfbfb!important;<br/>}<br/>.eventListPage .entry{<br/>background-color:white<br/>}</p><p><br/>/**MAIN LIST PAGE **/<br/>/***** EVENTS ****/<br/>/* Margin between each post */</p><p>/** Margin between each of the posts plus some padding**/<br/>.eventListPage .entry{<br/>margin-bottom:20px;<br/>padding:10px<br/> }<br/>.section-eventBundle .entry {<br/>margin-bottom: 15px;<br/>}</p><p>/*Links In The Header Module ByLine For Inviting Members when creating an event */<br/>.module-byline > a{<br/>color:white;<br/>font-size:16px;<br/>}<br/>.module-byline > a:hover{<br/>color:antiquewhite;<br/>text-decoration:none<br/>}</p><p>/*Make a button for the inivite members links*/<br/>.module-byline{<br/>margin-top:10px;<br/>}<br/>.module-byline > a{<br/>background-color:royalblue;<br/>padding:3px 6px;<br/>border-radius:4px;<br/>}<br/>.module-byline > a:hover{<br/>background-color:darkblue;<br/>}</p><p>/* Add a border around each entry to make give them more seperation */<br/>.eventListPage .span13 {<br/>border:solid 1px lightgray;<br/>}</p><p>/** New Entry Title Adjustment After Moving It Above the Event Content **/<br/>.eventListPage .eventPage-details > .entry-title{<br/> margin-bottom:14px;<br/>box-shadow: 0px 5px 5px lightgray;<br/>padding: 6px;<br/>border: solid 1px #eaeaea;<br/> }<br/>/*Add little Padding To The Details Section */<br/>.eventPage-details{<br/>padding:4px;<br/>}</p><p>/*Entry Title Make Uppercase */<br/>.eventPage-details .entry-title > a, .section-eventBundle .entry-title > a{<br/>text-transform:uppercase;<br/>}<br/>.section-eventBundle .entry-title > a{<br/>font-size:1em;<br/>}</p><p>/* Change the spans of the main content and the date day column to 100% width */<br/>.eventListPage .span3, .eventListPage .span13{<br/>width:100% ;<br/>}<br/>.eventListPage .span3{<br/>text-align:left;<br/>padding:6px;<br/>border-bottom: none;<br/>margin-bottom:0px;<br/>font-size:1.3em;<br/>}</p><p>/*Move the start date to the left and make it an inline block */<br/>.eventListPage .eventListPage-startDate, .eventListPage .eventListPage-startDayOfWeek {<br/>display:inline-block;<br/>padding:0 10px 0px 0;<br/>}</p><p>/*Remove entry content image*/<br/>.eventListPage .eventPage-detail.entry-content.cf a > img{<br/>display:none!important;<br/>}<br/>.column-narrow .eventPage-detail.entry-content.cf a > img{<br/>display:none!important;<br/>}<br/>/*Remove entry content iframes*/<br/>.eventListPage .eventPage-detail.entry-content.cf iframe{<br/>display:none!important;<br/>}<br/>.column-narrow .eventPage-detail.entry-content.cf iframe{<br/>display:none!important;<br/>}</p><p>/* Add Box Shadow To The Entries */<br/>.eventListPage .entry{<br/>box-shadow: 0px 5px 5px lightgray;<br/>padding: 6px; <br/>border-top: solid 1px #eaeaea;<br/>}<br/>.eventListPage .entry:hover{<br/>box-shadow: 0px 8px 7px darkgray;<br/>}</p><p>/* Space out the Events Details li list */<br/>li.eventPage-detail{<br/> margin:10px;<br/>}<br/>.eventPage-detail{<br/> margin-bottom:0px;<br/>}<br/>li.eventPage-detail.entry-content{<br/>margin:15px 0px;<br/>border-top:solid 1px lightgray;<br/>border-bottom:solid 1px lightgray;<br/>padding:4px;<br/>}<br/>li.eventPage-detail.entry-content p{<br/>font-size:0.93em;<br/>}</p><p>/* Options drop down for going or not */<br/>.eventListPage .eventPage-details .span6.narrow16.tablet16.mobile16{<br/>text-align:center;<br/>border:solid 1px lightgray;<br/>padding:6px;<br/>}<br/>.eventListPage .eventPage-details .eventPage-rsvp {<br/>margin-bottom:20px;<br/>float:left;<br/>display:inline-block;<br/>}<br/>@media only screen and ( min-width:767px ){<br/>.eventListPage .eventPage-details .optionsDropdown:before{<br/>content:"Attend Event options";<br/>display:inline-block;<br/>padding:4px 10px;<br/>float:left;<br/>}<br/>.eventDetailPage .eventPage-details .optionsDropdown:before{<br/>content:"Attend Event options";<br/>display:block;padding:8px 0px;<br/>}<br/>}<br/>/* Events Detail Page */<br/>.eventDetailPage .entry-content:before{<br/>content:"Event Details";<br/>display:block;<br/>padding:8px 0px;<br/>font-size:1.1em;<br/>font-weight:bold;<br/>color:darkblue;<br/>border-bottom:solid 1px lightgray;<br/>margin-bottom:10px;<br/>}<br/>.eventDetailPage-attendees{<br/>display:none;<br/>}<br/>.eventDetailPage .trispan{<br/>margin-top:6px;<br/>}<br/>.triplet.eventDetailPage-triplet{<br/>border: solid 1px #efefef;<br/>padding:4px;<br/>max-width:100%;<br/>}<br/>/* Page Header*/<br/>.EventDetail-header{ <br/> display: block;<br/> background-color: #00a6eb;<br/> border-radius: 4px 4px 0 0;<br/> padding: 13px 10px 10px 10px;<br/> margin: -10px -10px 10px -10px;<br/> }<br/>.EventDetail-header a,.EventDetail-header a:hover{<br/> color:white;<br/> font-size:1.5em;<br/> font-weight:bold;<br/> }</p><p>EXTRA TIP</p><p>Now we have them all wrapped and styled we can also style just a particular month, if you go to my events page you will see two events, one for the month of may and the other for December. As you will see the December one looks totaly different. below is the css I used just for the Month of December, the code is an example of how you would style a particular month. Each month has a wrap id so in the code below you will notice it starts with #DecWrap, if you look at the top of this post you can see all the id's for each month for you to use.</p><p>/*Adding a background to a wrap*/<br/>#DecWrap{background-image: url("{{#staticFileLink}}1952482221,original{{/staticFileLink}}");}<br/>#DecWrap .monthHeader-name{ color:white }</p><p>#DecWrap .entry.december{background-image: url("{{#staticFileLink}}1952482226,original{{/staticFileLink}}");}<br/>#DecWrap .entry.december .media-body, #DecWrap .entry.december .media-body a{ color:white }<br/> #DecWrap .entry.december .media-body a:hover{ color:#7df07e }<br/>#DecWrap .entry.december .media-body{ background-color: rgba(129, 35, 35, 0.79);}<br/>#DecWrap .entry.december .span3 {color: white; background-color: rgba(129, 35, 35, 0.49);text-align:center}</p><p> </p><p>That's it, enjoy</p><p>Bizz :-)</p></div>Add A This Months Events Display Widget To Your Site Tiphttps://creators.ning.com/forum/topics/add-a-this-months-events-display-widget-to-your-site-tip2019-04-13T20:39:26.000Z2019-04-13T20:39:26.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>This tip will allow you to add a widget to any page which will check against your events and display events that are in the current month and if none will let your members know there are no events so far for this month. It's easy to add and will show you how below. You will also see a couple of images showing how it's displayed.</p><p>You can also see it working on my sites homepage here: <a href="https://gromsquad.ning.com/" target="_blank" rel="noopener">https://gromsquad.ning.com/</a></p><p>NOTE: This works only on an event page that is named events, if you have named your something else you can edit the part in bold to change it if required.</p><p>DEMO IMAGES</p><p>With events for the month</p><p><a href="{{#staticFileLink}}1949867645,RESIZE_1200x{{/staticFileLink}}" target="_blank" rel="noopener"><img class="align-full" src="{{#staticFileLink}}1949867645,RESIZE_710x{{/staticFileLink}}" width="710"/></a>And the display with no events</p><p><a href="{{#staticFileLink}}1949894384,RESIZE_1200x{{/staticFileLink}}" target="_blank" rel="noopener"><img class="align-full" src="{{#staticFileLink}}1949894384,RESIZE_710x{{/staticFileLink}}" width="710"/></a>Here is how to set it up</p><p>1. Go to your Social Site Manager Then Pages</p><p>2. Choose a page where you want to add the widget</p><p>3. Select Add Content</p><p>4. Select content type to events</p><p>5. Add this as the title IMPORTANT: eventsMonthWidget</p><p>6. Display: set to titles</p><p>7. From: upcoming events</p><p>8. Show: 1</p><p>9. Length: 250</p><p>Then click the Add button and it will appear on the page. Click and hold to move it to where you want it then Save the page. Once the page is saved you can then add the code below.</p><p>Example of the setup, note I chose Display as detail but Titles is better. It doesn't matter which you choose</p><p><a href="{{#staticFileLink}}1950011300,RESIZE_1200x{{/staticFileLink}}" target="_blank" rel="noopener"><img class="align-full" src="{{#staticFileLink}}1950011300,RESIZE_710x{{/staticFileLink}}" width="710"/></a></p><p>First we add a little CSS to our design studio custom css section. By the way if you want the module header a different colour than royal bluse just change the module header colour and the module name colour to what you want.</p><p>/*Widget Sections reveal dates and location*/<br/>.eventsMonthWidget .eventPage-detail{<br/> display:none<br/> }<br/>.eventsMonthWidget .eventPage-details ul:nth-child(1) > li:nth-child(1),<br/> .eventsMonthWidget .eventPage-details ul:nth-child(1) > li:nth-child(2),<br/>.eventsMonthWidget .eventPage-details ul:nth-child(1) > li:nth-child(3){ <br/>display:block!important<br/> }</p><p>/* Style the widget */</p><p>.eventsMonthWidget .media-frame.eventPage-details > .eventPage-image{<br/> padding-top:33%<br/>}<br/>.eventsMonthWidget .media-frame > .eventPage-image{<br/> max-width:100%<br/> }<br/>.eventsMonthWidget .eventPage-details .entry-title > a{ <br/>font-size:1.4em<br/> }<br/>.eventsMonthWidget .eventPage-details .entry-title > a:hover{<br/> color:inherit<br/> }<br/>.eventsMonthWidget .module-header{<br/>background-color:royalblue; border-radius:6px 6px 0px 0px <br/>}<br/>.eventsMonthWidget .module-name{ <br/>color:white<br/> }<br/>.section-eventBundle.eventsMonthWidget .media-frame {<br/> margin-bottom: 15px; border:none<br/>}</p><p> </p><p>Next we need to add some custom code and this goes in the custom code end of page section via the Social Site Manager</p><p>Note: remember this was set up for the default name of the page being called Events. If your is different then edit the events name seen in bold.</p><p><script><br/>/*Events Month List Widget Code, John Bizley 13-04-2019*/<br/>x$(document).ready(function(){<br/>x$('.module-name:contains(eventsMonthWidget)').hide().closest('.section-eventBundle').addClass('eventsMonthWidget');<br/>x$('.eventsMonthWidget .module-name').text('Events This Month').show();<br/>x$('.eventsMonthWidget .module-body').html('<h1 class="eventsMonthWidget-updating">Updating...</h1>');<br/>x$('.eventsMonthWidget .module-body').load("/<strong>events</strong> .eventListPage .entry .media-frame.eventPage-details", function(){<br/>//NOW RUN THE CODE TO UPDATE THE MODULE FOR THE DATES<br/>//SHOW EVENTS ONLY FOR THE MONTH YOU ARE IN<br/>var WidgetClass = x$('.module-name:contains(eventsMonthWidget)').closest('.section-eventBundle').addClass('eventsMonthWidget');<br/>var monthsDisplay = ['January','February','March','April','May','June','July','August','September','October','November','December'];<br/>var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];<br/>var now = new Date();<br/>var month = months[now.getMonth()];<br/>var monthDisplay = monthsDisplay[now.getMonth()];<br/>var monthselector = ".section-eventBundle.eventsMonthWidget ul:nth-child(1) > li:nth-child(2) > a:nth-child(1):contains("+ month +")";<br/>var monthClass = x$(monthselector).closest('.media-frame').addClass(month);<br/>var presentMonth = monthClass;<br/>var notThisMonth = x$('.section-eventBundle.eventsMonthWidget .media-frame');<br/>notThisMonth.not(presentMonth).remove();<br/>var eventsPresentCount = presentMonth.length;<br/>if(eventsPresentCount <=0){<br/>x$('.section-eventBundle.eventsMonthWidget .module-name').text('No Upcoming '+monthDisplay+' Events');<br/>}else if(eventsPresentCount === 1){<br/>x$('.section-eventBundle.eventsMonthWidget .module-name').text(' '+monthDisplay+' ('+eventsPresentCount+') Event');<br/>}else{<br/>x$('.section-eventBundle.eventsMonthWidget .module-name').text(' '+monthDisplay+' ('+eventsPresentCount+') Events');<br/>}<br/>x$('.section-eventBundle.eventsMonthWidget .module-footer > a.pull-right').text('View All Events');<br/>x$('.column-narrow .section-eventBundle.eventsMonthWidget .module-name').css('text-align','center');<br/>x$('.eventsMonthWidget .span6.narrow16.tablet16.mobile16').hide();<br/>});<br/>});<br/></script></p><p> </p><p>That's it, coming next will be how to style the actual events page list to help seperate the events by month.</p><p>Enjoy</p><p>Bizz :-)</p></div>WooHoo! Ning Powered Events Group Has Been Updated!https://creators.ning.com/forum/topics/woohoo-ning-powered-events-group-has-been-updated2018-07-13T23:22:21.000Z2018-07-13T23:22:21.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Hey gang.. I am just writing to let you know that I have updated the <a href="https://creators.ning.com/group/ning-powered-events" target="_blank" rel="noopener">Ning Powered Events Group</a> and hooked it up with all sorts of cool tools and tips..</p><header class="module-header"><h3 class="module-name">CREATING AND HOSTING EVENTS WITH NING COMMUNITIES</h3></header><section class="module-body htmlSection"><div class="entry-content cf"><p>That is what this group is all about. Share you press releases, find cool tools for converting things, saving time and engaging your members....tell us how you are using ning to bring people together!</p><ul class="subnavline"><li class="groupHeader-tab current"><a href="https://creators.ning.com/group/ning-powered-events/forum">Ning Events Forum</a></li> <li class="groupHeader-tab"><a href="https://creators.ning.com/group/ning-powered-events/photos">Ning Events Photos</a></li> <li class="groupHeader-tab"><a href="https://creators.ning.com/group/ning-powered-events/press">Press Releases</a></li> <li class="groupHeader-tab"><a href="https://creators.ning.com/group/ning-powered-events/embeds">Embed Stuff</a></li> <li class="groupHeader-tab"><a href="https://creators.ning.com/group/ning-powered-events/content-tools">Content Tools</a></li> <li class="groupHeader-tab"><a href="https://creators.ning.com/group/ning-powered-events/videos">Videos</a></li></ul></div></section><p><a href="https://creators.ning.com/group/ning-powered-events" target="_blank" rel="noopener"><img class="align-center" src="https://storage.ning.com/topology/rest/1.0/file/get/50503963?profile=RESIZE_710x" width="710"/></a></p><p>Let's work together to help one another pull off successful community events using our Ning communities. If you need help setting up or redesigning your site feel free to <a href="https://creators.ning.com/members/JFarrow" target="_blank" rel="noopener">send me a message</a> or <a href="https://www.justinfarrow.com/ning" target="_blank" rel="noopener">tell me specifically how I can help here</a>. Next, I plan to overhaul the How Did You Do That? Group. </p><p> </p><p>and btw...i don't wanna let cat outta back Kyryl but if you're reading this please write me about the "lpb" that looks so exciting. </p></div>Tip N2 or N3: Customizable Multi-panel Hero Template For Driving Engagementhttps://creators.ning.com/forum/topics/tip-n2-n3-customizable-multi-panel-hero-template-for-driving-enga2018-06-22T19:14:11.000Z2018-06-22T19:14:11.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>This week, one of my communities hosted 2 worldwide events - International Surveyors Week 2018 and Survey Earth in a Day 7. One of the challenges this presented was keeping everyone on the same page. One of the ways this was accomplished was by creating a multi-panel Hero unit for the site (which is currently on 2.0 awaiting the migration-which is hopefully coming soon). The following Hero template uses no javascript and it is simple to customize and easy to install. Here is what we are making:</p><p><a href="http://landsurveyorsunited.com/main" target="_blank" rel="noopener"><img class="align-center" src="https://go.srvyr.com/2yBEQTm" width="710"/></a></p><p style="text-align: center;">I am providing you with the code to accomplish this on your own or if it seems too complicated or if you would like for me to customize it for your community, <a href="https://creators.ning.com/members/JFarrow" target="_blank" rel="noopener">send me a message on my profile</a> and i'll help you for a fee or in trade. Let's get started:</p><p class="codepen">See the Pen <a rel="nofollow" href="https://codepen.io/JFarrow/pen/XYqjBZ/">CSS Grid: Multiple image hero block</a> by JFarrow (<a rel="nofollow" href="https://codepen.io/JFarrow">@JFarrow</a>) on <a rel="nofollow" href="https://codepen.io">CodePen</a>.</p><p style="text-align: center;"></p><p style="text-align: left;">First thing you will want to do is either fork a copy of the following pen into your own codepen account or copy and paste the HTML and CSS into a notepad to edit it with your own links and background images (which you change inside the CSS). HTML part goes into a page module (under header in 3.0 or inside a Ads Box under header in 2.0)</p><p style="text-align: left; width: 800px;"><iframe src="//codepen.io/JFarrow/embed/XYqjBZ/?height=300&theme-id=3719&default-tab=result&embed-version=2" height="300" frameborder="no">See the Pen <a href="https://codepen.io/JFarrow/pen/XYqjBZ/" rel="nofollow">CSS Grid: Multiple image hero block</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 style="text-align: left;">The CSS portion will go inside your Design Studio CSS. HTML portion goes inside a page module.</p><p style="text-align: left;"><a href="https://creators.ning.com/members/JFarrow" target="_blank" rel="noopener">Let me know </a>if you have any questions whatsoever...or if you need someone to help you set up any aspect of your community. Enjoy!</p></div>Adding A Default Image For Events If Not One Addedhttps://creators.ning.com/forum/topics/adding-a-default-image-for-events-if-not-one-added2017-04-21T15:35:24.000Z2017-04-21T15:35:24.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>This question was asked in the forum about members not having to upload an image for an event and show a default image if they chose not to add an image. So here is a way to do that, I have tested this on IE, Chrome and Firefox and all works. Also added a Latest Activity Module and it works there too.<br></p>
<p>NOTE: As we are no actually uploading an image a media frame is not created for it in the main activity feed so there will be no image shown there. I am working on a way to add the image for the main activity and will update this post when done.</p>
<p>Below you will see a demo image of the events added not with an image uploaded by the user and so shows the default image I added of the green calendar.</p>
<p>Adding the code</p>
<p>First of all you will need an image you want to display. Once you have one add it to your file manager then copy the link for insertion into the code where it says ADD IMAGE LINK HERE</p>
<p>Next you will have to edit the code and add your site's url replacing the part in bold YOUR URL HERE.</p>
<p>This code goes in your site and pages custom code</p>
<p><script><br> // Remove Image require in events, change to default image<br> x$(document).ready(function(){<br> x$('.entryEditPage #entry-form').attr('data-image-required','false ');<br> x$('img.eventPage-image[src=" <span style="color: #800000;"><strong>Your url here</strong></span>?height=400&width=400&crop=1:1"]').closest ('.eventPage-image').addClass("noImage");<br> x$('.eventPage-image.noImage').attr('src',' <span style="color: #800000;"><strong>ADD IMAGE LINK HERE</strong></span> ');<br> });<br> </script></p>
<p>This is how it should look when done</p>
<p><script><br> // Remove Image require in events, change to default image<br> x$(document).ready(function(){<br> x$('.entryEditPage #entry-form').attr('data-image-required','false');<br> x$('img.eventPage-image[src="http://bizzssite.ning.com?height=400&width=400&crop=1:1"]').closest ('.eventPage-image').addClass("noImage");<br> x$('.eventPage-image.noImage').attr('src','https://storage.ning.com/topology/rest/1.0/file/get/1070181?profile=original');<br> });<br> </script></p>
<p>DEMO IMAGE</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558939?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558939?profile=RESIZE_1024x1024" class="align-full" width="750"></a></p></div>Creating An Options Toolbar Instead Of Options Drop In Eventshttps://creators.ning.com/forum/topics/creating-an-options-toolbar-instead-of-options-drop-in-events2017-03-19T22:48:25.000Z2017-03-19T22:48:25.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>In our events page we have an options drop down where members can choose to edit, delete etc for their event. What this tip does is change the options list into a nice open toolbar and when viewing on mobile it goes back to the list drop down.</p>
<p>Here is an example showing the new toolbar</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558801?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558801?profile=RESIZE_1024x1024" class="align-full" width="750"></a>So here is the code for you to do this</p>
<p><strong><span style="color: #000000;">First a little code to go in your site&pages custom code</span></strong></p>
<p><script><br> // Add Class to events detail page and change text for featured event<br> x$(document).ready(function(){<br> x$('.eventDetailPage').closest('body').addClass('eventDetail');<br> x$('.eventDetail .optionsDropdown-featureButton.feature-button.is-selected').text('Event Featured');<br> });<br> </script></p>
<p><span style="color: #000000;"><strong>Next we add some css for the styling and this goes in your design studio custom code</strong></span></p>
<p>@media only screen and ( min-width:771px ){<br> .eventDetail .content-actions .optionsDropdown-button{ display:none }<br> .eventDetail .content-actions #eventPage-optionsDropdown{ display:block!important }<br> .eventDetail .content-actions .optionsDropdown-list{ width:auto; position:relative; border:none }<br> .eventDetail .content-actions .optionsDropdown-list > li { padding: 4px; display: inline-block; float: left; }<br> .eventDetail .content-actions .linkbar{ width:100%; clear:both }<br> .eventDetail .content-actions .linkbar > li{ float:right; }<br> .eventDetail .content-actions .optionsDropdown a{ margin-right:5px }<br> .eventDetail .content-actions .optionsDropdown{ float:right }<br> }<br> .eventDetail .content-actions .optionsDropdown a{ padding: 6px 8px;border-radius:4px }<br> .eventDetail .content-actions .optionsDropdown a:hover{ background-color:royalblue; color:white }<br> .eventDetail .optionsDropdown-featureButton.feature-button.is-selected{ background-color:darkblue;color:white; border-radius:4px }<br> <br> @media only screen and ( max-width:771px ){<br> .eventDetail .content-actions .optionsDropdown-list{<br> background-color:#c9d3f2;<br> border-radius:4px;<br> box-shadow: 0px 8px 7px darkgray;<br> }<br> .eventDetail .content-actions .optionsDropdown a{<br> color: #5c5151<br> }<br> .eventDetail .content-actions .optionsDropdown-button {<br> background-color: #d1e0f8;<br> }<br> .eventDetail .content-actions .optionsDropdown{<br> margin-right:10px;<br> }<br> }</p>
<p>That's it, you can change all the colours etc for your own site by editing the color parts of the code.</p>
<p>Enjoy</p>
<p>John :-)</p></div>Change the colours of your drop down options list in Profiles And Eventshttps://creators.ning.com/forum/topics/change-the-colours-of-your-drop-down-options-list-in-profiles-and2017-03-19T22:39:20.000Z2017-03-19T22:39:20.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>This tip is to show how you can the boring old gray options drop down list into something with a little more colour. You can change the setting to fit your site in the code.</p>
<p>Key</p>
<p>.optionsDropdown-list background color: this is the colour for the list itself</p>
<p>.optionsDropdown a background color: this is for each of the links</p>
<p>.optionsDropdown-button background color: this is for the options button</p>
<p>color: this is the text colour</p>
<p>Here is an example</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558789?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558789?profile=original" class="align-full" width="538"></a>First we need just to add a small bit of custom code for the events page, this code goes in your site&pages custom code</p>
<p><script><br> // Add Class to events detail page<br> x$(document).ready(function(){<br> x$('.eventDetailPage').closest('body').addClass('eventDetail');<br> });<br> </script></p>
<p>Next is all the css for the colour changes, this goes in your design studio custom css</p>
<p>/* Profile Settings for the options drop down box and list And Events detail page drop down list */<br> .profileCoverArea-actions .optionsDropdown-button, .eventDetail .content-actions .optionsDropdown-button {<br> background-color: #d1e0f8;<br> }<br> .profileCoverArea-actions .optionsDropdown a, .eventDetail .content-actions .optionsDropdown a{<br> padding: 6px 8px;border-radius:4px; color:black;<br> }<br> .profileCoverArea-actions .optionsDropdown a:hover, .eventDetail .content-actions .optionsDropdown a:hover{<br> text-decoration:none; background-color:royalblue; color:white;<br> }<br> .profileCoverArea-actions .optionsDropdown-featureButton.feature-button.is-selected, .eventDetail .optionsDropdown-featureButton.feature-button.is-selected{<br> background-color:darkblue;color:white; border-radius:4px;<br> }<br> .profileCoverArea-actions .optionsDropdown-list, .eventDetail .content-actions .optionsDropdown-list{<br> background-color:#c9d3f2; border-radius:4px; box-shadow: 0px 8px 7px darkgray;<br> }</p>
<p></p></div>Setting Your 'Featured' event or profile dropdown list to reflect thishttps://creators.ning.com/forum/topics/setting-your-featured-event-or-profile-dropdown-list-to-reflect-t2017-03-19T22:02:46.000Z2017-03-19T22:02:46.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>Some time back I posted how to show if something has been featured on your pages, the issue was that if you feature something the text did not reflect that so you could easily un-feature something.</p>
<p>Here is the link to that post: <a href="http://creators.ning.com/forum/topics/changing-your-feature-button-to-reflect-the-item-has-already-been" target="_self">Showing if a post has been featured for admins</a></p>
<p>Now here is another tip to show how you can change the text for our drop down items in events and profiles, bu the way you will notice in the demo images my drop down list is not gray and has been changed, I will be posting a seperate tip of how to do that.</p>
<p>Here are two demo images showing the change</p>
<p>Events Dropdown showing this event has been featured already</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558758?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558758?profile=original" class="align-full" width="450"></a></p>
<p>And here is a members profile page which has been featured</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558776?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558776?profile=original" class="align-full" width="371"></a>So here is the code to do this</p>
<p>First we add some custom code to the site&pages custom code end of page section. You will notice in the code a class is being added to the events detail page so we can make the adjustments in our css.</p>
<p>The first line is just using some standard Featured text for any other drop downs</p>
<p>The second line changes the Feature text to Event Featured for events</p>
<p>The third line changes the Feature text to Profile is Featured for profile pages that have been featured</p>
<p><script><br> // Set the drop down text for events featured and profiles featured<br> x$(document).ready(function(){<br> x$('.eventDetailPage').closest('body').addClass('eventDetail');<br> x$('.optionsDropdown-featureButton.feature-button.is-selected').text('Featured');<br> x$('.eventDetail .optionsDropdown-featureButton.feature-button.is-selected').text('Event Featured');<br> x$('.profileCoverArea-actions .optionsDropdown-featureButton.feature-button.is-selected').text('Profile is Featured');<br> });<br> </script></p>
<p>Here is some optional css if you want that item to stand out by addinf some colour to it as you see in the above demo images. This you would add to your design studio custom css, change the colours to fit your site</p>
<p>darkblue is the background colour color is the text colour.</p>
<p>/*OPTIONAL CSS FOR CHANGING THE FEATURED DROP DOWN ITEM */<br> .eventDetail .optionsDropdown-featureButton.feature-button.is-selected{ background-color:darkblue;color:white; border-radius:4px }<br> .profileCoverArea-actions .optionsDropdown-featureButton.feature-button.is-selected{ background-color:darkblue;color:white; border-radius:4px }</p></div>Upcoming Events Widget. Changes the list depending on the Month we are in.https://creators.ning.com/forum/topics/upcoming-events-widget-changes-the-list-depending-on-the-month-we2017-03-01T22:14:56.000Z2017-03-01T22:14:56.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>Here is a little project I have been working on for the Upcoming Events. We can add as normal a box using the add content option to display upcoming events which is fine but then each month you would have to change it again for that month. So here is something I created that you may like.</p>
<p>You add this code and it will then give you a box the same as if you where adding an add content box as normal but this time it will change the content depending on the Month we are in. Also it will display how many events are Upcoming for the month and if there are none it will say so in the title and not show any events.</p>
<p>You can see it working on my sites homepage in the top right.</p>
<p>DEMO: <a href="http://bizzssite.ning.com/" target="_blank">http://bizzssite.ning.com/</a></p>
<p>Before we get started I will just point out that this version is for one event page instance only, so if you have multiple ones you can only select which you want to display in the box. I am working on a multiple one but this may be a while as other projects will come before it.</p>
<p>IMPORTANT: The code is all setup for an event page which is called Events. So if you have just called your event page events then you can just copy the code, if nt and you have called it something else, for example mine is called events demo which in the url it will show as events-demo, so you would need to change just that one part for your own page name. This is the line you are looking for</p>
<p>x$('.eventsMonthWidget .module-body').load("/events .eventListPage .entry .media-frame.eventPage-details", function(){</p>
<p>And this is the part you would change</p>
<p>/events</p>
<p>So for mine it would look like this</p>
<p>/events-demo</p>
<p>and the complete line would look like this</p>
<p>x$('.eventsMonthWidget .module-body').load("/events-demo .eventListPage .entry .media-frame.eventPage-details", function(){</p>
<p></p>
<p>Ok let's get started and add a little css first, this goes in your design studio custom css. You can change the colours to suit your site and font sizes.</p>
<p>.eventsMonthWidget .entry-title > a{ font-size:1.3em }<br> .eventsMonthWidget .eventPage-detail{ font-size:0.8em }<br> .eventsMonthWidget .eventPage-detail > a{ font-size:1em }<br> .eventsMonthWidget .eventPage-detail > a{ font-size:1em }<br> .eventsMonthWidget .module-header::before{<br> content:"Upcoming Events This Month";<br> display:block;<br> padding-bottom:5px;<br> font-weight:normal;<br> text-align:center;<br> color:white;<br> font-size:0.96em;<br> }</p>
<p>Next we need to add some custom code into our site&pages custom code end of page box ( do not copy this line with the code )</p>
<p><script><br> /*Events Month List Widget Code, John Bizley 01-03-17 ver( 3.5 )*/<br> x$(document).ready(function(){<br> x$('.module-name:contains(eventsMonthWidget)').closest('.section-eventBundle').addClass('eventsMonthWidget');<br> x$('.eventsMonthWidget .module-name').text('Events This Month');<br> x$('.eventsMonthWidget .module-body').html('<h1 class="eventsMonthWidget-updating">Updating...</h1>');<br> //Change the load url for your own events page. If it's called events then no need to change anything<br> x$('.eventsMonthWidget .module-body').load("/events .eventListPage .entry .media-frame.eventPage-details", function(){<br> var WidgetClass = x$('.module-name:contains(eventsMonthWidget)').closest('.section-eventBundle').addClass('eventsMonthWidget');<br> var monthsDisplay = ['January','February','March','April','May','June','July','August','September','October','November','December'];<br> var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];<br> var now = new Date();<br> var month = months[now.getMonth()];<br> var monthDisplay = monthsDisplay[now.getMonth()];<br> var monthselector = ".section-eventBundle.eventsMonthWidget ul:nth-child(1) > li:nth-child(2) > a:nth-child(1):contains("+ month +")";<br> var monthClass = x$(monthselector).closest('.media-frame').addClass(month);<br> var presentMonth = monthClass;<br> var notThisMonth = x$('.section-eventBundle.eventsMonthWidget .media-frame');<br> notThisMonth.not(presentMonth).remove();<br> var eventsPresentCount = presentMonth.length;<br> if(eventsPresentCount <=0){<br> x$('.section-eventBundle.eventsMonthWidget .module-name').text('No Upcoming '+monthDisplay+' Events');<br> }else if(eventsPresentCount === 1){<br> x$('.section-eventBundle.eventsMonthWidget .module-name').text(' '+monthDisplay+' ('+eventsPresentCount+') Event');<br> }else{<br> x$('.section-eventBundle.eventsMonthWidget .module-name').text(' '+monthDisplay+' ('+eventsPresentCount+') Events');<br> }<br> x$('.section-eventBundle.eventsMonthWidget .module-footer > a.pull-right').text('View All Events');<br> x$('.column-narrow .section-eventBundle.eventsMonthWidget .module-name').css('text-align','center');<br> x$('.eventsMonthWidget .span6.narrow16.tablet16.mobile16').hide();<br> });<br> });<br> </script></p>
<p>Now we have added the code you only need to do that once and can now go ahead and add as many of the widgets to any pages you wish so here is how to add them.</p>
<ol>
<li>Go to your site&pages and click on a page you want to add it to</li>
<li>Click on the add content button and choose your event page from the list</li>
<li>add this title eventsMonthWidget</li>
<li>Display set to Titles Only</li>
<li>From to upcoming</li>
<li>Show 1 events</li>
<li>Click Add and you are all finished move the widget to wherever you want it.</li>
</ol>
<p>Demo images</p>
<p>Setup</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558769?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558769?profile=RESIZE_1024x1024" class="align-full" width="750"></a>How it looks on the page</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558792?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558792?profile=original" class="align-full" width="325"></a>Enjoy</p>
<p>John :-)</p>
<p></p>
<p></p>
<p></p>
<p></p></div>NEW Code Release for Events Months Wrap and how to style them month by monthhttps://creators.ning.com/forum/topics/new-code-release-for-events-months-wrap-and-how-to-style-them-mon2017-02-22T21:30:29.000Z2017-02-22T21:30:29.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>Well finally I have finished the code for sharing the Events Month Wrap, this will enable you to seperate each month with a month heading and now also be able to style each month if you so wish. For instance you may want to add different backgrounds for each or just for a specific month like Christmas or maybe you may want a specific background for events in a category. I won't go into to much detail about how to do it all but I have added some demos for you to see and the code I used for them so you can then see how I targeted the month.</p>
<p>Each month is wrapped in it's own id to make it easy to target them and the content within them. If you look at the custom code you will see the list of id's at the bottom and they look like this #JanWrap #FebWrap etc.</p>
<p>Here are the demo pages, the first is a standard event list page with the change to one of the months by giving it a different background and styling than the others below it.</p>
<p><a href="http://bizzssite.ning.com/events-demo" target="_blank">http://bizzssite.ning.com/events-demo</a></p>
<p>Here is my other styled events page with that background as well</p>
<p><a href="http://bizzssite.ning.com/eventsdemo2" target="_blank">http://bizzssite.ning.com/eventsdemo2</a></p>
<p>Ok first we need to add our main custom code, this code goes in your SITE&PAGES CUSTOM CODE END OF PAGE SECTION</p>
<p><script><br> x$(document).ready(function(){<br> //Add the classes to the months<br> //Version(7.1) 22-02-17 John Bizley<br> //Add A Class To The Start Month In eventPage-detail in eventlistpage<br> var StartMonth = x$('.eventPage-details .span10 ul:nth-child(1) > li:nth-child(2) > a:nth-child(1)').addClass('startMonth');<br> var $January = x$('.eventListPage .startMonth:contains(Jan)').closest('article.entry').addClass('january').wrapAll('<div id="JanWrap" class="calendarGrid"></div>');<br> var $February = x$('.eventListPage .startMonth:contains(Feb)').closest('article.entry').addClass('february').wrapAll('<div id="FebWrap" class="calendarGrid"></div>');<br> var $March = x$('.eventListPage .startMonth:contains(Mar)').closest('article.entry').addClass('march').wrapAll('<div id="MarWrap" class="calendarGrid"></div>');<br> var $April = x$('.eventListPage .startMonth:contains(Apr)').closest('article.entry').addClass('april').wrapAll('<div id="AprWrap" class="calendarGrid"></div>');<br> var $May = x$('.eventListPage .startMonth:contains(May)').closest('article.entry').addClass('may').wrapAll('<div id="MayWrap" class="calendarGrid"></div>');<br> var $June = x$('.eventListPage .startMonth:contains(Jun)').closest('article.entry').addClass('june').wrapAll('<div id="JunWrap" class="calendarGrid"></div>');<br> var $July = x$('.eventListPage .startMonth:contains(Jul)').closest('article.entry').addClass('july').wrapAll('<div id="JulWrap" class="calendarGrid"></div>');<br> var $August = x$('.eventListPage .startMonth:contains(Aug)').closest('article.entry').addClass('august').wrapAll('<div id="AugWrap" class="calendarGrid"></div>');<br> var $September = x$('.eventListPage .startMonth:contains(Sep)').closest('article.entry').addClass('september').wrapAll('<div id="SeptWrap" class="calendarGrid"></div>');<br> var $October = x$('.eventListPage .startMonth:contains(Oct)').closest('article.entry').addClass('october').wrapAll('<div id="OctWrap" class="calendarGrid"></div>');<br> var $November = x$('.eventListPage .startMonth:contains(Nov)').closest('article.entry').addClass('november').wrapAll('<div id="NovWrap" class="calendarGrid"></div>');<br> var $December = x$('.eventListPage .startMonth:contains(Dec)').closest('article.entry').addClass('december').wrapAll('<div id="DecWrap" class="calendarGrid"></div>');<br> var cgTitle = x$('.calendarGrid').prepend('<div class="calendarGrid-Title"></div>');<br> var cgTitleName = x$('.calendarGrid-Title').append('<h3 class="monthHeader-name">Month</h3>');<br> <br> x$('#JanWrap h3.monthHeader-name').html("January");<br> x$('#FebWrap h3.monthHeader-name').html("February");<br> x$('#MarWrap h3.monthHeader-name').html("March");<br> x$('#AprWrap h3.monthHeader-name').html("April");<br> x$('#MayWrap h3.monthHeader-name').html("May");<br> x$('#JunWrap h3.monthHeader-name').html("June");<br> x$('#JulWrap h3.monthHeader-name').html("July");<br> x$('#AugWrap h3.monthHeader-name').html("August");<br> x$('#SepWrap h3.monthHeader-name').html("September");<br> x$('#OctWrap h3.monthHeader-name').html("October");<br> x$('#Noverap h3.monthHeader-name').html("November");<br> x$('#DecWrap h3.monthHeader-name').html("December");<br> });<br> </script></p>
<p>Next we need to add some css to style the month headings, you can alter the css as you need for colours etc.</p>
<p>TIP: The mesh background I added was one of nings backgound images and have used their url to point to the image so you can just copy this whole code without needing to change the url for the image. Of coursr you can use your own then replace the url for the image you are going to use.</p>
<p>/* CSS FOR EVENT LIST GOES IN YOUR DESIGN STUDIO CUSTOM CSS */</p>
<p>/***** START EVENT LIST CSS *************************************************************/</p>
<p> /* NEW CALENDAR GRID This is the grid which will surround each of the months */<br> .calendarGrid{ border:solid 1px lightgray; border-radius:6px;padding:4px; margin-bottom:20px}<br> .calendarGrid-Title{ width:100%; float:left;clear:both;margin-bottom:20px }<br> .calendarGrid-Title{<br> background-image: url("http://storage.ning.com/topology/rest/1.0/file/get/8667566?profile=original-mesh-10-blk.png");<br> background-position: center center;<br> background-size: initial;<br> background-repeat: repeat;<br> }<br> .monthHeader-name{ font-weight:bold;display:block;padding:10px 20px; color:white;background-color:royalblue;float:left; border-radius:6px 6px 0px 0px }</p>
<p>/***** EVENTS STANDARD ****/<br> /* Margin between each post */<br> /** Margin between each of the posts plus some padding**/<br> .eventListPage .entry{ margin-bottom:15px; padding:10px }<br> .section-eventBundle .entry { margin-bottom: 15px; }<br> <br> /*OPTIONAL Links In The Header Module ByLine For Inviting Members when creating an event */<br> .module-byline > a{ color:white; font-size:16px }<br> .module-byline > a:hover{ color:antiquewhite; text-decoration:none }<br> <br> /*OPTIONAL Make a button for the inivite members links*/<br> .module-byline{ margin-top:10px }<br> .module-byline > a{ background-color:royalblue; padding:3px 6px; border-radius:4px }<br> .module-byline > a:hover{ background-color:darkblue }<br> <br> /* Add a border around each entry to make give them more seperation */<br> .eventListPage .span13 { border:solid 1px lightgray }<br> /*********** END EVENT LIST CSS **********************************************************/</p>
<p></p>
<p>That's it for adding the code, below is how I changed a particular months background and a little more styling.</p>
<p><span style="color: #000000;"><strong>Optional How To Styling For Month by Month</strong></span></p>
<p>Again for the background image I used Nings one of Nings background images, I just added a background to my site first via the design studio then inspected the code of the body which is where the background image is added then copied the url for the image and used this in the code. Then I just removed the background image from my site. Now the image loads from Ning and not my file manager.</p>
<p>Adding a background to a month is shown below and if you notice the #FebWrap is used to style February. When adding an image you may find the other event details background is gone, this is because they are justing using the pages background colour so we can just bring them back by adjusting the colour of the entry and you can do that like this #FebWrap.entry{ background-color: white } or whatever colour you want.</p>
<p>/*Adding a background to a wrap*/<br> #FebWrap{background-image: url("http://storage.ning.com/topology/rest/1.0/file/get/8745125?profile=original~-photoshop-patterns_3.jpg");}</p>
<p>/* Style the left part which holds the event date and day*/<br> #FebWrap .span3 {<br> color: white;<br> text-shadow: 0px 1px 1px black;<br> font-weight: bold;<br> background-color: #0006;<br> padding-top: 10px;<br> padding-bottom: 10px;<br> padding-left: 5px;<br> border-radius: 4px 0px 0px 4px;<br> }</p>
<p>/*Style the actual date and day parts*/<br> #FebWrap .span3 .eventListPage-startDate,#FebWrap .span3 .eventListPage-startDayOfWeek{<br> background: darkgray;<br> padding: 4px;<br> border: solid 1px black;<br> text-align: center;<br> }<br> #FebWrap .span3 .eventListPage-startDate{ border-radius:6px 0px 0px 0px }<br> #FebWrap .span3 .eventListPage-startDayOfWeek{border-radius:0px 0px 0px 6px;margin-top:2px;}</p>
<p>/*Style just the event details section not the whole entry*/<br> #FebWrap .eventPage-details{ background-color:white; border-radius:0px 6px 6px 6px }</p>
<p>That's it. Enjoy</p>
<p>John :-)</p>
<p></p></div>My New Events Notification Messageshttps://creators.ning.com/forum/topics/my-new-events-notification-messages2017-02-18T23:44:06.000Z2017-02-18T23:44:06.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>Well decided to add some more goodies to the events page as thought these would be a nice idea. I have added a predefined list of messages that the member can add into an event ( you can change them or create more if you wish ). I will show all the messages when I add the code for you as just need to finish adding the list into the detail page first. Basically the member can choose one or more of the messages to add above the event, for instance suppose Children go Free at that event you can add that, or if it's full, or Cancelled etc etc. I have added a few for you to see. In the main wide column they show like little buttons at the top of the event and in the side columns they show as text. That is all but the Event Cancelled as this will always show red. In the wide column it will show accross the event details not at the top and if any other messages where at the top they are removed.</p>
<p>Also a neat little touch was for the Wheelchair access icon so disabled attendees know they have Wheelchair access.</p>
<p>The buttons colours can easily be changed in the CSS to what you like.</p>
<p>Also a new button has been added into the menu to show all cancelled events.</p>
<p>I am working on a notification to go in the Ning bar that will show if any events you are going to have been cancelled.</p>
<p>Well here are some images but you can go to my site to see them live now on both my demo events lists</p>
<p>Demo: <a href="http://bizzssite.ning.com/events-demo" target="_blank">http://bizzssite.ning.com/events-demo</a> or <a href="http://bizzssite.ning.com/eventsdemo2" target="_blank">http://bizzssite.ning.com/events-demo2</a></p>
<p>All the code will be added very soon.</p>
<p>Images</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558837?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558837?profile=RESIZE_1024x1024" class="align-full" width="750"></a><a href="http://storage.ning.com/topology/rest/1.0/file/get/558869?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558869?profile=RESIZE_1024x1024" class="align-full" width="750"></a><a href="http://storage.ning.com/topology/rest/1.0/file/get/558873?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558873?profile=original" class="align-full" width="558"></a></p></div>Events Demo2 ( My Complete Style Look ) 13-02-17https://creators.ning.com/forum/topics/events-demo2-my-complete-style-look-13-02-172017-02-13T23:29:37.000Z2017-02-13T23:29:37.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>Ok the other day I posted about adding a monthly header for each of the months and removed any other styling so you could see it in a default style events page listing. I have now created a Demo2 which includes all my final styling for the events page. Below you will see a few images to demo the list page, detail page and them both in mobile view. I added the images as you can then see all the information being shown.</p>
<p>All the code I will add once I tidy it up for adding here, I will also try and condense the code for adding the Monthly tabs.</p>
<p>Demo Page Here ( You may need to refresh your browser if you do not see it ) <a href="http://bizzssite.ning.com/eventsdemo2" target="_blank">http://bizzssite.ning.com/eventsdemo2</a></p>
<p>What I Did</p>
<ol>
<li>Added Monthly Tabs to seperate the months in the list by adding headers and some tabs</li>
<li>Added a header to display above the upcoming events list</li>
<li>Moved the title above the event and also centered the event dates above the title</li>
<li>Added some styling to each events with some box shadow and on hover it goes darker</li>
<li>Add some margins around the events details so they are not so bunched up and easier to read</li>
<li>Decreased the font for the description a little which helps it stand out a little from all the other text</li>
<li>Added a border and padding to the 'Going and Google Calendar section</li>
<li>Added a title above the attending choice and also the Google Calendar</li>
<li>Changed the font size and added the same style to the narrow column modules</li>
<li>Changed the way the list page looks in mobile view so the information is not all squished up to the right</li>
</ol>
<p>Detail Page</p>
<ol>
<li>Again a header was needed above the event so added one which also has the events title in it</li>
<li>Added some spacing around the event details</li>
<li>Removed the attendees images as not needed, they just take up to much space and the member can click on the amounts of going, might go and invited to see the full list anyway.</li>
<li>Again the titles are there for the attend options and calendar, also added some spacing and increased the font for the counts.</li>
<li>For the attend options whole section removed the max-width: 255px for it's size and set it to 100% to aid the responsive side of the box.</li>
<li>Added a title above the details section and a little more padding with some light gray borders top and bottom</li>
<li>Adjusted the overflow to visible so that when it's in mobile view it's not all squashed up and lays out nicely.</li>
</ol>
<p>Demo Images</p>
<p>The images below show the events page as a full width page, on my site I have added a side column so you can see how that looks to.</p>
<p>List page</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558742?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558742?profile=RESIZE_1024x1024" class="align-full" width="750"></a>List Page Mobile View</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558753?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558753?profile=original" class="align-full" width="496"></a>Detail Page</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558761?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558761?profile=RESIZE_1024x1024" class="align-full" width="750"></a>Detail Page Mobile View</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558803?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558803?profile=original" class="align-full" width="491"></a></p>
<p>As I said I will post all the code for this in this post and should be before the weekend.</p>
<p>John :-)</p></div>Why Are The Events Not Listing The Same Way As UpComing In My Events Or Categories ?https://creators.ning.com/forum/topics/why-are-the-events-not-listing-the-same-way-as-upcoming-in-my-eve2017-02-13T00:01:10.000Z2017-02-13T00:01:10.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>I am finding this really odd, now I have added my month seperators I can now see that other than the UpComing events all the others like my events, and those in categories are all listing the wrong way round, ie the furthest away month first and so on. It looks really odd and you have to go down the page to see the events that are most current. As an example if you go to my 1940s Events category February is at the bottom and April is at the top! Now imagine if you have a lot of events added, all the most recent or upcoming events in that category are going to be pages away. I know you can add a search by date range but when you first open the category it looks like there are no events for February unless you go searching down or if you have say 10 pages of events it's going to be 10 pages away.</p>
<p>This just seems a very odd way of displaying them, anyone else noticed this ?</p>
<p>John</p>
<p></p>
<p></p>
</div>How To Seperate Your Months In Events List & Also Being Able To Target Them In CSShttps://creators.ning.com/forum/topics/how-to-seperate-your-months-in-events-list-also-being-able-to-tar2017-02-12T22:35:05.000Z2017-02-12T22:35:05.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>First Of All Here Is The Demo Page : <a href="http://bizzssite.ning.com/events-demo" target="_blank">http://bizzssite.ning.com/events-demo</a></p>
<p>Image Demo</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558714?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558714?profile=RESIZE_1024x1024" class="align-full" width="750"></a></p>
<p></p>
<p>As you can see this page I have removed all my other custom design so we have just a standard events list page so we can see how it would look with a default event list page.</p>
<p>What we have got now on this page is a way to seperate each of the months to make it easier to see what's in that month. Also by adding the code we are now giving each month a class so we can work just on that month if we need to. You can see a small example of this in December where I have added a different colour to the Month tab and also gave the background to this header a Christmas type header. A headerContainer will be added to all posts and this has been done on purpose so that we can add a message or something like that if needed ( this I will explain in another post ).</p>
<p>A little explanation about the code;</p>
<p>I have added it this way so you can easily see the parts of it, there is a more effeciant way of doing it but it's not so clear if you want to change anything.</p>
<p>So in the first block of code is where we are adding the classes to the months and it is these classes that enable us to be able to target each month with some css if we want to.</p>
<p>The second block is adding the Headers and the names of the month, again these have classes added to h3 so we can target them in css if we want to.</p>
<p>We are also going to add a touch of css to style the tabs and headers, in my demo you will see each of the month headers has an image added to the background, this is optional and you do not have to add that. If you want to add an image of your own just replace the image link with one you would like to use. The image get's added to your file manager then you copy the link and insert this into the code replacing the one I have added.</p>
<p>Ok lets get started and add the code.</p>
<p>First of all we are going to add all the main code. copy it and add it to your Site&Pages Custom Code End Of Page Section.</p>
<p><script><br> x$(document).ready(function(){<br> //Add the classes to the months<br> x$('.eventListPage .span3:contains(January)').closest('article.entry').addClass('january');<br> x$('.eventListPage .span3:contains(February)').closest('article.entry').addClass('february');<br> x$('.eventListPage .span3:contains(March)').closest('article.entry').addClass('march');<br> x$('.eventListPage .span3:contains(April)').closest('article.entry').addClass('april');<br> x$('.eventListPage .span3:contains(May)').closest('article.entry').addClass('may');<br> x$('.eventListPage .span3:contains(June)').closest('article.entry').addClass('june');<br> x$('.eventListPage .span3:contains(July)').closest('article.entry').addClass('july');<br> x$('.eventListPage .span3:contains(August)').closest('article.entry').addClass('august');<br> x$('.eventListPage .span3:contains(September)').closest('article.entry').addClass('september');<br> x$('.eventListPage .span3:contains(October)').closest('article.entry').addClass('october');<br> x$('.eventListPage .span3:contains(November)').closest('article.entry').addClass('november');<br> x$('.eventListPage .span3:contains(December)').closest('article.entry').addClass('december');<br> x$('<div/>',{ class : 'monthHeader-Container'}).prependTo('.eventListPage article.entry');<br> <br> x$('<div class="monthHeader"><h3 class="monthHeader-name">January</h3></div>').appendTo('.eventListPage article.entry.january:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">February</h3></div>').appendTo('.eventListPage article.entry.february:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">March</h3></div>').appendTo('.eventListPage article.entry.march:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">April</h3></div>').appendTo('.eventListPage article.entry.april:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">May</h3></div>').appendTo('.eventListPage article.entry.may:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">June</h3></div>').appendTo('.eventListPage article.entry.june:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">July</h3></div>').appendTo('.eventListPage article.entry.july:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">August</h3></div>').appendTo('.eventListPage article.entry.august:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">September</h3></div>').appendTo('.eventListPage article.entry.september:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">October</h3></div>').appendTo('.eventListPage article.entry.october:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">November</h3></div>').appendTo('.eventListPage article.entry.november:first .monthHeader-Container');<br> x$('<div class="monthHeader"><h3 class="monthHeader-name">December</h3></div>').appendTo('.eventListPage article.entry.december:first .monthHeader-Container');<br> });<br> </script></p>
<p></p>
<p>Next we are going to add the CSS, again feel free to edit the colours etc to fit your site. This code goes in your Design Studio Custom CSS</p>
<p>/** Events Monthly Headers **/</p>
<p>/*If you are not using a background image you can instead of having a little tab make it go full width by removing from the second line the float:left at the end */<br> .monthHeader-Container{ width:100%;float:left;clear:both }<br> .monthHeader{ margin-bottom:15px; border-bottom:dashed 1px lightgray; width:100%; clear:both; float:left;}<br> .monthHeader-name{ font-weight:bold;display:block;padding:10px 28px; color:white;background-color:royalblue;float:left; border-radius:6px 6px 0px 0px }</p>
<p>/* Optional CSS to have a background image across the header, you can replace the image url link with one of your own */</p>
<p>.eventListPage .entry .monthHeader{<br> background-image: url("http://storage.ning.com/topology/rest/1.0/file/get/8667566?profile=original-mesh-10-blk.png");<br> background-position: center center;<br> background-size: initial;<br> background-repeat: repeat;<br> }</p>
<p>And here is how you can target a specific month, I chose December to demo it as it's the one most likely you would want to change a little.</p>
<p>Notice in the code the use of the class name to target the month ( .entry.december ) Again you replace the image for what you want to use.</p>
<p>/** This is to demo changing items in month, for instance Christmas Time **/<br> .eventListPage .entry.december .monthHeader{<br> background-image: url("http://storage.ning.com/topology/rest/1.0/file/get/963872889?profile=original");<br> background-position: center center;<br> background-size: cover!important;<br> background-repeat:no-repeat!important;<br> }<br> /* Change tab to red */<br> .eventListPage .entry.december .monthHeader-name{ background-color:darkred }</p>
<p>Enjoy</p>
<p>John :-)</p>
<p></p></div>Header Missing Above The Upcoming Events ? ( here is how to add one )https://creators.ning.com/forum/topics/header-missing-above-the-upcoming-events-here-is-how-to-add-one2017-02-09T23:18:59.000Z2017-02-09T23:18:59.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>For some reason we do not seem to have a header above our Upcoming events list with a count for them ? Not quite sure why this is but it makes the page look un-balanced. Yes we get one when you do a date search but then it goes away. Maybe that's something that could be added by Ning but for now here is a way to create one.</p>
<p><strong><span style="color: #000000;">Demo</span></strong></p>
<p>Here you can see it, it gets added to all events pages: <a href="http://bizzssite.ning.com/events" target="_blank">http://bizzssite.ning.com/events</a></p>
<p>BEFORE</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558692?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558692?profile=RESIZE_1024x1024" class="align-full" width="750"></a>AFTER</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558750?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558750?profile=RESIZE_1024x1024" class="align-full" width="750"></a>So how it works is that if the member selects a date range the header is replaced by that and shows as normal, the same for any of the other tabs you click on including categories. It's just the initial Upcoming Events list it get's added to.</p>
<p><span style="color: #000000;"><strong>First we add a touch of custom code ( goes in your site&pages custom code end of page section )</strong></span></p>
<p><script><br> // Add class to the event list page to create a header<br> x$(document).ready(function(){<br> x$('.eventListPage').addClass('myEventListHeader');<br> x$('.eventListPage .module-header').closest('.eventListPage').removeClass('myEventListHeader');<br> });<br> </script></p>
<p><strong><span style="color: #000000;">Next a little CSS to design our header ( this goes in your design studio custom css section )</span></strong></p>
<p>TIP: If you know how to use the inspect option in your browser then if you right click on a module header you can just copy out the values then adjust the css below.</p>
<p>You can replace the text for the content if you like to read something else, just change the wording between " " in the content section</p>
<p>The background colour and the padding you can get these values from your Design Studio > Page > Modules > Title Padding and you can also copy out your modules heading background colour. You will notice I changed my first figure to 13px in the padding as it just wasn't deep enough to look the same as the other module headings. Again the font size, color and whether bold or not these are settings you can find in your design studio or just adjust the css until you get it looking the same as your others. Border radius again you may have to play around with to fit your site settings, if you do not have any curved corners on your modules then you can just remove that complete line.</p>
<p>The margin I will explain, you will notice two minus values at the start ( -20px ) these two figures are to get the header to move up by 20px and also stretch out to the right by 20px. The middle one which is normal is just the padding normal and the last one -20px will stretch the header to the left.</p>
<p>The 20px amount is the amount shown in your content padding next to the title padding. If we did not have the minus values then the header would not fill the width of the page.</p>
<p>/** Adding A Module Header To The UpComing Events List **/</p>
<p>.eventListPage.myEventListHeader .module-body:before{content:"All Upcoming Events";display:block;<br> background-color: #00a6eb;<br> border-radius: 7px 7px 0 0;<br> padding: 13px 10px 10px 10px;<br> margin: -20px -20px 20px -20px;<br> font-size: 20px; color:white;font-weight:bold;<br> }</p>
<p>Enjoy</p>
<p>John :-)</p>
<p></p>
<p></p>
<p></p></div>My Second Events Layout ( Moving the event title to the top and start date inline )https://creators.ning.com/forum/topics/my-second-events-layout-moving-the-event-title-to-the-top-and-sta2017-02-08T20:55:46.000Z2017-02-08T20:55:46.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>So here is my second layout for the events list page. I just wanted to make more use of the white space surrounding the events past and also if a long title has been added it can span across the top rather than squish up with all the other info. I have also allowed the overflow to show on the narrow column lists so they to can fill the space.</p>
<p>Note: the title only moves above the main section as the one in the narrow columns are fine as they are.</p>
<p>I also changed the spans of the content and start date, day of the week to 100% width so they collapse nicely. Look great on mobiles too.</p>
<p>Well here is the link to the page if you want to take a look: <a href="http://bizzssite.ning.com/events2" target="_blank">http://bizzssite.ning.com/events2</a></p>
<p>And here is a screen shot</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558700?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558700?profile=RESIZE_1024x1024" class="align-full" width="750"></a></p>
<p>Mobile View</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558718?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558718?profile=original" class="align-full" width="409"></a></p>
<p>And here is the code I used to move the title, date and day of the week</p>
<p>First a tiny bit of custom code to move the title, this goes in your SITE & PAGES CUSTOM CODE END OF PAGE BOX</p>
<p><script><br> // Move the events title above the main event<br> x$(document).ready(function(){<br> x$(".eventPage-details .entry-title").each(function() {<br> x$(this).closest(".media-frame.eventPage-details").prepend(this);<br> });<br> });<br> </script></p>
<p>Next we need to add a little css. THIS GOES IN YOUR DESIGN STUDIO CUSTOM CSS SECTION</p>
<p>/** New Entry Title Adjustment After Moving It Above the Event Content **/<br> .eventListPage .eventPage-details > .entry-title{<br> margin-bottom:14px;<br> box-shadow: 0px 5px 5px lightgray;<br> padding: 4px;<br> }<br> <br> /* Allow the content in the narrow column to fill the space to the left */<br> .section-eventBundle .media-frame > .media-body {<br> overflow: visible;<br> }<br> <br> /* Change the spans of the main content and the date day column to 100% width */<br> .eventListPage .span3, .eventListPage .span13{ width:100% }<br> <br> /*Move the start date to the left and make it an inline block */<br> .eventListPage .eventListPage-startDate {<br> text-align: left;display:inline-block;<br> }<br> /* Do the same for the day of the week */<br> .eventListPage .eventListPage-startDayOfWeek {<br> text-align: left;display:inline-block;<br> }<br> <br> /** Margin between each of the posts **/<br> .eventListPage .entry{ margin-bottom:30px }</p></div>New Events Feature: My Styling I Have Added And The CSS I Usedhttps://creators.ning.com/forum/topics/new-events-feature-my-styling-i-have-added-and-the-css-i-used2017-02-07T23:53:45.000Z2017-02-07T23:53:45.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>Well didn't take long for me to get stuck into playing with the new events feature so here is all the css I used. I am adding this so you can see the css names for you to use if you want to have ago at changing certain parts, or copy all my css if you want.</p>
<p>Here is a link to my site events so you can see how it looks: <a href="http://bizzssite.ning.com/events" target="_blank">http://bizzssite.ning.com/events</a></p>
<p>The main thing I did was to add some more margins and padding here and there and adjust some of the spacing between the content, it just felt all a little cramped for me. Also changed the mobile view by moving the event image above the main content so the content was not all squished to the side, now it can fill the whole width of the phone screen.</p>
<p>The other major thing I did was to <span style="color: #000000;"><strong>stop any images or videos coming through onto the main list page</strong></span> if the member added any of these into the content description of the event. This is tried first without blocking them and it looked pretty ugly with them showing up especially if they are quite large. They still show in the main event detail page of course though.</p>
<p>Well here is all my css I used.</p>
<p>/**** NEW EVENTS PAGE ***/<br> <br> /* EVENTS LIST PAGE */<br> /*Remove entry content image*/<br> .eventListPage .eventPage-detail.entry-content.cf a > img{ display:none!important }<br> .column-narrow .eventPage-detail.entry-content.cf a > img{ display:none!important }<br> /*Remove entry content iframes*/<br> .eventListPage .eventPage-detail.entry-content.cf iframe{ display:none!important }<br> .column-narrow .eventPage-detail.entry-content.cf iframe{ display:none!important }<br> <br> /* Adding the box shadows and slight change on hover, also lessened the margin between them*/<br> .eventListPage .entry, .section-eventBundle .entry {<br> margin-bottom: 15px;<br> box-shadow: 0px 5px 5px lightgray;<br> padding: 6px; <br> border: solid 1px lightgray;<br> }<br> .eventListPage .entry:hover, .section-eventBundle .entry:hover{ box-shadow: 0px 8px 7px darkgray; }<br> <br> /* Add some margin to the top of each entry row */<br> .eventListPage .entry > .row{ margin-top:10px }<br> <br> /* Center the Date of event and the Day in the left column. Also add a little margin between them.*/<br> .eventListPage-startDate{ text-align: center; margin-bottom:6px }<br> .eventListPage-startDayOfWeek { text-align: center }<br> <br> /*Event Title*/<br> .eventPage-detail .entry-title{ margin-bottom:20px; padding:4px }<br> <br> /* Remove the 1em margin-bottom from the Description title and add smaller margin, also add a small border above */<br> .eventListPage .entry-content p:first-child{ margin-bottom:5px; border-top: solid 1px #d3d3d399; }<br> <br> /* Increase the description font a little*/<br> .eventListPage .eventPage-detail.entry-content{ font-size:1.08em }<br> <br> /*Move down the description a little*/<br> .eventListPage .entry-content{ margin-top:10px }<br> /* And add a little margin below*/<br> .eventListPage .entry-content{ margin-bottom:10px }<br> <br> /*Add a little more space between the Title and who added the event*/<br> .eventDetailPage-mainSection .entry-title{ margin-bottom:12px }<br> <br> /* Add Some Spacing In The Detail Page between the date, location,categories etc*/<br> .eventDetailPage .eventPage-details ul > li{ margin-bottom:12px}<br> <br> /*Links In The Header Module ByLine For Inviting Members when creating and event and making them more button like*/<br> .inviteMembersPage .module-byline > a{ color:white; font-size:16px }<br> .inviteMembersPage .module-byline > a:hover{ color:antiquewhite; text-decoration:none }<br> /*Optional Make a button*/<br> .inviteMembersPage .module-byline{ margin-top:10px }<br> .inviteMembersPage .module-byline > a{ background-color:royalblue; padding:3px 6px; border-radius:4px }<br> .inviteMembersPage .module-byline > a:hover{ background-color:darkblue }<br> <br> /* EVENTS MOBILE VIEW*/<br> /* Move the image above the content soit gives the text more space to fill the screen either side */<br> @media only screen and (max-width:771px){<br> .eventListPage .media-frame.eventPage-details > .media-img {float:none!important}<br> }</p>
<p>Here is an image showing the mobile view with the image moved to allow the content to flow accross the full width instead of being squished up</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558686?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558686?profile=original" class="align-full" width="406"></a>NEW OPTIONS</p>
<p>/* Change font size for the organised by, categories and tags*/<br> .eventPage-details ul:nth-child(1) > li:nth-child(n+5){ font-size:14px}<br> .section-eventBundle li:nth-child(n+2){ font-size:14px }<br> <br> /*Limit the size of videos added in the detail page*/<br> .eventDetailPage .entry-content.cf iframe{max-width:480px; max-height:360px }</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558696?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558696?profile=original" class="align-full" width="498"></a></p></div>Crowdfunding Beautiful Nation for Education at #OneSparkhttps://creators.ning.com/forum/topics/crowdfunding-beautiful-nation-for-education-at-one-spark2015-04-07T21:33:29.000Z2015-04-07T21:33:29.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><table style="width: 100%;">
<tbody>
<tr>
<td>
<p><a rel="nofollow" href="http://www.beautifulnationproject.org" target="_blank"><img src="http://goo.gl/NoAZra" width="50%" alt="Beautiful Nation Project at One Spark Jacksonville" class="align-right" /></a>Everyone here is most likely familiar with what 'crowdfunding' is.  Well, our Ning 3 platform, Beautiful Nation Project, is participating this week for the <em>third year in a row</em> at One Spark - the world's largest crowdfunding festival - in Jacksonville Florida.  In past years, One Spark has been a place for raising funds for sea voyages and outreach. This year, Beautiful Nation is focusing on public schools in the state of Florida, most specifically Title I schools in Jacksonville. Justin is hoping to foster enough votes to crowdfund $20,000 from the event that will be used for school presentations through in-class live conferencing in addition to further development of their Water Quality Testing and Plastic Identification Toolkits for classrooms. </p>
<h2>One Spark Festival 2015</h2>
<p>If you happen to be in Jacksonville during the festival, find us (<a rel="nofollow" href="https://vote.beonespark.com/festival/2015/projects/beautiful-nation-project" target="_blank">project #22269</a>) at the Jacksonville Riverwalk.</p>
<p></p>
<p>Read an AWESOME write up by the <a rel="nofollow" href="http://patel.usf.edu/news/article/pcgs-student-competes-in-worlds-largest-crowd-funding-event" target="_blank">Patel College of Global Sustainability at USF</a> about our participation at One Spark 2015.</p>
<p>Follow Us on Twitter for Updates at One Spark <a rel="nofollow" href="http://twitter.com/bnationproject" target="_blank">@bnationproject</a> and Facebook at <a rel="nofollow" href="http://facebook.com/beautifulnationproject" target="_blank">@beautifulnationproject</a></p>
<p></p>
<p></p>
</td>
</tr>
</tbody>
</table>
<p>You can track the <a href="https://www.rebelmouse.com/OneSparkBuzz/" target="_blank">One Spark Buzz</a> here and <a href="http://www.beautifulnationproject.org/events" target="_blank">here on Beautiful Nation</a> if you are interested in how exactly the world's largest crowdfunding festival works. Don't miss the <a href="http://creators.ning.com/group/ning-powered-events/current-events" target="_self">new page inside the Ning Powered Events Group</a>for current events.</p>
<p></p>
</div>Three Handy Facebook Tricks You May Not Knowhttps://creators.ning.com/forum/topics/three-handy-facebook-tricks-you-may-not-know2014-01-29T01:05:16.000Z2014-01-29T01:05:16.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>For my fellow creators who use facebook to drive traffic to their networks, there are plenty of tactics that work and many that simply do not. A good while back I showed you a <a href="http://creators.ning.com/forum/topics/hack-to-embed-facebook-videos" target="_self">hack to embed facebook videos into your site</a>, but the three tricks I am about to show you happen ON facebook and if used correctly, could result in some great boosts in traffic to your network. Overall, you may not use these tricks everyday, but it is always good to know what is possible.</p>
<h2>3 Handy Facebook Tricks that You Might Not Know</h2>
<h3>Trick One: Download Facebook Videos Quickly for Reuse on Youtube or Ning</h3>
<p>The trick mentioned above-although it still works- is steadily becoming more of a time-suck than anything, but that doesn't mean you can't use Facebook videos to illuminate your network. There's an app for that. <a rel="nofollow" href="http://facebookvideoz.com/" target="_blank">Facebookvideoz</a> will help you download the videos you need to make the magic happen!</p>
<p><a href="http://facebookvideoz.com/" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556921?profile=original" class="align-full" width="500"></a></p>
<p> </p>
<h3>Trick Two: How to Invite All Friends to a Facebook Event</h3>
<p>Setting up an event on Facebook is one thing, but using an event to drive targeted traffic is another. You may set up an event for the launch of your 3.0 network or simply an online community event or gathering. If you wanna invite all of your friends to it- thus bringing attention to your network- here is how you do it:</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/556942?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556942?profile=original" class="align-full" width="500"></a></p>
<ul>
<li>Go to your <strong>Event Facebook page</strong> and click on <strong>Invite friends</strong>.</li>
<li><strong>Scroll down your friend list until the end</strong> to ensure you have loaded all the friends you want to invite.</li>
<li>On Chrome, press <span class="key">CTRL</span> + <span class="key">SHIFT</span> + <span class="key">J</span> (Windows) or <span class="key">CMD</span> + <span class="key">Opt</span> + <span class="key">J</span> (Mac).</li>
<li><strong>Copy and paste</strong> this <code>javascript:elms=document.getElementsByName("checkableitems[]");for (i=0;i<elms.length;i++){if (elms[i].type="checkbox" )elms[i].click()}</code> <strong>followed by an</strong> <span class="key">Enter</span> in the console space. You will then see all your friends name automatically ticked.</li>
</ul>
<p>By making sure that you mention and point to your network in the event description, you can draw much needed attention to your site</p>
<h3>Trick Three: Hide Your Last Name on a Facebook Profile</h3>
<p><br> You may not want to showcase your birth name or surname as leader of your community for various reasons. Facebook needs you to declare your first and last name, that’s two names, but if you want to have your account bear only one name (or just your first name), you can. Indonesians can register an account with only one name since many of them actually go with just one name. So for you to have a single name like single named Neo here, check out the instructions below.<br> <a href="http://storage.ning.com/topology/rest/1.0/file/get/556961?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/556961?profile=original" class="align-full" width="500"></a></p>
<ul>
<li>Login to your Facebook account.</li>
<li>Grab any Indonesian proxy from this list <a target="_blank" rel="external" href="http://www.freeproxylists.net/id.html">here</a> then change your proxy on your browser.</li>
<li>On Chrome for PC head to <strong>Settings</strong> > <strong>Show advanced settings</strong> > under <strong>Network</strong>, click on <strong>Change proxy settings</strong> > click on <strong>Lan Settings</strong> and <strong>tick</strong> "Use Proxy Server for your LAN".</li>
<li>Fill in the address box with the proxy, and the port box accordingly. For example, if your proxy is 180.250.160.58:8080, "<strong>180.250.160.58</strong>" goes into the <strong>address box</strong> and <strong>"8080</strong>" is the <strong>port</strong>.</li>
<li>Tick on <strong>Bypass Proxy Server For Local Addresses</strong>. Press <strong>OK</strong>.</li>
<li>Now, go to your Facebook Account settings page, change the language to <strong>"Bahasa Indonesia"</strong> and save changes.</li>
<li><strong>Remove your Facebook last name</strong> and save changes again.</li>
<li>Once you have complete everything, revert to your original language.</li>
</ul>
<p></p>
<p>As always, if you need my help, <a href="http://creators.ning.com/profile/ElSurveyor" target="_self">just let me know</a>. Enjoy!</p></div>EVENTS "ADVANCED" SEARCHhttps://creators.ning.com/forum/topics/events-advanced-search2011-11-06T00:42:37.000Z2011-11-06T00:42:37.000ZSimonehttps://creators.ning.com/members/Simone434<div><p>Hi all,</p>
<p>in order to improve my network, I've create a kind of "Advanced" Search for Events... What hard work! :-)</p>
<p>So, these are - in summary - the steps to implement my function:</p>
<p>1 - Determinate what are the features/contitions search for events: for me, there was 4 kind of elements (type, day, country/state and county/zone, with county depends on world).</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/548935?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/548935?profile=original" width="507"></a></p>
<p>2 - Improve an external function that easily helps you to combinate each features in order to have a single result string with any possible combination. For example: type:course, day: monday, country: universe, county: world. You need this kind of string (comma separated): <em>"course, monday, course-monday, universe, course-universe, monday-universe, course-monday-universe, universe-world, course-universe-world, monday-universe-world, course-monday-universe-world"</em> (if county doesn't depend on country, you need also: <em>"world, course-world, monday-world"</em>).</p>
<p>3 - Enable Events moderation and update the "TYPE" with the result string just created (use short code for needed value): in this way, you can use the LIST-BY-TYPE Ning feature (if you want, you can change the search result string in Language Editor) calling it with a button.</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/548958?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/548958?profile=original" width="372"></a>4 - Implement an html advaced search with Drop-Down-List and conditional search in a button. Here the code for picture in point 1:</p>
<p><em><form></em><br> <em><table style="width: 100%;"> // use a table to place options better</em><br> <em><tbody></em><br> <em><tr></em><br> <em><td style="width: 22000px;"></em><br> <em><table style="width: 100%;"></em><br> <em><tbody></em><br> <em><tr></em><br> <em><td></em><br> <em><div class="xg_module eventmodule"></em><br> <em><div class="xg_module_head"></em><br> <em><h2>cerca evento</h2></em><br> <em></div></em><br> <em><div class="xg_module_body"></em><br> <em><table style="width: 261px; height: 74px;" class="style1" border="1"></em><br> <em><tbody></em><br> <em><tr></em><br> <em><td style="height: 35px;" class="style1">Tipo:</td></em><br> <em><td style="height: 35px; width: 20px;" class="style2"> </td></em><br> <em><td style="height: 35px; width: 181px;"></em><br> <em><div><select name="Tipo" id="Tipo"></em><br> <em><option value="0">Tutti</option></em><br> <em><option value="congresso">Congresso</option></em><br> <em><option value="corso">Corso</option></em><br> <em><option value="festa">Festa</option></em><br> <em><option value="serata">Serata</option></em><br> <em><option value="stage">Stage</option></em><br> <em><option value="viaggio">Vacanza</option></em><br> <em></select></div></em><br> <em></td></em><br> <em></tr></em><br> <em><tr></em><br> <em><td style="height: 35px;">Giorno:<br /></em><br> <em></td></em><br> <em><td style="height: 35px; width: 20px;" class="style2"> </td></em><br> <em><td style="width: 181px; height: 35px;"><select name="Giorno" id="Giorno"></em><br> <em><option value="0">Tutti</option></em><br> <em><option value="lun">Lunedì</option></em><br> <em><option value="mar">Martedì</option></em><br> <em><option value="mer">Mercoledì</option></em><br> <em><option value="gio">Giovedì</option></em><br> <em><option value="ven">Venerdì</option></em><br> <em><option value="sab">Sabato</option></em><br> <em><option value="dom">Domenica</option></em><br> <em></select></td></em><br> <em></tr></em><br> <em><tr></em><br> <em><td style="height: 35px;">Regione:</td></em><br> <em><td style="height: 35px; width: 20px;" class="style2"> </td></em><br> <em><td style="width: 181px; height: 35px;"></em><br> <em><div><select name="Regione" id="Regione"></em><br> <em><option value="0">Tutte</option></em><br> <em><option value="abruzzo">Abruzzo</option></em><br> <em><option value="basilicata">Basilicata</option></em><br> <em><option value="calabria">Calabria</option></em><br> <em><option value="campania">Campania</option></em><br> <em><option value="emilia">Emilia-Romagna</option></em><br> <em><option value="friuli">Friuli-Venezia Giulia</option></em><br> <em><option value="lazio">Lazio</option></em><br> <em><option value="liguria">Liguria</option></em><br> <em><option value="lombardia">Lombardia</option></em><br> <em><option value="marche">Marche</option></em><br> <em><option value="molise">Molise</option></em><br> <em><option value="piemonte">Piemonte</option></em><br> <em><option value="puglia">Puglia</option></em><br> <em><option value="sardegna">Sardegna</option></em><br> <em><option value="sicilia">Sicilia</option></em><br> <em><option value="toscana">Toscana</option></em><br> <em><option value="trentino">Trentino-Alto Adige</option></em><br> <em><option value="umbria">Umbria</option></em><br> <em><option value="aosta">Valle d'Aosta</option></em><br> <em><option value="veneto">Veneto</option></em><br> <em></select></div></em><br> <em></td></em><br> <em></tr></em><br> <em><tr></em><br> <em><td style="height: 35px;">Provincia:</td></em><br> <em><td style="height: 35px; width: 20px;" class="style2"> </td></em><br> <em><td style="width: 181px; height: 35px;"></em><br> <em><div><select name="Provincia" id="Provincia"></em><br> <em><option class="0" value="0">Tutte</option></em><br> <em><option class="abruzzo" value="0">Tutte</option></em><br> <em><option class="abruzzo" value="ch">Chieti</option></em><br> <em><option class="abruzzo" value="aq">L'Aquila</option></em><br> <em><option class="abruzzo" value="pe">Pescara</option></em><br> <em><option class="abruzzo" value="te">Teramo</option></em><br> <em><option class="basilicata" value="0">Tutte</option></em><br> <em><option class="basilicata" value="mt">Matera</option></em><br> <em><option class="basilicata" value="pz">Potenza</option></em><br> <em><option class="calabria" value="0">Tutte</option></em><br> <em><option class="calabria" value="cz">Catanzaro</option></em><br> <em><option class="calabria" value="cs">Cosenza</option></em><br> <em><option class="calabria" value="kr">Crotone</option></em><br> <em><option class="calabria" value="rc">Reggio di Calabria</option></em><br> <em><option class="calabria" value="vv">Vibo Valentia</option></em><br> <em><option class="campania" value="0">Tutte</option></em><br> <em><option class="campania" value="av">Avellino</option></em><br> <em><option class="campania" value="bn">Benevento</option></em><br> <em><option class="campania" value="ce">Caserta</option></em><br> <em><option class="campania" value="na">Napoli</option></em><br> <em><option class="campania" value="sa">Salerno</option></em><br> <em><option class="emilia" value="0">Tutte</option></em><br> <em><option class="emilia" value="bo">Bologna</option></em><br> <em><option class="emilia" value="fe">Ferrara</option></em><br> <em><option class="emilia" value="fc">Forlì-Cesena</option></em><br> <em><option class="emilia" value="mo">Modena</option></em><br> <em><option class="emilia" value="pr">Parma</option></em><br> <em><option class="emilia" value="pc">Piacenza</option></em><br> <em><option class="emilia" value="ra">Ravenna</option></em><br> <em><option class="emilia" value="re">Reggio nell'Emilia</option></em><br> <em><option class="emilia" value="rn">Rimini</option></em><br> <em><option class="friuli" value="0">Tutte</option></em><br> <em><option class="friuli" value="go">Gorizia</option></em><br> <em><option class="friuli" value="pn">Pordenone</option></em><br> <em><option class="friuli" value="ts">Trieste</option></em><br> <em><option class="friuli" value="ud">Udine</option></em><br> <em><option class="lazio" value="0">Tutte</option></em><br> <em><option class="lazio" value="fr">Frosinone</option></em><br> <em><option class="lazio" value="lt">Latina</option></em><br> <em><option class="lazio" value="ri">Rieti</option></em><br> <em><option class="lazio" value="rm">Roma</option></em><br> <em><option class="lazio" value="vt">Viterbo</option></em><br> <em><option class="liguria" value="0">Tutte</option></em><br> <em><option class="liguria" value="ge">Genova</option></em><br> <em><option class="liguria" value="im">Imperia</option></em><br> <em><option class="liguria" value="sp">La Spezia</option></em><br> <em><option class="liguria" value="sv">Savona</option></em><br> <em><option class="lombardia" value="0">Tutte</option></em><br> <em><option class="lombardia" value="bg">Bergamo</option></em><br> <em><option class="lombardia" value="bs">Brescia</option></em><br> <em><option class="lombardia" value="co">Como</option></em><br> <em><option class="lombardia" value="cr">Cremona</option></em><br> <em><option class="lombardia" value="lc">Lecco</option></em><br> <em><option class="lombardia" value="lo">Lodi</option></em><br> <em><option class="lombardia" value="mn">Mantova</option></em><br> <em><option class="lombardia" value="mi">Milano</option></em><br> <em><option class="lombardia" value="mb">Monza e Brianza</option></em><br> <em><option class="lombardia" value="pv">Pavia</option></em><br> <em><option class="lombardia" value="so">Sondrio</option></em><br> <em><option class="lombardia" value="va">Varese</option></em><br> <em><option class="marche" value="0">Tutte</option></em><br> <em><option class="marche" value="an">Ancona</option></em><br> <em><option class="marche" value="ap">Ascoli Piceno</option></em><br> <em><option class="marche" value="fm">Fermo</option></em><br> <em><option class="marche" value="mc">Macerata</option></em><br> <em><option class="marche" value="pu">Pesaro e Urbino</option></em><br> <em><option class="molise" value="0">Tutte</option></em><br> <em><option class="molise" value="cb">Campobasso</option></em><br> <em><option class="molise" value="is">Isernia</option></em><br> <em><option class="piemonte" value="0">Tutte</option></em><br> <em><option class="piemonte" value="al">Alessandria</option></em><br> <em><option class="piemonte" value="at">Asti</option></em><br> <em><option class="piemonte" value="bi">Biella</option></em><br> <em><option class="piemonte" value="cn">Cuneo</option></em><br> <em><option class="piemonte" value="no">Novara</option></em><br> <em><option class="piemonte" value="to">Torino</option></em><br> <em><option class="piemonte" value="vb">Verbano-Cusio-Ossola</option></em><br> <em><option class="piemonte" value="vc">Vercelli</option></em><br> <em><option class="puglia" value="0">Tutte</option></em><br> <em><option class="puglia" value="ba">Bari</option></em><br> <em><option class="puglia" value="bt">Barletta-Andria-Trani</option></em><br> <em><option class="puglia" value="br">Brindisi</option></em><br> <em><option class="puglia" value="fg">Foggia</option></em><br> <em><option class="puglia" value="le">Lecce</option></em><br> <em><option class="puglia" value="ta">Taranto</option></em><br> <em><option class="sardegna" value="0">Tutte</option></em><br> <em><option class="sardegna" value="ca">Cagliari</option></em><br> <em><option class="sardegna" value="ci">Carbonia-Iglesias</option></em><br> <em><option class="sardegna" value="vs">Medio Campidano</option></em><br> <em><option class="sardegna" value="nu">Nuoro</option></em><br> <em><option class="sardegna" value="og">Ogliastra</option></em><br> <em><option class="sardegna" value="ot">Olbia-Tempio</option></em><br> <em><option class="sardegna" value="or">Oristano</option></em><br> <em><option class="sardegna" value="ss">Sassari</option></em><br> <em><option class="sicilia" value="0">Tutte</option></em><br> <em><option class="sicilia" value="ag">Agrigento</option></em><br> <em><option class="sicilia" value="cl">Caltanissetta</option></em><br> <em><option class="sicilia" value="ct">Catania</option></em><br> <em><option class="sicilia" value="en">Enna</option></em><br> <em><option class="sicilia" value="me">Messina</option></em><br> <em><option class="sicilia" value="pa">Palermo</option></em><br> <em><option class="sicilia" value="rg">Ragusa</option></em><br> <em><option class="sicilia" value="si">Siracusa</option></em><br> <em><option class="sicilia" value="tp">Trapani</option></em><br> <em><option class="toscana" value="0">Tutte</option></em><br> <em><option class="toscana" value="ar">Arezzo</option></em><br> <em><option class="toscana" value="fi">Firenze</option></em><br> <em><option class="toscana" value="gr">Grosseto</option></em><br> <em><option class="toscana" value="li">Livorno</option></em><br> <em><option class="toscana" value="lu">Lucca</option></em><br> <em><option class="toscana" value="ms">Massa-Carrara</option></em><br> <em><option class="toscana" value="pi">Pisa</option></em><br> <em><option class="toscana" value="pt">Pistoia</option></em><br> <em><option class="toscana" value="po">Prato</option></em><br> <em><option class="toscana" value="si">Siena</option></em><br> <em><option class="trentino" value="0">Tutte</option></em><br> <em><option class="trentino" value="bz">Bolzano</option></em><br> <em><option class="trentino" value="tn">Trento</option></em><br> <em><option class="umbria" value="0">Tutte</option></em><br> <em><option class="umbria" value="pg">Perugia</option></em><br> <em><option class="umbria" value="tr">Terni</option></em><br> <em><option class="aosta" value="ao">Aosta</option></em><br> <em><option class="veneto" value="0">Tutte</option></em><br> <em><option class="veneto" value="bl">Belluno</option></em><br> <em><option class="veneto" value="pd">Padova</option></em><br> <em><option class="veneto" value="ro">Rovigo</option></em><br> <em><option class="veneto" value="tv">Treviso</option></em><br> <em><option class="veneto" value="ve">Venezia</option></em><br> <em><option class="veneto" value="vr">Verona</option></em><br> <em><option class="veneto" value="vi">Vicenza</option></em><br> <em></select></div></em><br> <em></td></em><br> <em></tr></em><br> <em><tr></em><br> <em><td style="height: 35px;" colspan="3"><input class="button" value="Cerca" onclick="if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events'; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Giorno.options[form.Giorno.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index==0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Giorno.options[form.Giorno.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index==0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index==0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index==0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value; else if ((form.Tipo.options[form.Tipo.selectedIndex].index!=0) && (form.Giorno.options[form.Giorno.selectedIndex].index!=0) && (form.Regione.options[form.Regione.selectedIndex].index!=0) && (form.Provincia.options[form.Provincia.selectedIndex].index!=0)) location = 'http://www.latinplaza.it/events/event/listByType?type=' + form.Tipo.options[form.Tipo.selectedIndex].value + '-' + form.Giorno.options[form.Giorno.selectedIndex].value + '-' + form.Regione.options[form.Regione.selectedIndex].value + '-' + form.Provincia.options[form.Provincia.selectedIndex].value;" type="button" /></td></em><br> <em></tr></em><br> <em></tbody></em><br> <em></table></em><br> <em><script type="text/javascript">// <![CDATA[</em><br> <em>//Applies cascading behavior for the specified dropdowns</em><br> <em>function applyCascadingDropdown(sourceId, targetId) {</em><br> <em> var source = document.getElementById(sourceId);</em><br> <em> var target = document.getElementById(targetId);</em><br> <em> if (source && target) {</em><br> <em> source.onchange = function() {</em><br> <em> displayOptionItemsByClass(target, source.value);</em><br> <em> }</em><br> <em> displayOptionItemsByClass(target, source.value);</em><br> <em> }</em><br> <em>}</em><br> <br> <em>//Displays a subset of a dropdown's options</em><br> <em>function displayOptionItemsByClass(selectElement, className) {</em><br> <em> if (!selectElement.backup) {</em><br> <em> selectElement.backup = selectElement.cloneNode(true);</em><br> <em> }</em><br> <em> var options = selectElement.getElementsByTagName("option");</em><br> <em> for(var i=0, length=options.length; i<length; i++) {</em><br> <em> selectElement.removeChild(options[0]);</em><br> <em> }</em><br> <em> var options = selectElement.backup.getElementsByTagName("option");</em><br> <em> for(var i=0, length=options.length; i<length; i++) {</em><br> <em> if (options[i].className==className)</em><br> <em> selectElement.appendChild(options[i].cloneNode(true));</em><br> <em> }</em><br> <em>}</em><br> <br> <em>//Binds dropdowns</em><br> <em>function applyCascadingDropdowns() {</em><br> <em> applyCascadingDropdown("Regione", "Provincia");</em><br> <em>}</em><br> <br> <em>//execute when the page is ready</em><br> <em>window.onload=applyCascadingDropdowns;</em><br> <em>// ]]></script></em><br> <em></div></em><br> <em></div></em><br> <em></td></em><br> <em></tr></em></p>
<p>5 - Hide "Most popular events type" with JQuery.</p>
<p>To see the functions: <a rel="nofollow" href="http://www.latinplaza.it/eventi" target="_blank">http://www.latinplaza.it/eventi</a></p>
<p> </p>
<p>Bye!</p>
<p>Simone</p></div>