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

So here is my second layout for the events list page. I just wanted to make more use of the white space surrounding the events past and also if a long title has been added it can span across the top rather than squish up with all the other info. I have also allowed the overflow to show on the narrow column lists so they to can fill the space.

Note: the title only moves above the main section as the one in the narrow columns are fine as they are.

I also changed the spans of the content and start date, day of the week to 100% width so they collapse nicely. Look great on mobiles too.

Well here is the link to the page if you want to take a look: http://bizzssite.ning.com/events2

And here is a screen shot

Mobile View

And here is the code I used to move the title, date and day of the week

First a tiny bit of custom code to move the title, this goes in your SITE & PAGES CUSTOM CODE END OF PAGE BOX

<script>
// Move the events title above the main event
x$(document).ready(function(){
x$(".eventPage-details .entry-title").each(function() {
  x$(this).closest(".media-frame.eventPage-details").prepend(this);
});
});
</script>

Next we need to add a little css. THIS GOES IN YOUR DESIGN STUDIO CUSTOM CSS SECTION

/** 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: 4px;
 }

/* Allow the content in the narrow column to fill the space to the left */
  .section-eventBundle .media-frame > .media-body {
    overflow: visible;
}

/* Change the spans of the main content and the date day column to 100% width */
.eventListPage .span3, .eventListPage .span13{ width:100% }

/*Move the start date to the left and make it an inline block */
  .eventListPage .eventListPage-startDate {
    text-align: left;display:inline-block;
}
/* Do the same for the day of the week */
.eventListPage .eventListPage-startDayOfWeek {
    text-align: left;display:inline-block;
}

/** Margin between each of the posts **/
  .eventListPage .entry{ margin-bottom:30px }

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

  • Oh please, just hire this man.  lol   (thanks John!)

    • lol Thanks Kos you are a sweetheart :-)

      Just added a small image to show the mobile view which I forgot to add in the post earlier.

  • You rock! (and you know it)

  • Mike Collins posed this question whether the events could be placed side by side in a two column format, so took a look at this and made my events2 page into a two column events list page to test it out, it still needs some extra work but so far it's working out great. It is only in this format above 969px then returns to a single column page.

    To see it you may need to refresh the page if you visited it before.

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