Custom CSS
Write your own CSS to fine-tune a single section or your whole event page. Per-section CSS is scoped for you, and every theme design token is yours to reuse.
Write your own CSS to fine-tune a single section or your whole event page. Per-section CSS is scoped for you, and every theme design token is yours to reuse.
Most of the time, the Customize panel is all you need — it covers colors, fonts, and spacing without any code. Reach for Custom CSS when you want a little more control: resizing one button, nudging a single section's background, or overriding a theme detail the panel doesn't expose.
You write CSS in the same place you design your page — the Page Builder. There are two flavors:
Every section on your page can carry its own CSS. This is the safest place to start, because your styles stay locked to that one section.
Open Event page → Customize page and select the section you want to style — click it on the canvas, or pick it from the section list.
In the Customize panel on the right, scroll to Custom CSS and expand it. You'll see a text box ready for your rules.
Just write rules that target the classes you want to change. You don't need a
wrapper selector — Rendezvous automatically scopes everything you write to
this section using a [data-section-id] attribute behind the scenes.
/* Make the RSVP buttons bigger and bolder */
.base-rsvp__btn {
padding: 16px 32px;
font-size: 18px;
}
Because this CSS is scoped to the section, it only touches the RSVP buttons in that section — if you have another RSVP block elsewhere, it stays untouched.
Global CSS applies to your entire event page, across all sections — perfect for broad changes like restyling every heading or adjusting the page-level background.
In the Page Builder, open the Customize panel. Make sure no section is selected — when you're not editing a specific section, the panel shows your page-wide theme and style controls.
Open the Advanced group. Global CSS is the first box inside it, right above Header & Footer HTML.
These styles aren't scoped — they apply across your whole page. Use them for sweeping changes, like a consistent heading treatment or a page-level background.
/* Apply the same heading style across the whole page */
h2 {
letter-spacing: 0.05em;
text-transform: uppercase;
}
Every section is wrapped in an element that describes itself, and those attributes are yours to select on. They are stable, they are rendered on the server, and they tell you what the panel's own controls resolved to:
| Attribute | What it holds |
|---|---|
data-section-id | This section's id. It's the wrapper your per-section CSS is scoped with |
data-section-type | The section type — event-cover, event-schedule, content-cards, … |
data-section-padding | The Section padding step, when it isn't normal |
data-section-width | The Section width choice |
data-columns | The Columns count, on the blocks that have one |
/* Every card band on the page, wherever it sits */
[data-section-type="content-cards"] {
border-top: 1px solid var(--event-border);
}
When you set a value for tablet or phone (see Different values on tablet and
phone), it lands beside the base attribute with a -md or -sm suffix — data-section-padding-sm="narrow", data-text-alignment-md="left", data-columns-sm="2". You can select on those too, and it's worth knowing they exist so your own rules don't fight them.
Those two suffixes mean specific widths, and it's worth matching them in your own media queries so your CSS and the panel's controls agree about where "phone" starts:
/* Tablet — the same width the panel's "Tablet" chip means */
@media (max-width: 1024px) {
/* … */
}
/* Phone */
@media (max-width: 640px) {
/* … */
}
Every theme exposes a set of CSS custom properties — its design tokens — and you can reference them in your own CSS. This is the secret to overrides that feel native: when you reuse a token, your styles automatically match the active theme and shift along with it if you recolor.
.my-custom-element {
color: var(--event-primary);
background: var(--event-bg);
font-family: var(--event-font-heading);
border: 1px solid var(--event-accent);
}
For the full list of tokens and what each one controls, see the Design tokens reference.
@media queries work in both per-section and Global CSS, so you can tailor your tweaks for phones.@import in Global CSS (we hoist it into a fast, non-render-blocking <link> for you). Only fonts.googleapis.com imports are loaded — other @import URLs are stripped for security; self-host with @font-face instead. See Colors, fonts & spacing.var(--event-…) instead of a fixed hex code. Your overrides will stay in sync when you adjust your theme.--event-… token, with examples