Custom CSS

You can override the default styling of the VoordeMensen order pages with your own CSS, so checkout matches the look and feel of your site. This is aimed at web builders and developers who maintain the customer's website.

:::note Which frontend version this applies to

There are two versions of our frontend, and this documentation applies to the new (2025) version only. The selectors below exist on that version.

To use custom CSS, make sure the new frontend is enabled: in the dashboard go to Beheer → Webshop and switch on "Front-end versie 2025".

:::

Where to set your CSS

Custom CSS is configured in the dashboard, under Vormgeving → CSS. Anything you put here is loaded on top of our default stylesheet, so your rules override ours.

There are two ways to add styling, and you can combine them:

1. Import an external stylesheet — keep your CSS in a file you host yourself and pull it in with an @import. Handy when you want to version and maintain the styles outside the dashboard.
2. Write CSS directly — paste rules straight into the field for quick, self-contained overrides.

/* 1. Import a stylesheet you host yourself */
@import url("https://yoursite.example/vdm-overrides.css?v=1");

/* 2. ...and/or add rules directly */
.vdm-hero__content {
  font-family: "Your Brand Font", sans-serif;
}

Use a cache-busting query parameter (e.g. ?v=1) on the @import URL and bump it whenever you publish changes, so visitors pick up the new version.

How the order pages are structured

The order flow works in three levels, plus a checkout. You can preview each one in our demo environment — replace demo in the URL with your own client name.

Level	Example URL	What it is
1. Events overview	tickets.voordemensen.nl/demo/m	Grid of all events. Not used by every organisation — most link to specific events from their own site.
2. Main event	tickets.voordemensen.nl/demo/m/193	An umbrella event with one or more performances. Auto-forwards to level 3 if there is only one sub-event.
2b. Calendar (alt. view)	tickets.voordemensen.nl/demo/cal/193	Alternative calendar view of the performances.
3. Sub-event	tickets.voordemensen.nl/demo/m/o/1489	The specific performance (its own date, time, location). Ticket selection — or a clickable seat map for seated events.
Checkout	tickets.voordemensen.nl/demo/m/f?murmur=…	Customer details and payment. Uses a session ID in the URL.

:::note Brand colour is applied inline

The header banner picks up your organisation's brand colour through an inline style attribute (e.g. background-color: #ef5c2f). Inline styles beat stylesheet rules, so to override a colour like this you need !important.

:::

Selector reference

Each section below lists the classes you can target on that page, what they style, and an example.

Events overview (level 1)

:::caution Legacy view

The events overview still uses the older class names (not the vdm-* namespace), even with the 2025 frontend enabled. These selectors are stable but may change when this view is migrated.

:::

Selector	Element	What it styles
.vdmHeader	div.card-image	The image/banner area of each event card in the grid

/* Round the corners of the event card images */
.vdmHeader {
  border-radius: 12px;
  overflow: hidden;
}

Main event (level 2)

Selector	Element	What it styles
.vdm-hero	div	The header banner wrapper
.vdm-hero__image-wrap	div	Image wrapper (carries the brand-colour background)
.vdm-hero__image	img	The header image itself
.vdm-hero__content	div	Title/text overlay on the banner
.performances-section	div	The block listing the performances/sub-events
.date-group	div	A group of performances under a single date

/* Override the brand colour on the banner (needs !important — inline style) */
.vdm-hero__content,
.vdm-hero__image-wrap {
  background-color: #1a2b4c !important;
}

/* More breathing room between date groups */
.date-group {
  margin-bottom: 2rem;
}

Calendar view (alternative)

:::caution Legacy view + third-party library

The calendar header uses our legacy vdm_header_* classes, while the calendar grid itself is rendered by a third-party library (responsive-calendar). You can override both, but the grid classes are not ours and may change with the library.

:::

Selector	Element	What it styles
.vdm_header_EventName	div	Event name in the calendar header
.vdm_header_EventShortText	p	Short text under the event name
.responsive-calendar	div	The calendar grid container
.day-headers	div	The row of weekday labels
.date-header	span	The month/year navigation header
.controls	div	Previous/next navigation

.responsive-calendar .date-header {
  background-color: #1a2b4c;
  color: #fff;
}

Sub-event — ticket selection (unseated)

Selector	Element	What it styles
.vdm-cart	div	The basket panel (appears once it has items)
.cart-row	div (Bulma box)	A single ticket-type row in the selection list
.discount-name	b	The ticket-type / price name
.addtocart	button	The add-to-cart button on a ticket type
.number-of-tickets	button	The quantity counter
.progress	progress	Availability/stock bar
.goback	a (button)	Back button
.next	a (button)	Proceed-to-checkout button

.cart-row {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.addtocart,
.number-of-tickets {
  background-color: #1a2b4c !important; /* is-primary sets a colour; override it */
}

/* Availability bar in your accent colour */
.progress::-webkit-progress-value {
  background-color: #1a2b4c;
}

Sub-event — seat map (seated)

Seated events replace the ticket list with a clickable plan. The plan is an SVG that is loaded into the page after it opens; each seat is a <rect> inside it.

Selector	Element	What it styles
.placemap-container	div	The seat-plan container
.svg-container	div	Wrapper around the SVG plan
.injected-svg	svg	The seat-plan SVG itself
.injected-svg rect.unavailable	rect	Seats that are taken/blocked
.best-seats-wrapper	div	Wrapper of the "best available seats" button
.best-seats-btn	button	The "best available seats" button

/* Recolour taken seats */
.injected-svg rect.unavailable {
  fill: #cccccc !important;
}

.best-seats-btn {
  background: #1a2b4c !important;
}

Note — available and selected seats are styled inline by the seat-map script, so test any seat-state overrides carefully on a real seated event.

Checkout

Selector	Element	What it styles
.vdm-cart	div	The order summary
.paymentMethods-fieldset	fieldset	The whole payment-methods group (hidden for free orders)
.paymentMethods	div (Bulma field)	A single payment-method option
.vdm_checkout_term	div	The terms & conditions block
.vdmDiscountPromo	div	The discount/promo-code area
.check_discount	button	The "apply discount code" button
#pay-button / .pay-button	button	The pay button
#free-button / .free-button	button	The confirm button for free orders

#pay-button {
  background-color: #1a2b4c !important;
  font-weight: 700;
}

.vdm_checkout_term {
  font-size: 0.85rem;
  color: #666;
}

Targeting framework classes (advanced)

:::caution At your own risk

The order pages are built on the Bulma CSS framework, so you will also see generic classes such as .button, .columns, .column, .card, .field and is-* / has-text-* modifiers in the markup.

You can target these, but they are framework internals, not designed customisation points: they are shared across the whole UI, so a rule meant for one place can affect others, and they may change if the framework is upgraded. Prefer the VoordeMensen selectors listed above; reach for Bulma classes only when there is no better hook, and keep your selectors as specific as possible.

:::

Tips

• Override inline styles with !important. Brand colours on the banner (and some seat-map states) are set inline and otherwise win over your stylesheet.
• Cache-bust your @import. Add ?v=2, ?v=3, … and bump it on every change so returning visitors get the latest styles.
• Scope tightly. Prefer the most specific VoordeMensen selector for the element you mean, so you don't accidentally restyle the rest of the page.
• Test on the demo pages. Open the relevant level (overview, main event, sub-event, checkout) and check your overrides before going live.

---

See also: Manual integration · WordPress plugin