|
tamara smith
|
October 17, 2014 at 4:40 pm
I have an class series that is offered every week for 5 weeks. In order to have that event show up only on 1 day of the week in my calendar I essentially had to create 5 of that event (or rather duplicate it 5 times). It now displays nicely on the calendar. As shown here: http://events.flipsideashland.com/
The places where I’m having trouble with the display is in my upcoming events widget & on the class description page. I now have a long list running down with every date that one series is covering.
See here: http://events.flipsideashland.com/events/little-rollers/
There are a few problems with that:
1- Participants are confused. They’re not sure if they are registering for 1 of the days or all of them.
2- You have to scroll down quite a ways to even see the class description.
3.- That long list of dates under the class name is taking up some seriously valuable real estate on my website! This will be worse when I offer my 8-10 week courses!
So – My question is – Is there a way to not have every single date displayed in that long column? Maybe that’s a stylizing question?
Can you think of anything else I might do?
|
|
tamara smith
|
October 17, 2014 at 5:01 pm
Actually- I think I found a solution for my side bar. Just not going to use the upcoming events widget and make a menu instead. Still not sure how to deal with the long column of dates in my event description though…
http://events.flipsideashland.com/events/little-rollers/
|
|
Josh
|
October 17, 2014 at 5:46 pm
Hi Tamara,
Here are two different ideas you can try:
1) Use JavaScript to hide all the dates except the first one and add a button to show more dates. This plugin basically does this:
https://github.com/joshfeck/ee4-toggle-dates
2) Float the dates to the left so they appear in a grid. Example CSS follows that you can add to your custom stylesheet:
.ee-event-datetimes-li {
float: left;
}
.ee-event-datetimes-ul:before,
.ee-event-datetimes-ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.ee-event-datetimes-ul:after {
clear: both;
}
|
