CSS abhängig vom Editor
Veröffentlichungsdatum: 07. Februar 2020
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Die Darstellung über CSS lässt sich abhängig davon definieren, ob man sich im Editor, also Bearbeitungsmodus, befindet, oder im Frontend.
Vergleich Frontend- und Editor-Ansicht
Zum einen gibt es die Möglichkeit, über die editor.css speziell für den Editor per CSS zu formatieren.
Eine andere Möglichkeit ist die Definition über entsprechende Klassenangaben, wie im Beispiel (siehe Screen) und Quelltext-Beispiel unten aufgezeigt.
Über die Klasse weditor bezieht man sich auf die Definition innerhalb der Seitenbearbeitung (im Editor) und über no-weditor für die Anzeige im Frontend, z.B. für Seitenbesucher.
/*@wCssFragment{class:elementHeadline;variant:0;caption:Standardüberschrift;caption-en:Default;livepreview:yes}*/ .elementHeadline_var0 { /* ... */ .weditor & { border:2px dotted $baseColorPrimary2; } .no-weditor & > h1{ background-color:$baseColorPrimary1; } }