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

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…"
7 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…
7 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…"
21 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