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

Rosas † Negras replied to Bizz's discussion
Ning: Why does it not show who added music or a tab for My Music ? Essential For Moderation
"here is the reason I chose to upload only I"
6 hours ago
⚡JFarrow⌁ replied to Bizz's discussion
Tip: Resize your Social Channels Video
"awesome... thanks Bizz!"
8 hours ago
Bizz posted a discussion
Either I am totaly missing something but l can't seem to see anywhere that says who added a playlis…
8 hours ago
Bizz replied to Bizz's discussion
Tip: Profile Themes And Code
"Oh not sure if you seen the Game Of Thrones theme but I will be adding a small series of these and…"
10 hours ago
Bizz replied to Bizz's discussion
Tip: Profile Themes And Code
"Thanks, yes this is the first version of this and will be adding more to it so members can also cha…"
10 hours ago
J.Ayvar replied to Bizz's discussion
Tip: Profile Themes And Code
" Wow, I was pending this update and finally see it. Everything that can be done creatively in Ning…"
12 hours ago
Rosas † Negras replied to Bizz's discussion
Tip: Resize your Social Channels Video
"thank you very much my Master"
19 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"I waited two days ... and today the answer I have to pay ... I told him that I would have a discuss…"
yesterday
Bizz posted a discussion
If you use the css section quite a bit like I do you may find the box a little limited in it's heig…
yesterday
Bizz posted a discussion
Ning have changed the layout for the social channels and so we have a small video in the middle of…
yesterday
Bizz replied to Bizz's discussion
Tip: How I added Music To A Page
"Thanks Charles, no unfortunatly not it just a way to get the music page onto a page
 "
yesterday
Bizz replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"The agent has got this wrong as that is what you pay for. Have you got it set that the option to re…"
yesterday
More…

Meanwhile, you can check our social media channels