Events Individual Listings
COMPONENT SELECTOR GUIDE
Event Page Content (Title, Metadata, Excerpt, etc.)
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Content Containers | ||
| body[class*="collection-type-events"].view-item | This selector will select the body elements for all event item pages. |
|
| .events-item | The contianer of the event page items. |
|
| The Back Link | ||
| .eventitem-backlink, .eventitem-backlink:before | The "Back" link element and it's corresponding ":before" pseudo-element which adds the back arrow to the left of the text. |
|
| Left Column | ||
| .eventitem | The flex container for the event item elements. |
|
| .eventitem-column-meta | The container for the left column elements, including the title, date, time, and meta data for exporting an event. |
|
| .eventitem-title | The event title text. |
|
| .event-meta-date-time-container | The container for the start and end date/time. |
|
| .event-date | The event date fields. |
|
| .event-time-localized | The event time fields. |
|
| .event-datetime-divider, .event-datetime-divider:before | The hyphen divider between the start and end dates and it's corresponding psuedo-element that adds the divider. |
|
| .event-date:first-of-type | The event start date field. |
|
| .eventitem-meta-time:first-of-type .event-time-localized | The event start time field. |
|
| .event-date:last-of-type | The event end date field. |
|
| .eventitem-meta-time:last-of-type .event-time-localized | The event end time field. |
|
| .event-meta-addtocalendar-container | The container for the meta data. |
|
| .eventitem-meta-export-google | The Google export link. |
|
| .eventitem-meta-export-ical | The ICS export link. |
|
| .eventitem-meta-export-divider, .eventitem-meta-export-divider:before | The hyphen divider between the export links and its corresponding psuedo-element that adds the divider. |
|
| Right Column | ||
| .eventitem-column-content | The container for the right column elements. |
|
| .eventitem-column-content p | The event excerpt text. |
|
HTML Structure Explanation
The event elements container and the descendant elements.
The event elements container and the descendant elements.
Unique Event Page
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| #item-6521c515f7427c77fef7d9df | Targets a unique event page using its ID attribute. The selector in the left column is just the general form of the collection ID, but the characters that come after "#item-" will be different for each event item. |
|
HTML Structure Explanation
The <body> HTML element with an id attribute that corresponds to the specific event item page.
The <body> HTML element with an id attribute that corresponds to the specific event item page.
Pagination
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| General Selectors | ||
| .item-pagination[data-collection-type*="events"] | The item pagination container on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-link | The item pagination link containers on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .events-item-pagination-date | The item pagination date on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-title | The item pagination title on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-icon | The container for the SVG vector images on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-icon svg | The SVG vector imagery in each of the item pagination link containers on event collection pages. |
|
| "Previous" Link Elements | ||
| .item-pagination[data-collection-type*="events"] .item-pagination-link--prev | The "Previous" item pagination link container on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-link--prev .item-pagination-icon | The container for the "Previous" SVG vector images on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-link--prev .item-pagination-icon svg | The SVG vector imagery in the "Previous" item pagination link containers on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-link--prev .events-item-pagination-date | The item pagination title for the "Previous" link on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-link--prev .item-pagination-title | The item pagination title for the "Previous" link on event collection pages. |
|
| "Next" Link Elements | ||
| .item-pagination[data-collection-type*="events"] .item-pagination-link--next | The "Next" item pagination link container on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-link--next .item-pagination-icon | The container for the "Next" SVG vector images on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-link--next .item-pagination-icon svg | The SVG vector imagery in the "Next" item pagination link containers on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-link--next .events-item-pagination-date | The item pagination title for the "Next" link on event collection pages. |
|
| .item-pagination[data-collection-type*="events"] .item-pagination-link--next .item-pagination-title | The item pagination title for the "Next" link on event collection pages. |
|
HTML Structure Explanation
The item pagination container on event pages and the relevant descendant elements. Every collection page will have a similar element to the pictured one below, but the “data-collection-type” attribute will reflect which collection type and layout is being used.
The item pagination container on event pages and the relevant descendant elements. Every collection page will have a similar element to the pictured one below, but the “data-collection-type” attribute will reflect which collection type and layout is being used.