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

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

Garfield Archivist replied to Garfield Archivist's discussion
Javascript Edits
"Thank you so much Matt. I used your code to get to my ideal solution but I could not have gotten th…"
1 hour ago
Matt replied to Garfield Archivist's discussion
Javascript Edits
"have a play with following: ning 2
<script>{x$('.xg_headline').insertAfter('.vid_container');}</scr…"
5 hours ago
Garfield Archivist posted a discussion
Quick questions: There are css edits you can do on Ning and those are relatively simple but does an…
10 hours ago
Tim replied to Anastasia_Ning_Support's discussion
What’s New on NING: Recap of the Latest Updates
" Thanks for the updates, all welcome!  I have a query about advanced search...
Can the advanced sea…"
13 hours ago
Stan liked Anastasia_Ning_Support's discussion What’s New on NING: Recap of the Latest Updates
15 hours ago
⚡JFarrow⌁ posted a discussion
I want to recreate the new modal window that Ning recently put on our site.I am able to get the HTM…
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
New App for Getting Help with Your Ning Community
"My Ning Tips App has been updated with LOADS of improvements.   You can now add it to both Phones a…"
yesterday
⚡JFarrow⌁ replied to Fabrizio Lavado's discussion
301 Redirects
"this page seems to be getting close to what we need but the suggestions do not work..."
yesterday
Anastasia_Ning_Support replied to Unpwn Producer's discussion
I need to secure my site
"Hello!
I can see you haven't used the recommended cloudflare.com option, so I have forwarded your r…"
yesterday
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
What’s New on NING: Recap of the Latest Updates
"Hello Tyler!
You should enable it in the settings of the Activity Feed module - https://take.ms/DFb&hellip;"
yesterday
Henry Thomas is now a member of Ning Creators Social Network
yesterday
Ana Massien replied to Anastasia_Ning_Support's discussion
What’s New on NING: Recap of the Latest Updates
"Good news, ning thanks for the updates!"
yesterday
More…

Meanwhile, you can check our social media channels