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:
  • 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
• The widget's tag filtering carousel:
  • filter__btn-tag, filter__btn-tag-selected, filter__btn-prev, filter__btn-next
  • filter__gradient-left, filter__gradient-right
• The widget's events (featured and recurring):
  • events__container, events__container-featured, events__container-recurring
  • events__heading, events__btn-prev, events__btn-next
  • events__featured-error, events__featured-no-data, events__recurring-no-data
  • card__skeleton, card__surface, card__body, card___tag_and_title, card__tag
  • card__title, card__venue, card__hero
  • featured__fader-left, featured__fader-right
  • recurring__container-scroller, recurring__container-date-group, recurring__container-event
  • recurring__title, recurring__venue, recurring__pattern, recurring__btn-details
  • recurring__container-scroll-for-more
• Settings specific to carousel mode:
  • carousel__container, carousel__container-no-events, carousel__gradient
  • widget__controls, widget__btn-prev, widget__btn-next, widget__btn-more-events
  • carousel__no-events-text

The widget's details side pane:

• details__main, details__title, details__btn-see-more
• details__venue, details__venue-link-address, details__btn-contact, details__btn-contact-other-location
• details__description, details__price-title, details__price
• details__schedule-title, details__schedule-subtitle, details__schedule-pattern-summary
• details__schedule-date, details__schedule-time, details__schedule-pattern, details__schedule-note
• details__title-other-locations, details__contact-title

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;
}