Event List Page

Description

Add a collection of events to your site using Events Pages. This is a great way to promote workshops, gatherings, special events, and more.

The List Page is where all your events are listed on one page. Each one leads to an individual events page.

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.eventlist-column-thumbnail {
}

</style>

Custom CSS

7.0 / 7.1

*** the following code uses the same syntax as the Individual Event Pages. To isolate the Events List Page, use the #collection-id

To target the event thumbnail

/* event thumbnail */
.eventlist-column-thumbnail {
}

To target the event title

/* event title */
.evenlist-title .eventlist-title-link {
}

To target the event date

/* event date */
.eventlist-datetag {
}

/* event date – month */
.eventlist-datetag-startdate--month {
}

/* event date – day */
.eventlist-datetag-startdate--day {
}

To target the event location

/* event location */
.eventlist-meta-address {
}

To target the event map link

/* event map link */
.eventlist-meta-address-maplink {
}

To target the event excerpt

/* event excerpt */
.eventlist-excerpt {
}

To target the share links

/* event share – iCal */
.eventlist-meta-export-ical {
}

/* event share – Google */
.eventlist-meta-export-google {
}

Specific to Event List Page

To target the event time — 7.0

/* event time */
.event-time-12hr {
}

/* event time – Start */
.event-time-12hr-start {
}

/* event time – End */
.event-time-12hr-end {
}

To target the event time — 7.1

/* event time */
.event-time-localized {
}

/* event time – Start */
.event-time-localized-start {
}

/* event time – End */
.event-time-localized-end {
}