Customising the appearance of your Vepple embed with CSS – Vepple

The Vepple tour embed (<vepple-tour>) is designed to look right out of the box, but you can restyle parts of it to match your institution's brand using plain CSS on the page that hosts the embed. No changes are needed inside Vepple itself.

By default the embed keeps its standard Vepple appearance. Nothing on your page affects it until you deliberately opt in using the hooks described below, so existing embeds are unaffected.

How it works

The embed renders inside a Shadow DOM. This keeps your site's stylesheet and the embed's styles fully separate, so neither can accidentally break the other. To restyle the embed you use two standard CSS mechanisms that are designed to cross that boundary:

CSS custom properties (variables) for colours. Set these on the vepple-tour element and they flow into the embed.
::part() selectors for everything else (fonts, border radius, spacing) on the elements the embed exposes.

Fonts are simpler still: the embed inherits font-family from your page automatically, so it will already be using your site's font.

Quick start: recolour the end screen button

The end screen is the card shown when a visitor finishes the tour, with a heading, a description and a call to action button. To recolour the button, add this to your page's stylesheet:

vepple-tour {
  --v-card-btn-bg: #003366;            /* button background */
  --v-card-btn-color: #ffffff;         /* button text */
  --v-card-btn-border-color: #003366;  /* button border */
  --v-card-btn-hover-bg: #0055a5;      /* background on hover and keyboard focus */
  --v-card-btn-hover-color: #ffffff;   /* text on hover and keyboard focus */
}

Set only the properties you want to change. Anything you leave out keeps the Vepple default. The hover properties also style the keyboard focus state, so please check both combinations have good colour contrast for accessibility.

Colour variables reference

All of these are set the same way, inside a vepple-tour { ... } rule on your page.

End screen (card)

Variable	Controls
`--v-card-btn-bg`	CTA button background
`--v-card-btn-color`	CTA button text colour
`--v-card-btn-border-color`	CTA button border colour
`--v-card-btn-hover-bg`	CTA button background on hover/focus
`--v-card-btn-hover-color`	CTA button text colour on hover/focus

Tour interface (navigation buttons, drawer)

Variable	Controls
`--v-tour-btn-color`	Tour UI button text/icon colour
`--v-tour-btn-bg-color`	Tour UI button background
`--v-tour-btn-hover-color`	Tour UI button text/icon colour on hover
`--v-tour-btn-bg-hover-color`	Tour UI button background on hover
`--v-drawer-icon-btn-color`	Drawer icon button colour
`--v-drawer-icon-btn-bg-color`	Drawer icon button background
`--v-drawer-icon-btn-hover-color`	Drawer icon button colour on hover
`--v-drawer-icon-btn-bg-hover-color`	Drawer icon button background on hover
`--v-drawer-bg-color`	Drawer panel background
`--v-tour-color`	General tour UI text colour
`--v-tour-bg-color`	General tour UI background colour
`--v-accessible-background`	Base overlay background used across the tour UI

Hotspots (points of interest inside the panorama)

Variable	Controls
`--v-contentspot-icon-bg`	Content hotspot icon background
`--v-contentspot-icon-color`	Content hotspot icon colour
`--v-contentspot-popup-bg`	Content hotspot popup background
`--v-contentspot-popup-color`	Content hotspot popup text colour
`--v-infospot-popup-bg`	Info hotspot popup background
`--v-infospot-popup-color`	Info hotspot popup text colour

Beyond colours: ::part()

For changes that are not colours, such as border radius, weight or letter spacing, the embed exposes named parts you can target with the standard ::part() selector:

vepple-tour::part(v-card-button) {
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
}

vepple-tour::part(v-card-heading) {
  font-family: 'Your Brand Font', sans-serif;
}

Available parts

End screen: v-card-container (full size overlay), v-card (the card), v-card-heading, v-card-description, v-card-button (the CTA).

Content hotspots: v-content-spot-icon, v-content-spot-icon-glyph, v-content-spot-popup, v-content-spot-popup-title, v-content-spot-popup-arrow.

Info hotspots: v-info-spot-icon, v-info-spot-icon-glyph, v-info-spot-popup, v-info-spot-popup-title, v-info-spot-popup-desc, v-info-spot-popup-cta, v-info-spot-popup-image.

Content modal: v-content-modal, v-content-modal-close.

Things to know about ::part()

You can style states too, for example vepple-tour::part(v-card-button):hover { ... }.
You cannot select inside a part. vepple-tour::part(v-card) h2 will not work; use the specific part (v-card-heading) instead.
For properties the embed themes internally (backgrounds and borders on buttons), use the colour variables above rather than ::part(), as the internal styles take precedence.

Fonts

The embed picks up font-family from your page automatically. If the embed sits inside an element with your brand font applied, it will use it. You can also set it explicitly:

vepple-tour {
  font-family: 'Your Brand Font', sans-serif;
}

A complete example

/* University brand: navy buttons, gold hover, square corners */
vepple-tour {
  --v-card-btn-bg: #001f4d;
  --v-card-btn-color: #ffffff;
  --v-card-btn-hover-bg: #c8a545;
  --v-card-btn-hover-color: #001f4d;
  --v-tour-btn-bg-color: rgba(0, 31, 77, 0.85);
  --v-tour-btn-color: #ffffff;
  --v-tour-btn-bg-hover-color: #c8a545;
  --v-tour-btn-hover-color: #001f4d;
}

vepple-tour::part(v-card-button) {
  border-radius: 0;
}

Accessibility

When choosing your colours, please keep text and background contrast at WCAG AA level or better (4.5:1 for normal text), and check the hover/focus combination as well as the resting state. The embed's defaults are chosen to meet this, and your overrides should too.