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

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