Die meisten Farbwünsche erfüllen die Farbwähler unter Einstellungen → Design & Optionen. Für alles Weitere setzt das Plugin auf CSS-Variablen und stabile Klassen, die Sie im Theme oder unter Design → Customizer → Zusätzliches CSS ansprechen.
Die globalen Farbvariablen
Das Plugin schreibt die acht Farben aus den Einstellungen als Variablen in :root. Ändern Sie sie bevorzugt dort – dann stimmen auch die Vorschau im Backend und die Admin-Seiten.
| Variable | Einstellung | Standard |
|---|---|---|
--ec-primary | Primärfarbe | #f76b15 |
--ec-secondary | Sekundärfarbe | #eef4fa |
--ec-bg-light | Hintergrund (Toolbar) | #fff8f0 |
--ec-border | Rahmenfarbe | #dcebf7 |
--ec-tab-bg | Hintergrund (Tabs) | #ffffff |
--ec-live-bg | Hintergrund (Live-Bereich) | #fff9f9 |
--ec-upcoming-bg | Hintergrund (Kommende) | #ffffff |
--ec-card-footer-bg | Hintergrund (Karten-Footer) | #ffffff |
.page-id-42 .ec-event-calendar-app {
--ec-primary: #2a6f97;
--ec-bg-light: #eef6fb;
}Weil die Variablen vererbt werden, genügt es, sie auf einem umschließenden Element neu zu setzen – ohne !important.
Akzentfarben je Programmpunkt
Orts- bzw. Kategoriefarben setzt das Plugin direkt am Element: --ec-local-accent an Kachel und Kompaktkarte, --ec-s-accent mit --ec-s-bg-rgb und --ec-s-fg auf der Detailseite. Ändern Sie diese Farben in der Orts- oder Kategorieverwaltung, nicht per CSS – sonst stimmen Kalender, Zeitplan und Monitore nicht mehr überein.
Wichtige Klassen
| Klasse | Element |
|---|---|
.ec-event-calendar-app | Äußerer Rahmen von Kalender, Zeitplan, Ticker, Sprecherverzeichnis und Detailseite. Der sichere Einstieg für eigene Regeln. |
.ec-toolbar | Such- und Filterleiste über dem Kalender |
.ec-card | Eine Kachel der Kachelansicht |
.ec-table | Die Listenansicht |
.ec-timetable-container, .ec-timetable-event | Zeitplan und eine Kachel darin |
.ec-live-view-container | Live-Ticker |
.ec-compact-card | Kompaktkarte [event_card] |
.ec-detail-modal-dialog | Das Detail-Pop-up |
.ec-is-cancelled | Abgesagter Programmpunkt (in allen Ansichten) |
.ec-past-event | Bereits vergangener Programmpunkt |
.ec-widget-compact-card, .ec-widget-live-ticker | Die beiden Sidebar-Widgets |
.ec-event-calendar-app .ec-card.ec-is-cancelled {
opacity: .55;
}Responsive: Containerbreite statt Bildschirmbreite
Kalender und Zeitplan schalten ihr Layout nach der Breite ihres Containers um, nicht nach der Bildschirmbreite. So sieht derselbe Kalender in einer schmalen Seitenspalte richtig aus wie auf einer vollen Seite. Eigene Anpassungen fürs Layout schreiben Sie deshalb als Container-Abfrage:
@container ec-card-container (max-width: 600px) {
.ec-card-title { font-size: 1rem; }
}Eine @media-Regel für dieselbe Breite trifft nicht dieselben Fälle – ein Kalender in einer 600 px breiten Spalte auf einem großen Bildschirm bliebe unberührt.
Was es nicht gibt
Das Plugin bringt keinen eigenen Dunkelmodus mit. Die Variablen oben erlauben dunkle Hintergründe, Textfarben folgen aber dem Theme – testen Sie ein dunkles Farbschema deshalb in allen Ansichten. Wer die Detailseite grundlegend umbauen will, nimmt eine Template-Kopie.