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

First Of All Here Is The Demo Page : http://bizzssite.ning.com/events-demo

Image Demo

As you can see this page I have removed all my other custom design so we have just a standard events list page so we can see how it would look with a default event list page.

What we have got now on this page is a way to seperate each of the months to make it easier to see what's in that month. Also by adding the code we are now giving each month a class so we can work just on that month if we need to. You can see a small example of this in December where I have added a different colour to the Month tab and also gave the background to this header a Christmas type header. A headerContainer will be added to all posts and this has been done on purpose so that we can add a message or something like that if needed ( this I will explain in another post ).

A little explanation about the code;

I have added it this way so you can easily see the parts of it, there is a more effeciant way of doing it but it's not so clear if you want to change anything.

So in the first block of code is where we are adding the classes to the months and it is these classes that enable us to be able to target each month with some css if we want to.

The second block is adding the Headers and the names of the month, again these have classes added to h3 so we can target them in css if we want to.

We are also going to add a touch of css to style the tabs and headers, in my demo you will see each of the month headers has an image added to the background, this is optional and you do not have to add that. If you want to add an image of your own just replace the image link with one you would like to use. The image get's added to your file manager then you copy the link and insert this into the code replacing the one I have added.

Ok lets get started and add the code.

First of all we are going to add all the main code. copy it and add it to your Site&Pages Custom Code End Of Page Section.

<script>
x$(document).ready(function(){
//Add the classes to the months
x$('.eventListPage .span3:contains(January)').closest('article.entry').addClass('january');
x$('.eventListPage .span3:contains(February)').closest('article.entry').addClass('february');
x$('.eventListPage .span3:contains(March)').closest('article.entry').addClass('march');
x$('.eventListPage .span3:contains(April)').closest('article.entry').addClass('april');
x$('.eventListPage .span3:contains(May)').closest('article.entry').addClass('may');
x$('.eventListPage .span3:contains(June)').closest('article.entry').addClass('june');
x$('.eventListPage .span3:contains(July)').closest('article.entry').addClass('july');
x$('.eventListPage .span3:contains(August)').closest('article.entry').addClass('august');
x$('.eventListPage .span3:contains(September)').closest('article.entry').addClass('september');
x$('.eventListPage .span3:contains(October)').closest('article.entry').addClass('october');
x$('.eventListPage .span3:contains(November)').closest('article.entry').addClass('november');
x$('.eventListPage .span3:contains(December)').closest('article.entry').addClass('december');
x$('<div/>',{ class : 'monthHeader-Container'}).prependTo('.eventListPage article.entry');

x$('<div class="monthHeader"><h3 class="monthHeader-name">January</h3></div>').appendTo('.eventListPage article.entry.january:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">February</h3></div>').appendTo('.eventListPage article.entry.february:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">March</h3></div>').appendTo('.eventListPage article.entry.march:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">April</h3></div>').appendTo('.eventListPage article.entry.april:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">May</h3></div>').appendTo('.eventListPage article.entry.may:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">June</h3></div>').appendTo('.eventListPage article.entry.june:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">July</h3></div>').appendTo('.eventListPage article.entry.july:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">August</h3></div>').appendTo('.eventListPage article.entry.august:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">September</h3></div>').appendTo('.eventListPage article.entry.september:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">October</h3></div>').appendTo('.eventListPage article.entry.october:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">November</h3></div>').appendTo('.eventListPage article.entry.november:first .monthHeader-Container');
x$('<div class="monthHeader"><h3 class="monthHeader-name">December</h3></div>').appendTo('.eventListPage article.entry.december:first .monthHeader-Container');
});
</script>

Next we are going to add the CSS, again feel free to edit the colours etc to fit your site. This code goes in your Design Studio Custom CSS

/** Events Monthly Headers **/

/*If you are not using a background image you can instead of having a little tab make it go full width by removing from the second line the float:left at the end */
.monthHeader-Container{ width:100%;float:left;clear:both }
.monthHeader{ margin-bottom:15px; border-bottom:dashed 1px lightgray; width:100%; clear:both; float:left;}
.monthHeader-name{  font-weight:bold;display:block;padding:10px 28px; color:white;background-color:royalblue;float:left; border-radius:6px 6px 0px 0px }

/* Optional CSS to have a background image across the header, you can replace the image url link with one of your own */

.eventListPage .entry .monthHeader{
background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/8667566?profile=original-mesh-10-blk.png");
background-position: center center;
background-size: initial;
background-repeat: repeat;
}

And here is how you can target a specific month, I chose December to demo it as it's the one most likely you would want to change a little.

Notice in the code the use of the class name to target the month (  .entry.december ) Again you replace the image for what you want to use.

/** This is to demo changing items in month, for instance Christmas Time **/
.eventListPage .entry.december .monthHeader{
background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/963872889?profile=original");
background-position: center center;
background-size: cover!important;
background-repeat:no-repeat!important;
}
/* Change tab to red */
.eventListPage .entry.december .monthHeader-name{ background-color:darkred }

Enjoy

John :-)

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 –

Replies

  • Wow, is that sharp.  Do you dream a/b this stuff at night?  *lol*  Very, very nice John.  Thank you so much for sharing!

    • Thanks Kos :-) I do spend many many hours thinking about how something could be done different especially in my job as I drive about 300 to 500 miles a day and so a lot of thinking gets done then. I just sometimes work on a project then as doing so I may come accross something that I see needs to be done on something else that needs to be fixed to complete the current project. My project book is very full *lol*, don't quite know when it will all get done, but hey it keeps me busy and the mind ticking while learning new things. :-)

      My events grid view is coming up next!

This reply was deleted.
 

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

Steve Ewing replied to Steve Ewing's discussion
CSS "transparent" background is now grey
"Oops, I didn't post the whole script. here is the rest:.groupList-group.matrix-itemFluid…"
6 hours ago
Steve Ewing posted a discussion
A while back I believe Bizz helped me out with some custom CSS code. Here it is:/*Fixes Groups size…
6 hours ago
Paul Corona replied to Paul Corona's discussion
Trial NING 3 Site Today
"update: two days in....summary: what a royal pain in the A** to get formating correct.  NING 3…"
19 hours ago
Paul Corona posted a discussion
First thought about the "migration"- horrible.  Amount of info that is not migrated is…
yesterday
Annabel Gregory replied to Annabel Gregory's discussion
Reset Password fails
"Yes, our problem continues, similarly! Lack of email notification when somebody posts something or…"
Wednesday
Marly replied to Annabel Gregory's discussion
Reset Password fails
"Just nercoing this because I've had this issue since July. My members don't receive any emails or…"
Wednesday
Aurora and Alex - Rosas † Negras are now friends
NC for Hire
Nov 29
⚡JFarrow⌁ shared their discussion on Facebook
Nov 29
Steve C replied to Bizz's discussion
Seeing as we have Albums for photos might as well change the look a bit
" That is CLEAN! Great job."
Nov 28
Alex - Rosas † Negras replied to Renato Gelforte's discussion
Date of articles
"The ning Team can't do your job, it's up to you to add the categories and enable the view counter…"
Nov 26
Renato Gelforte replied to Renato Gelforte's discussion
Date of articles
"Thanks a Lot Alex, but I repeat: the Ning support has already answer:The date of the articles is…"
Nov 23
Alex - Rosas † Negras replied to Bizz's discussion
Seeing as we have Albums for photos might as well change the look a bit
"it's strange in mine I don't see differences and they are centered, looking at your member on the…"
Nov 17
More…

Meanwhile, you can check our social media channels