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

Forum

Ok the other day I posted about adding a monthly header for each of the months and removed any other styling so you could see it in a default style events page listing. I have now created a Demo2 which includes all my final styling for the events page. Below you will see a few images to demo the list page, detail page and them both in mobile view. I added the images as you can then see all the information being shown.

All the code I will add once I tidy it up for adding here, I will also try and condense the code for adding the Monthly tabs.

Demo Page Here ( You may need to refresh your browser if you do not see it )  http://bizzssite.ning.com/eventsdemo2

What I Did

  1. Added Monthly Tabs to seperate the months in the list by adding headers and some tabs
  2. Added a header to display above the upcoming events list
  3. Moved the title above the event and also centered the event dates above the title
  4. Added some styling to each events with some box shadow and on hover it goes darker
  5. Add some margins around the events details so they are not so bunched up and easier to read
  6. Decreased the font for the description a little which helps it stand out a little from all the other text
  7. Added a border and padding to the 'Going and Google Calendar section
  8. Added a title above the attending choice and also the Google Calendar
  9. Changed the font size and added the same style to the narrow column modules
  10. Changed the way the list page looks in mobile view so the information is not all squished up to the right

Detail Page

  1. Again a header was needed above the event so added one which also has the events title in it
  2. Added some spacing around the event details
  3. Removed the attendees images as not needed, they just take up to much space and the member can click on the amounts of going, might go and invited to see the full list anyway.
  4. Again the titles are there for the attend options and calendar, also added some spacing and increased the font for the counts.
  5. For the attend options whole section removed the max-width: 255px for it's size and set it to 100% to aid the responsive side of the box.
  6. Added a title above the details section and a little more padding with some light gray borders top and bottom
  7. Adjusted the overflow to visible so that when it's in mobile view it's not all squashed up and lays out nicely.

Demo Images

The images below show the events page as a full width page, on my site I have added a side column so you can see how that looks to.

List page

List Page Mobile View

Detail Page

Detail Page Mobile View

As I said I will post all the code for this in this post and should be before the weekend.

John :-)

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • NC for Hire

    absolutely love it!

    • Thanks JF :-) Added some more to it now so users can add predefined messages. I made the code as a seperate thing so can be added with or without my other styling. Condensing the code now so wil hopefully have both lot's up in the next day or two.

      John :-)

This reply was deleted.

Search the Creators Network

Latest Activity

Brendon R Culliton replied to Yana Ning Support's discussion Product Plan Update
"So I have an idea as to why I suddenly have a bunch of problems on my website. I believe that with…"
1 hour ago
Cindy Dean Mccoy replied to Yana Ning Support's discussion Product Plan Update
"We had a scheduled chat session tonight.  But it is not working for us.  Hope they can get this fix…"
1 hour ago
Brandyn Shepherd replied to Kyryl_Ning_Support's discussion Chat Feature Update on Ning 3.0 is ready!
"Chat still is not working. Just says its connecting. Left it open for hours and never connected."
1 hour ago
Brandyn Shepherd replied to Yana Ning Support's discussion Product Plan Update
"Chat still not working. Can't imagine what else might not be working after reading some of the comm…"
1 hour ago
Manuel Adame Jimenez replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Que es Kyryl Este Escudo Rojo Que la venta al principio ☆ ♡ ♤"
2 hours ago
R. Holley replied to Kyryl_Ning_Support's discussion Our Efforts - Your Feedback
"I've been trying forever to get my site to work on a mobile device just like it does on a desktop.…"
5 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Brendan,
Have you sent in a ticket?  Your issue seems to be different than ours"
7 hours ago
Brendon R Culliton replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Can someone confirm if there is something seriously wrong going on in the back end? For some reason…"
7 hours ago
Brendon R Culliton replied to Yana Ning Support's discussion Product Plan Update
"Can someone confirm if there is something seriously wrong going on in the back end? For some reason…"
7 hours ago
R. Holley replied to Bousal's discussion MOBILE
"This didn't work for me. I'm trying to let anyone use a mobile phone to see our site just as they c…"
8 hours ago
Naveen Jain replied to Naveen Jain's discussion Anyone able to use https for their network?
"Keeping this thread alive as https is very important for us. Is there a timeline or should I start…"
8 hours ago
Kos replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Just insane"
9 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Our Efforts - Your Feedback
"My feedback is pretty basic.  You expect e to pay for my service and that is very fair.  In return…"
9 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"My ticket went in 17 hours ago "
9 hours ago
Manuel Adame Jimenez replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"If the crazy horse talks ... connecting ...
☆♡♤"
9 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"YES!  First thing I do is send emails and a FB chat to NING.  If they don't know there is a problem…"
9 hours ago
Kos replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"I think many just complain here and don't send emails........which is a huge mistake.  The more ema…"
9 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"LOL, well I am awfully glad you reported it Kos, can we all just combine our tickets and all get ba…"
9 hours ago
Kos replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Low and behold, look what I just got:
I'm really sorry to hear about your issues with the chat feat…"
9 hours ago
Manuel Adame Jimenez replied to Kyryl_Ning_Support's discussion Chat Feature Update on Ning 3.0 is ready!
"I'll wait ... ☆♡♤"
9 hours ago
More…