Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

Events Months Styling Tip

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 :Add Events Widget

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.

Here is alink to my events page; https://gromsquad.ning.com/events

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

<script>
x$(document).ready(function(){
//Add the classes to the months
//13-04-19 John Bizley
//Add A Class To The Start Month In eventPage-detail in eventlistpage
var StartMonth = x$('.eventPage-details .span10 ul:nth-child(1) > li:nth-child(2) > a:nth-child(1)').addClass('startMonth');
var $January = x$('.eventListPage .startMonth:contains(Jan)').closest('article.entry').addClass('january').wrapAll('<div id="JanWrap" class="calendarGrid"></div>');
var $February = x$('.eventListPage .startMonth:contains(Feb)').closest('article.entry').addClass('february').wrapAll('<div id="FebWrap" class="calendarGrid"></div>');
var $March = x$('.eventListPage .startMonth:contains(Mar)').closest('article.entry').addClass('march').wrapAll('<div id="MarWrap" class="calendarGrid"></div>');
var $April = x$('.eventListPage .startMonth:contains(Apr)').closest('article.entry').addClass('april').wrapAll('<div id="AprWrap" class="calendarGrid"></div>');
var $May = x$('.eventListPage .startMonth:contains(May)').closest('article.entry').addClass('may').wrapAll('<div id="MayWrap" class="calendarGrid"></div>');
var $June = x$('.eventListPage .startMonth:contains(Jun)').closest('article.entry').addClass('june').wrapAll('<div id="JunWrap" class="calendarGrid"></div>');
var $July = x$('.eventListPage .startMonth:contains(Jul)').closest('article.entry').addClass('july').wrapAll('<div id="JulWrap" class="calendarGrid"></div>');
var $August = x$('.eventListPage .startMonth:contains(Aug)').closest('article.entry').addClass('august').wrapAll('<div id="AugWrap" class="calendarGrid"></div>');
var $September = x$('.eventListPage .startMonth:contains(Sep)').closest('article.entry').addClass('september').wrapAll('<div id="SeptWrap" class="calendarGrid"></div>');
var $October = x$('.eventListPage .startMonth:contains(Oct)').closest('article.entry').addClass('october').wrapAll('<div id="OctWrap" class="calendarGrid"></div>');
var $November = x$('.eventListPage .startMonth:contains(Nov)').closest('article.entry').addClass('november').wrapAll('<div id="NovWrap" class="calendarGrid"></div>');
var $December = x$('.eventListPage .startMonth:contains(Dec)').closest('article.entry').addClass('december').wrapAll('<div id="DecWrap" class="calendarGrid"></div>');
var cgTitle = x$('.calendarGrid').prepend('<div class="calendarGrid-Title"></div>');
var cgTitleName = x$('.calendarGrid-Title').append('<h3 class="monthHeader-name">Month</h3>');

x$('#JanWrap h3.monthHeader-name').html("January");
x$('#FebWrap h3.monthHeader-name').html("February");
x$('#MarWrap h3.monthHeader-name').html("March");
x$('#AprWrap h3.monthHeader-name').html("April");
x$('#MayWrap h3.monthHeader-name').html("May");
x$('#JunWrap h3.monthHeader-name').html("June");
x$('#JulWrap h3.monthHeader-name').html("July");
x$('#AugWrap h3.monthHeader-name').html("August");
x$('#SepWrap h3.monthHeader-name').html("September");
x$('#OctWrap h3.monthHeader-name').html("October");
x$('#Noverap h3.monthHeader-name').html("November");
x$('#DecWrap h3.monthHeader-name').html("December");
});
</script>

 

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

/************* EVENTS AND EVENT WIDGET ***********/

/*Adding a background to a wrap*/
#DecWrap{background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/1952482221?profile=original");}
#DecWrap .monthHeader-name{ color:white }

