Styling the Embedded Operator Widget

Part Theming

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

There are multiple main styling blocks:

• The widget's filtering carousel, these are the parts you can access:
  • filter__btn-tag: the rounded, selectable filter buttons in the filter carousel
  • filter__btn-tag--state-selected: the currently selected filter button in the filter carousel
  • filter__btn-tag__tag-text: the text inside the filter button
  • filter__btn-tag__tag-text--state-selected: the text inside the selected filter button
  • 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 Card, these are the selectable parts:
  • card__surface: container which holds the Card's contents
  • card__hero: container which holds the card's hero
  • card__image-container: container which holds the card's image or placeholder div if no image is found
  • card__image: for the card's image or placeholder svg if no image is found
  • card__title: text for the Card's title
  • card__description: text for the Card's description
  • card__btn-details: button on bottom left of the Card
  • card__btn-book: button on bottom right of the Card if a custom booking link is provided by the Operator
• The widget's details side pane, which has two selectable parts:
  • details__main: container which holds all Operator information, underneath the image carousel
  • details__btn-contact: the three contact buttons for the Operator – website, phone and email
  • details__btn-see-more: the see more button (shown if an operator-details-link template is provided to the widget)
  • details__address-title: the word "Address"
  • details__address-link: the address link
  • details__short-description: the short description text
  • details__description: the description text
  • details__operating-hours-title: the operating hours title
  • details__operating-hours-day: the operating hours days text
  • details__operating-hours-hours: the operating hours hours text
• When the widget's list-display-mode is grid, these are some parts you can access:
  • widget__btn-load-more: button to load more operators
• When the widget's list-display-mode is grid and the widget is on mobile it is displayed as a carousel, you can access all the parts of the carousel in this case:
  • When the widget's list-display-mode is carousel these are the parts you can access:
  • widget__btn-load-more: button to load more operators
  • widget__title: text for the widget's title
  • carousel__gradient: the gradient that appears on the right side of the carousel
  • carousel__container: the container of the carousel component
  • widget__btn-prev: the left arrow button to scroll left through the operators
  • widget__btn-next: the right arrow button to scroll right through the operators
  • widget__controls: the container for the left and right arrow buttons

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

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

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-operators-widget, so the CSS syntax will be as follows:

whereabouts-operators-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.

<whereabouts-operators-widget
  ...
  font-family-override="Comic Sans MS"
  ...
></whereabouts-operators-widget>