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

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

Votes: 0
Email me when people reply –
 

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

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels