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
  • filter__view-title : the View label
  • filter__view-segment-group : the background of the Grid|Map switch
  • filter__view-segment-item : the individual items in the switch
  • filter__view-segment-item__item-text : the text in that switch
  • filter__view-segment-group__indicator : the active item in the switch
• 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>