#DecWrap .entry.december{background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/1952482226?profile=original");}
#DecWrap .entry.december .media-body, #DecWrap .entry.december .media-body a{ color:white }
#DecWrap .entry.december .media-body a:hover{ color:#7df07e }
#DecWrap .entry.december .media-body{ background-color: rgba(129, 35, 35, 0.79);}
#DecWrap .entry.december .span3 {color: white; background-color: rgba(129, 35, 35, 0.49);text-align:center}

/** CALENDAR GRID This is the grid which will surround each of the months **/

/** Events Monthly Headers **/
.calendarGrid-Title{
width:100%; clear:both;
}
.monthHeader-name{
font-weight:bold;
display:block;
padding:10px 20px;
color:#1a11b1;
background-color:rgba(127, 63, 191,0.3);
border-radius:6px 6px 0px 0px; font-size:1.7em
}
.eventListPage.sheet{
background-color:#fbfbfb!important;
}
.eventListPage .entry{
background-color:white
}


/**MAIN LIST PAGE **/
/***** EVENTS ****/
/* Margin between each post */

/** Margin between each of the posts plus some padding**/
.eventListPage .entry{
margin-bottom:20px;
padding:10px
}
.section-eventBundle .entry {
margin-bottom: 15px;
}

/*Links In The Header Module ByLine For Inviting Members when creating an event */
.module-byline > a{
color:white;
font-size:16px;
}
.module-byline > a:hover{
color:antiquewhite;
text-decoration:none
}

/*Make a button for the inivite members links*/
.module-byline{
margin-top:10px;
}
.module-byline > a{
background-color:royalblue;
padding:3px 6px;
border-radius:4px;
}
.module-byline > a:hover{
background-color:darkblue;
}

/* Add a border around each entry to make give them more seperation */
.eventListPage .span13 {
border:solid 1px lightgray;
}

/** New Entry Title Adjustment After Moving It Above the Event Content **/
.eventListPage .eventPage-details > .entry-title{
margin-bottom:14px;
box-shadow: 0px 5px 5px lightgray;
padding: 6px;
border: solid 1px #eaeaea;
}
/*Add little Padding To The Details Section */
.eventPage-details{
padding:4px;
}

/*Entry Title Make Uppercase */
.eventPage-details .entry-title > a, .section-eventBundle .entry-title > a{
text-transform:uppercase;
}
.section-eventBundle .entry-title > a{
font-size:1em;
}

/* Change the spans of the main content and the date day column to 100% width */
.eventListPage .span3, .eventListPage .span13{
width:100% ;
}
.eventListPage .span3{
text-align:left;
padding:6px;
border-bottom: none;
margin-bottom:0px;
font-size:1.3em;
}

/*Move the start date to the left and make it an inline block */
.eventListPage .eventListPage-startDate, .eventListPage .eventListPage-startDayOfWeek {
display:inline-block;
padding:0 10px 0px 0;
}

/*Remove entry content image*/
.eventListPage .eventPage-detail.entry-content.cf a > img{
display:none!important;
}
.column-narrow .eventPage-detail.entry-content.cf a > img{
display:none!important;
}
/*Remove entry content iframes*/
.eventListPage .eventPage-detail.entry-content.cf iframe{
display:none!important;
}
.column-narrow .eventPage-detail.entry-content.cf iframe{
display:none!important;
}

/* Add Box Shadow To The Entries */
.eventListPage .entry{
box-shadow: 0px 5px 5px lightgray;
padding: 6px;
border-top: solid 1px #eaeaea;
}
.eventListPage .entry:hover{
box-shadow: 0px 8px 7px darkgray;
}

/* Space out the Events Details li list */
li.eventPage-detail{
margin:10px;
}
.eventPage-detail{
margin-bottom:0px;
}
li.eventPage-detail.entry-content{
margin:15px 0px;
border-top:solid 1px lightgray;
border-bottom:solid 1px lightgray;
padding:4px;
}
li.eventPage-detail.entry-content p{
font-size:0.93em;
}

