CSS Variables & Styling

Styling4 Min.Updated: October 2, 2026

Most color wishes are covered by the color pickers under Settings → Design & Options. For everything else the plugin relies on CSS variables and stable classes that you address in your theme or under Appearance → Customize → Additional CSS.

The global color variables

The plugin writes the eight colors from the settings as variables into :root. Preferably change them there – then the preview in the back end and the admin pages match too.

Variable	Setting	Default
`--ec-primary`	Primary color	`#f76b15`
`--ec-secondary`	Secondary color	`#eef4fa`
`--ec-bg-light`	Background (toolbar)	`#fff8f0`
`--ec-border`	Border color	`#dcebf7`
`--ec-tab-bg`	Background (tabs)	`#ffffff`
`--ec-live-bg`	Background (live section)	`#fff9f9`
`--ec-upcoming-bg`	Background (upcoming)	`#ffffff`
`--ec-card-footer-bg`	Background (card footer)	`#ffffff`

Additional CSS – different colors on one page only

.page-id-42 .ec-event-calendar-app {
    --ec-primary: #2a6f97;
    --ec-bg-light: #eef6fb;
}

Because the variables are inherited, it is enough to set them again on an enclosing element – without !important.

Accent colors per session

Venue or category colors are set directly on the element: --ec-local-accent on tile and compact card, --ec-s-accent with --ec-s-bg-rgb and --ec-s-fg on the detail page. Change these colors in the venue or category management, not via CSS – otherwise calendar, timetable and monitors no longer match.

Important classes

Class	Element
`.ec-event-calendar-app`	Outer frame of calendar, timetable, ticker, speaker directory and detail page. The safe entry point for your own rules.
`.ec-toolbar`	Search and filter bar above the calendar
`.ec-card`	One tile of the grid view
`.ec-table`	The list view
`.ec-timetable-container`, `.ec-timetable-event`	Timetable and one tile in it
`.ec-live-view-container`	Live ticker
`.ec-compact-card`	Compact card `[event_card]`
`.ec-detail-modal-dialog`	The detail pop-up
`.ec-is-cancelled`	Cancelled session (in all views)
`.ec-past-event`	Session that is already over
`.ec-widget-compact-card`, `.ec-widget-live-ticker`	The two sidebar widgets

Example: dim cancelled sessions more

.ec-event-calendar-app .ec-card.ec-is-cancelled {
    opacity: .55;
}

Responsive: container width instead of screen width

Calendar and timetable switch their layout according to the width of their container, not the screen width. That way the same calendar looks right in a narrow sidebar column and on a full page. Write your own layout adjustments as container queries:

Container query instead of media query

@container ec-card-container (max-width: 600px) {
    .ec-card-title { font-size: 1rem; }
}

Media queries miss the point

A @media rule for the same width doesn’t hit the same cases – a calendar in a 600 px column on a large screen would stay untouched.

What doesn’t exist

The plugin has no dark mode of its own. The variables above allow dark backgrounds, but text colors follow the theme – so test a dark color scheme in all views. To fundamentally rebuild the detail page, use a template copy.