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 –

Featured Discussions

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

Ashley W posted a discussion
I am searching to take over a network of a 2.0 format. Anyone have one?Thankyou in advance.
2 hours ago
Sheshdhar Tiwari posted a discussion
Please notice the activities notifications.Name of memberHis/her actionDiscussion or any other item…
3 hours ago
Ana Massien replied to Ana Massien's discussion
Some recent suggestions for ning 3.0
"Yeah, well just some thoughts I have had."
Friday
Garfield Archivist replied to ⚡JFarrow⌁'s discussion
2 Secret Things I learned today about Ning Communities
"Nice!"
Friday
DYLAN GOODWIN updated their profile
Thursday
DYLAN GOODWIN replied to Scott Bishop's discussion
Photo Slideshow Not Rendering Correctly
"Speaking of slideshows -- isn't it time for more options on the sizing to eliminate the un-attracti…"
Thursday
This Is bully replied to Ana Massien's discussion
Some recent suggestions for ning 3.0
"Ha good luck it’s been over 8 months no new updates only promises "
Thursday
Claire Thomas and Ralph Stokes joined Ning Creators Social Network
Thursday
Ana Massien commented on Steve C's blog post To Ning's CEO
"Isn't that kind of rude to ask for the ceo stuff right out right? Most people surf with protected p…"
Thursday
Ana Massien replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"I do not like the landing page thing. Doesn't flow with the rest of my theme, of course if you have…"
Thursday
Ana Massien updated their profile
Thursday
Ana Massien updated their profile photo
Thursday
More…

Meanwhile, you can check our social media channels