/* Options drop down for going or not */
.eventListPage .eventPage-details .span6.narrow16.tablet16.mobile16{
text-align:center;
border:solid 1px lightgray;
padding:6px;
}
.eventListPage .eventPage-details .eventPage-rsvp {
margin-bottom:20px;
float:left;
display:inline-block;
}
@media only screen and ( min-width:767px ){
.eventListPage .eventPage-details .optionsDropdown:before{
content:"Attend Event options";
display:inline-block;
padding:4px 10px;
float:left;
}
.eventDetailPage .eventPage-details .optionsDropdown:before{
content:"Attend Event options";
display:block;padding:8px 0px;
}
}
/* Events Detail Page */
.eventDetailPage .entry-content:before{
content:"Event Details";
display:block;
padding:8px 0px;
font-size:1.1em;
font-weight:bold;
color:darkblue;
border-bottom:solid 1px lightgray;
margin-bottom:10px;
}
.eventDetailPage-attendees{
display:none;
}
.eventDetailPage .trispan{
margin-top:6px;
}
.triplet.eventDetailPage-triplet{
border: solid 1px #efefef;
padding:4px;
max-width:100%;
}
/* Page Header*/
.EventDetail-header{
display: block;
background-color: #00a6eb;
border-radius: 4px 4px 0 0;
padding: 13px 10px 10px 10px;
margin: -10px -10px 10px -10px;
}
.EventDetail-header a,.EventDetail-header a:hover{
color:white;
font-size:1.5em;
font-weight:bold;
}

EXTRA TIP

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.

/*Adding a background to a wrap*/
#DecWrap{background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/1952482221?profile=original");}
#DecWrap .monthHeader-name{ color:white }

#DecWrap .entry.december{background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/1952482226?profile=original");}
#DecWrap .entry.december .media-body, #DecWrap .entry.december .media-body a{ color:white }
#DecWrap .entry.december .media-body a:hover{ color:#7df07e }
#DecWrap .entry.december .media-body{ background-color: rgba(129, 35, 35, 0.79);}
#DecWrap .entry.december .span3 {color: white; background-color: rgba(129, 35, 35, 0.49);text-align:center}

 

That's it, enjoy

Bizz :-)

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Anna_Ning_Support replied to Paul Corona's discussion
Mobile Version- Open to Desktop View
"Hello,
In order to have the site in the desktop view on the mobile device, you need to deactivate t…"
2 hours ago
Michelle Gilbert, CA, APAIA liked ⚡JFarrow⌁'s video in Ning Powered Events
yesterday
J.Ayvar replied to Paul Corona's discussion
Mobile Version- Open to Desktop View
"Hello @ Paul. Ning 2  should be responsible .i am wating for these feature too."
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Thank you Ning! SEO Improvement Features!
"Thank you Anastasia.. have a great weekend"
yesterday
Anastasia_Ning_Support posted a discussion
 
Hello everyone!
Are you ready to level up your marketing skills? Join our new webinar on August 2…
yesterday
Paul Corona posted a discussion
Ok- I'm a diehard desktop user but once in awhile I'll check our site on my phone.....Since most pe…
yesterday
Alessandro replied to SweetPotato's discussion
Ning 3.0 Tip: Infinite Scroll for Photos (Loading More Images ... )
"I found out for groups! Groups are loading automaticatlly on scroll!
In itemSelector you need to ch…"
yesterday
Anastasia_Ning_Support replied to ⚡JFarrow⌁'s discussion
Thank you Ning! SEO Improvement Features!
"Hi! 
Thank you for your feedback! We are preparing an announcement with several minor updates that…"
Friday
Oluwadamilola Taiwo Oyebanji, Donnie Belcher, Moses David and 3 more joined Ning Creators Social Network
Friday
Groudswell replied to Groudswell's discussion
Editing Sign-up Page - Adding a link and Paypal Button
"We have looked into this, but don't think it will work for us.  Will it support autorenew on either…"
Friday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Thank you Ning! SEO Improvement Features!
"It would be cool if there could be an option to specify a custom image for social media shares..."
Thursday
Rex updated their profile
Thursday
More…

Meanwhile, you can check our social media channels