Skip to main content

Customize the style of default components

In order to override the style of the default GeoGirafe Web-Components, the ::part CSS-Selector can be used.

The following list shows the which part of each component can be accessed and be customized with CSS:

Theme-Selector​

  • themes-button: the button that opens the themes-list
  • themes-content: the popup that contains the list of themes
  • theme-card: the card containing the theme icon and the theme name
  • theme-icon: the theme icon
  • theme-name: the theme name

Example​

girafe-theme-select::part(theme-card) {
  border: solid 3px blue;
  width: 12rem;
}
girafe-theme-select::part(theme-icon) {
  max-height: unset;
  max-width: unset;
}
girafe-theme-select::part(theme-name) {
  width: 15rem;
}