10 — Eigene CSS-Klassen

Ein Feld — und es ist nicht das, was die meisten erwarten.

Was diese Seite ist

Custom CSS ist eine Klassenauswahl, kein CSS-Editor. Das Feld enthält eine kommagetrennte Liste von Klassennamen. Diese Namen erscheinen danach als Mehrfachauswahl an jedem Inhaltselement unter Erscheinungsbild, sodass die Redaktion sie vergeben kann, ohne CSS zu können.

Vorgabe:

border-radius-6, border-radius-12, box-shadow-1, img-shadow, padding-5

Was sie nicht ist

Sie nimmt keine CSS-Regeln entgegen. Wer

.my-class { color: red }

in das Feld schreibt, bekommt in der Auswahlliste eine Klasse, die wörtlich .my-class { color: red } heißt — und keine Gestaltung. Die Regeln selbst stehen im SCSS des Themes (Ebene 3).

Eine eigene Klasse hinzufügen

Zwei Schritte, in dieser Reihenfolge:

1. Die Regel definieren, im eigenen Theme, z. B. in packages/yavi-lucerne/Resources/Public/Scss/Skin/_custom.scss:

.frame-highlight {
  border-left: 4px solid var(--theme-secondary);
  padding-left: 1.5rem;
}

2. Die Klasse bekannt machen, auf dieser Seite:

border-radius-6, border-radius-12, box-shadow-1, img-shadow, padding-5, frame-highlight

Cache leeren. Die Klasse steht der Redaktion jetzt zur Auswahl.

Das Feld nicht leeren

Ein leeres Feld entfernt die Auswahl von jedem Inhaltselement, und jede bereits vergebene Klasse wird nicht mehr angeboten — der Wert bleibt in der Datenbank, lässt sich aber nicht erneut auswählen. Wer keine eigenen Klassen will, belässt das Feld auf seiner Vorgabe, statt es zu leeren.

Wo die Klassen landen

Am Rahmen des Elements — dem äußeren <div>, das auch die Abstands- und Hintergrundklassen trägt. Sie wirken also auf das ganze Element und nicht nur auf seinen Text.

Benennung

Klassen mit einem Präfix versehen, damit sie nicht mit Bootstrap kollidieren können: frame-…, yavi-…, <kunde>-…. shadow, rounded oder wide werden eines Tages in Bootstrap etwas anderes bedeuten und die Site stillschweigend verändern.