Appearance & custom CSS
Your public pages ship with Platypus's warm light theme. When you'd rather they match your own site (colours, fonts, spacing, hiding a block), open Settings in the admin sidebar and pick the Appearance tab. The Custom CSS field there applies to every public page, including embedded pages shown inside an iframe on your own website.
The Custom CSS field
- One stylesheet, up to 20,000 characters, written straight into the field.
- Platypus injects it into every public page after the theme's own styles, so your rules win over the defaults without
!importantgymnastics. - It never touches the admin — only public pages (home, events, event detail, subscribe, contact, checkout) and embeds.
- The literal sequence
</styleis rejected on save: the stylesheet renders inside a<style>block, so a closing tag can't be smuggled in. Everything else is your CSS, verbatim. - The About this section panel on the Appearance tab documents these same hooks in accordions, so the reference sits right where you type.
Seeing a page without your CSS
To see any public page without your stylesheet, add ?disableCustomCss=1 to its URL. The switch affects that single request and stores nothing; remove the parameter and your CSS is back. Use it to tell "my rule did this" apart from "the theme did this".
The selector contract
These IDs and classes are stable hooks: they carry no styling of their own and won't be renamed, so CSS you write against them keeps working across Platypus updates.
Page identifiers
The outer wrapper of every public page carries id="page-<slug>", so you can scope a rule to a single page — that page's nav and footer included:
| Page | ID |
|---|---|
| Home | #page-home |
| Events listing | #page-events |
| Event detail | #page-event-detail |
| Subscribe / confirmation | #page-subscribe, #page-subscribe-confirmed |
| Unsubscribe / confirmation | #page-unsubscribe, #page-unsubscribe-confirmed |
| Contact | #page-contact |
| Checkout | #page-checkout |
| Ticket terms | #page-terms |
| Embedded cards | #page-embed-details, #page-embed-tickets |
/* A different footer on the home page only */
#page-home #site-footer {
background: #1d3a2a;
}Layout hooks (every full page)
| Hook | Element |
|---|---|
#site-nav | Navigation bar |
#site-brand | Brand / logo link |
#site-main | Main content region |
#site-footer | Footer |
#site-attribution | The "Ticketing by Platypus Tickets" line inside the footer |
.site-nav-link | Each navigation link |
The two card embeds carry no chrome, so inside them only the page ID and the card hooks below match.
Unique page elements
| Hook | Element |
|---|---|
#home-intro, #home-links | Home intro copy and link-card block |
#events-header | Events listing header |
#event-main, #event-sidebar, #event-description | Event detail columns and description |
#tickets-card, #event-details-card, #event-dates-card | Event detail cards |
#buy-tickets-button | The purchase button |
#subscribe-card, #subscribe-form, #subscribe-confirmed-card | Subscribe pages |
#unsubscribe-card, #unsubscribe-form, #unsubscribe-confirmed-card | Unsubscribe pages |
#contact-form, #contact-details | Contact page |
Repeating elements
| Hook | Element |
|---|---|
.ticket-batch | Each ticket-type row on an event detail page |
.home-link-card | Each link card on the home page |
.contact-detail-item | Each contact detail on the contact page |
.ev-card, .ev-row, .ev-grid, … | The events listing's ev-* family (cards, rows, grid, filters, pills) |
/* Round every event card and hide the category pills */
.ev-card {
border-radius: 1rem;
}
.ev-pill {
display: none;
}How this interacts with the theme
The public theme is fixed to light mode and scoped to public pages. Your custom CSS loads after it, so anything you write overrides the theme; leave the field empty and pages use the theme as-is. Embeds follow exactly the same rules: style it once here and the pages match everywhere they're shown. When a page looks wrong and you can't tell whose rule is responsible, ?disableCustomCss=1 settles it. A hook that's stopped matching is a bug in the contract — email support@platypus.tickets.