CSS-Only Varianten in Objekten nutzen
21. Mai 2014
Nutzen Sie die Möglichkeiten von CSS-Only auch in Objekten, um unterschiedliche Darstellungen komfortabel für den Redakteur zu ermöglichen.
Die Möglichkeiten von CSS-Only können Sie nicht nur in Elementen einsetzen, sondern auch in Objekten.
Über ein Pflegetag vom Typ selectCssClassVariant kann der Redakteur eine bereitgestellte Variante im Objekt auswählen. Die Varianten können, wie bei Elementen gewohnt, im CSS definiert werden. Sobald eine neue Variante im CSS definiert wurde, steht diese sofort im Editor zur Verfügung.
Das Pflegetag definieren Sie im Objekt-Template, wozu Sie nachfolgend einen Auszug aus dem Template slide.wObject.php finden. Dies ist bereits im Standard bei aktueller "Teaser, Banner, Slider" Weblic® Version so eingebunden.
Auszug aus der slide.wObject.php mit Pflegetag für Variante innerhalb des Objektes
<div class="wEditorExtensionLabel wEditorElementValue"><!-- web:text:start editor="selectCssClassVariant" valueDefault="0" onchange="wEditor.saveDraftAndReload();" pathCss="<xsl:value-of select="$wCSSPath"/>" cssClass="objectSlide" validator="" inputStyle="width:auto" --><xsl:value-of select="/wd:document/wd:extension/wd:object/wd:data[@id = 'objectLayout']/text()"/><!-- web:text:stop --></div>
Mit dem Wert, den Sie im vorigen Pflegetag zum Attribut cssClass gesetzt haben (z.B.: cssClass="objectSlide"), definieren Sie nun in der design.css die entsprechenden CSS-Only Varianten ( ... @wCssFragment{class:objectSlide;...):
Auszug aus der design.css mit definierten CSS-Only Varianten für das Slide-Objekt
/*@wCssFragment{class:objectSlide;variant:0;caption:Standard;caption-en:Default}*/ .objectSlide_var0 {} /*@wCssFragment{class:objectSlide;variant:1;caption:Kundenaussagen (blau);caption-en:Customer Statements (blue)}*/ .objectSlide_var1 {}
Ist ein Objekt mit einer Layout-Variante ergänzt worden, wird diese sowohl in der Detailseite als auch in der Auflistung ergänzt:
Ergänzung der Klasse in der Detailseite
<body class="body object-slide object-slide_var1">
...Ergänzung der Klasse in der Liste
<li class="listEntry listEntryObject-slide listEntryObject-slide_var1">
...Dadurch steht Ihnen die Möglichkeit frei, die Objektdarstellung nach Belieben zu gestalten, indem Sie die entsprechenden CSS-Klassen definieren. Im Beispiel setzen wir für den Banner der Variante 99 für die Überschrift eine transparente blaue Hintergrundfarbe:
Auszug aus der design.css mit definierten CSS-Only Varianten für das Slide-Objekt
/* ... */ .listBannerSlider_var99 .listEntryObject-slide_var1 .listEntryTitle {background-color:rgba(0, 0, 255, 0.5)}
Und so sieht es dann in der Bearbeitung des Objektes (linker Screenshot) und in der Ausgabe des Banners auf der Webseite (rechter Screenshot) aus:
