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:
- Was bedeutet „CSS-Only Varianten in Objekten nutzen“?
- Sie können CSS-Only-Varianten nicht nur für einzelne Elemente verwenden, sondern auch für Objekte. So lassen sich unterschiedliche Darstellungen innerhalb eines Objekt-Templates komfortabel per CSS definieren und im Editor auswählen.
- Wie kann der Redakteur in einem Objekt zwischen Varianten wählen?
- Über einen Pflegetag vom Typ **selectCssClassVariant** kann der Redakteur im Objekt eine bereitgestellte Variante auswählen. Die verfügbaren Varianten werden im CSS definiert.
- Wo muss der Pflegetag **selectCssClassVariant** definiert werden?
- Den Pflegetag definieren Sie im **Objekt-Template**. Im Standard ist er bereits in der aktuellen „**Teaser, Banner, Slider**“-Version (z. B. über **slide.wObject.php**) eingebunden.
- Wie sieht ein Beispiel für den Pflegetag für eine Varianten-Auswahl im Objekt aus?
- Im Template ist z. B. ein Pflegetag vorgesehen, der die Auswahl im Editor ermöglicht. Beispiel (Auszug): <pre><code class="codeBlock" style="color: #000000">html <div class="wEditorExtensionLabel wEditorElementValue"> <!-- web:text:start editor="selectCssClassVariant" ... cssClass="objectSlide" ... --> </div> </code></pre>
- Wie definiere ich die CSS-Only Varianten für ein Objekt?
- In der **design.css** definieren Sie die Varianten über **@wCssFragment**-Blöcke. Der Wert, den Sie im Pflegetag im Attribut **cssClass** gesetzt haben (z. B. <code class="codeInline">cssClass="objectSlide"</code>), dient als Basis für die Definition der CSS-Klassen. Beispiel: <pre><code class="codeBlock" style="color: #000000">css /*@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 {} </code></pre>
- Warum erscheinen neue Varianten sofort im Editor?
- Sobald Sie eine neue Variante im CSS definieren (über die entsprechenden <code class="codeInline">@wCssFragment</code>-Definitionen), steht sie **sofort im Editor** zur Auswahl bereit.
- Wie wird die ausgewählte Variante in der Detailseite ausgegeben?
- Wenn ein Objekt eine Layout-Variante ergänzt hat, wird die passende CSS-Klasse in der Detailseite in der **body**-Klasse ergänzt, z. B.: <pre><code class="codeBlock" style="color: #000000">html <body class="body object-slide object-slide_var1">... </body> </code></pre>
- Wie wird die ausgewählte Variante in der Liste (Auflistung) ausgegeben?
- Auch in der Liste wird die Variante als zusätzliche CSS-Klasse ergänzt, z. B.: <pre><code class="codeBlock" style="color: #000000">html <li class="listEntry listEntryObject-slide listEntryObject-slide_var1">...</li> </code></pre>
- Wie kann ich die Darstellung einer Objektvariante anpassen, z. B. die Überschrift einfärben?
- Sie können die Darstellung frei gestalten, indem Sie CSS-Selektoren für die Kombination aus Objekt-Variante und gewünschten Elementen definieren. Beispiel: Für Variante 99 wird für den Banner der Überschrift eine transparente blaue Hintergrundfarbe gesetzt. <pre><code class="codeBlock" style="color: #000000">css .listBannerSlider_var99 .listEntryObject-slide_var1 .listEntryTitle { background-color: rgba(0, 0, 255, 0.5); } </code></pre>
- Welche Vorteile bietet das Vorgehen mit CSS-Klassen und Objektvarianten?
- Es ermöglicht eine flexible, zentral über CSS steuerbare Gestaltung der Objektdarstellung. Dadurch können unterschiedliche Darstellungen effizient umgesetzt und durch die Redakteure im Editor per Variantenwahl ausgewählt werden.