Styling the Embedded Events Widget

Part Theming

Specific parts of the Events Widget can have their default styles overridden through the ::part pseudo-element.

There are four main styling blocks:

• The widget's month and date selectors, these are the parts you can access:
  
  • date__month: the text for the month/year OR the selected date range
  • date__btn-year: the year selector button (desktop only)
  • date__btn-month: the month selector button (desktop only)
  • date__btn-month-mobile: the month selector button (mobile only)
  • date__txt-month-mobile-month: the text for the month (mobile only)
  • date__txt-month-mobile-count: the text for the event count (mobile only)
  • date__container-month-year-mobile: the container for the month and year selector (mobile only)
  • date__btn-select-dates: the select dates / clear dates button
  • calendar__container: the container for the calendar pop-up
  • calendar__btn-clear-dates: the clear dates link button
  • calendar__btn-today: the jump to today button
  • calendar__btn-month-year-selector: the button to select months / years
  • calendar__range-text: the text inside calendar__btn-month-year-selector
  • calendar__btn-prev: the previous month/year button
  • calendar__btn-next: the next month/year button
  • calendar__table-header-weekday-item: the header cell for the weekday name
  • calendar__btn-month: the button to select a month (when in month view)
  • calendar__btn-year: the button to select a year (when in year view)
  • calendar__btn-day: the button for a given day
  • calendar__hint: if the day has a hint, this is the tag box that appears
  • calendar__hint__tag-text: the text that displays in the above hint
  • calendar__legend-box: if a legend is displayed, this is the colored box for one of the items
  • calendar__legend-text: the text that displays beside the legend box
  • calendar__btn-save: the button to save the dates
• The widget's tag filtering carousel, these are the parts you can access:
  
  • filter__btn-tag: the selectable filter buttons in the filter carousel
  • filter__btn-tag-selected: the selectable filter buttons in the filter carousel when selected
  • filter__btn-tag__tag-text: the text inside the filter buttons
  • filter__btn-tag-selected__tag-text: the text inside the filter buttons when selected
  • filter__btn-prev: the left arrow button to scroll left through the filter carousel
  • filter__btn-next: the right arrow button to scroll right through the carousel
  • filter__gradient-left: the gradient beside the left arrow
  • filter__gradient-right: the gradient beside the right arrow
• The widget's events (featured and recurring), these are the selectable parts:
  
  • events__container: container for the featured and recurring events sections
  • events__container-featured: container for the featured events
  • events__container-recurring: container for the recurring events
  • events__heading: the heading (Featured events / Recurring events)
  • events__txt-page-of-pages: the "# of #" text beside the Featured events title
  • events__btn-prev: the left arrow button for the previous featured events page
  • events__btn-next: the right arrow button for the previous featured events page
  • events__featured-error: the error container
  • events__featured-no-data: the no data container for featured events
  • events__recurring-no-data: the no data container for recurring events
  • card__skeleton: the placeholder skeleton card
  • card__surface: container which holds the Card's contents
  • card__body: container for the card body
  • card___tag_and_title: container for the card tag (date) and title
  • card__tag: the event date tag (also used as the recurring events date tag)
  • card__tag__tag-text: the text inside the card tag
  • card__title: text for the event title
  • card__venue: text for the event venue
  • card__hero: container which holds the hero image
  • featured__fader-left: the featured events left fader (visible on small screens only)
  • featured__fader-right: the featured events right fader (visible on small screens only)
  • recurring__container-scroller: the recurring events scroll container
  • recurring__container-date-group: the recurring events date group container
  • recurring__container-event: the recurring event container
  • recurring__title: text for the event title
  • recurring__venue: text for the event venue
  • recurring__pattern: text for the event recurrence pattern
  • recurring__btn-details: the right arrow to open the event details
  • recurring__container-scroll-for-more: the scroll for more container
• Settings specific to carousel mode
  
  • carousel__container: container for swiper
  • carousel__container-no-events: skeleton container when there are no events
  • carousel__gradient: the faded gradient at the right of the carousel (visible until you reach the end)
  • widget__controls: the container for the prev/next and more events buttons
  • widget__btn-prev: the previous button (left arrow)
  • widget__btn-next: the next button (right arrow)
  • widget__btn-more-events: the more events button (applies only when a more events link is provided)
  • carousel__no-events-text: the text container when there are no events
• The widget's details side pane, which has two selectable parts:
  • details__main: container which holds all Operator information, underneath the image carousel
  • details__info-container: container for the top info (event name, organizer, buttons, and description)
  • details__info-event-name-container: container for the event name and the details button (if enabled)
  • details__title: text for the event title
  • details__btn-see-more: the button for the see more button (if linking to a separate page with details)
  • details__info-organizer-container: the container for the event oraniser
  • details__organizer-title: The event organizer title
  • details__organizer-name: The event organizer name
  • details__info-contact-info-container: the container for the event organizer buttons (website/phone/email)
  • details__btn-contact: the three contact buttons for the event organizer – website, phone and email
  • details__description: text for the event description
  • details__map-container: the container for the map title and map image
  • details__map-title: the title above the map (the word Locations)
  • details__locations-container: the container for all of the event locations
  • details__location-container: the container for an individual event location
  • details__location-container-left: the left side of an event location
  • details__location-container-left-number: the number that shows up in the left side of the container
  • details__location-container-right: the right side of an event location
  • details__location-container-right-content: the container for the event name and address
  • details__location-name: the location name
  • details__location-address-link: the location address <a> tag
  • details__location-address-text: the location address text
  • details__location-container-right-icons: the container for the icons
  • details__icon-location-contact: the location contact icons (website/phone/email)
  • details__price-container: the container for the price info
  • details__price-title: text for the price title
  • details__price: text for the event price
  • details__schedule-title: text for the event schedule title
  • details__schedule-subtitle: text for the event schedule subtitle
  • details__schedule-pattern-summary: container for the event repeat pattern summary
  • details__schedule-date: text for the event schedule date
  • details__schedule-time: text for the event schedule time
  • details__schedule-pattern: text for the event repeat pattern
  • details__schedule-note: text for the event schedule note
  • details__contact-info-container: container for the contact info at the bottom
  • details__contact-info-title: text for the contact title
  • details__contact-info-link: link for the contact info

You may define your styles containing these overrides in any manner, but ensure they are present on your embedding website.

Our embedding widget is called the whereabouts-events-widget, so the CSS syntax will be as follows:

<code class="language-css">whereabouts-events-widget::part(-part-name-here-) {
    background-color: red;
    ...
}

Global Theming

You may override the default fonts in the widget, by passing in a font-family-override prop to the Operators widget. If you are using an external font, ensure that it is properly loaded on your embedding website.

<code class="language-html"><whereabouts-events-widget
  ...
  font-family-override="Comic Sans MS"
  ...
></whereabouts-events-widget>

NOTE: If you're using the carousel mode, you can also customize the carousel scrollbar by using the following CSS variables:

<code class="language-css">whereabouts-events-widget {
  --swiper-scrollbar-display: none;
  --swiper-scrollbar-border-radius: 0px;
  --swiper-scrollbar-bg-color: blue;
  --swiper-scrollbar-drag-bg-color: red;
  --swiper-scrollbar-width: 100%;
  --swiper-scrollbar-max-width: none;
  --swiper-scrollbar-right-position: unset;
  --swiper-scrollbar-left-position: 0;
  --swiper-scrollbar-height: 12px;
  --swiper-scrollbar-drag-height: 6px;
  --swiper-scrollbar-padding: 3px;
  --swiper-scrollbar-bottom-position: 12px;
}