Style Event Pages with the Custom CSS Editor

If the built-in design options are not enough, the Custom CSS editor lets you fine-tune your event pages with live preview and point-and-click element selection, so you do not need to inspect page code yourself.

What It Covers

Your CSS applies to every public page of that event: Details, Schedule, Checkout, Payment, Confirmation, Leave Checkout, and Online Event pages. CSS is specific to each event, not shared across your account.

Use the Editor

1. Open your event and go to Pages & Design, then Custom CSS.
2. The editor opens on the left with a live preview on the right.
3. Click any element in the preview to reveal its selector in a popup.
4. Choose to copy the selector or insert a starter rule into the editor.
5. Adjust the values.
6. Watch the preview update instantly.
7. Click save when you are happy.

Quick Style Presets

After selecting an element, insert a starter for: Border, Background, Text Color, Button Color, Border Radius, Spacing, Shadow, or Typography. Edit the generated values to match your brand.

Troubleshooting

• Your rules load after the defaults, so they usually win. If one does not, use a more specific selector or add !important.
• For phone-only tweaks, wrap rules in a media query such as @media (max-width: 768px).
• To remove all custom styling, clear the editor and save.

Reusing Styles

CSS carries over when you duplicate an event or copy settings from another one. You can also paste the code manually into another event's editor.

Good to know: Start with presets, then refine; it is faster than writing every rule from scratch.