CSS-Only Varianten anpassen
02. Oktober 2015
css css-only varianten fallbeispiele
CSS-Only Varianten von Weblics® können Sie über CSS individuell anpassen. Fallbeispiele zeigen Ihnen das konkrete Vorgehen.
Mit den Weblics® stehen Ihnen zahlreiche fertige Anwendungen zur Verfügung, die Sie bei Bedarf individuell anpassen können.
Aktuell finden Sie zu Weblics® wie u.a.
- Bildergalerie
- Bild
- Inhaltsbox
- Inhaltsbereich
- Akkordeon-Container
- Inhaltscontainer mit Registerlaschen
- Liste
- Mehrspaltiger Inhaltscontainer
- Teaser, Banner, Slider
- Überschrift
- etc.
verschiedene Darstellungsvarianten auf CSS-Only Basis. Die Vielzahl an unterschiedlichen CSS-Only-Varianten liefert Ihnen bereits im Standard eine breite Auswahl für Ihr individuelles Web-Projekt.
Sofern eine gewünschte Variante nicht verfügbar ist, können Sie gerne zuerst beim Support nachfragen, ob die von Ihnen gewünschte Variante ggf. eingeplant werden kann. Ist dies nicht bzw. nicht zeitnah genug für Sie möglich, erstellen Sie über meist wenige CSS-Anpassungen Ihre eigene Variante.
Vorgehensweise für eigene CSS-Only Varianten
Um eine individuelle CSS-Only Variante für ein Weblic zu erstellen, bietet es sich grundsätzlich an, die Variante als Grundlage zu nehmen, die der Kundenvorstellung am nächsten kommt. Kopieren Sie den kompletten CSS-Block der Variante in der design.css (z.B. .listPictureGallery_var0 ...) und fügen Sie diesen mit individuell benannter Variantennummer und Bezeichnung (z.B. .listPictureGallery_var091 ...) in die design.css ein. Im kopierten CSS-Block nehmen Sie dann Ihre Änderungen vor.
Wir liefern über den Entwicklerbereich nach und nach verschiedene Fallbeispiele, die das Vorgehen konkret nachvollziehbar machen und verlinken diese in diesem Artikel in den weiterführenden Links.
ab CMS 10.x
Rufen Sie über das entsprechende Element (z.B. ein Listen-Element, siehe Screen nebenan) die Optionen auf und dort die Layout-Auswahl. Dort können Sie aus schon installierten CSS-Only-Varianten auswählen oder eine neue Variante installieren bzw. bestehende anpassen.
Über "CSS-Only-Variante anpassen" öffnet sich im Layoutwizard unter den Inhaltselementen die entsprechende CSS-Only-Variante. Dort haben Sie die Möglichkeit, die bestehende Variante entweder schon direkt in der Maske oder im Quelltext anzupassen. Weiterhin bietet eine Kopierfunktion zu jeder Variante die Möglichkeit, diese als Grundlage für eine neue Variante zu kopieren. Die neue Variante wird Ihnen bereits mit neuer Variantennummer angelegt und Sie können die entsprechenden Eigenschaften der Variante nach individuellen Wünschen anpassen.
CMS 8.x und 9.x
Kopieren Sie den kompletten CSS-Block der Variante in der design.css (z.B. .listPictureGallery_var0 ...) und fügen Sie diesen mit individuell benannter Variantennummer und Bezeichnung (z.B. .listPictureGallery_var10000 ...) in die design.css ein. Im kopierten CSS-Block nehmen Sie dann Ihre Änderungen vor.
Wir liefern über den Entwicklerbereich nach und nach verschiedene Fallbeispiele, die das Vorgehen konkret nachvollziehbar machen und verlinken diese in diesem Artikel in den weiterführenden Links.
Auswahl von CSS-Only-Varianten auf Gruppenbenutzer beschränken
Einzelne CSS-Only-Varianten können innerhalb der Seitenbearbeitung nur für bestimmte Gruppen zur Auswahl angeboten werden (ab CMS Version 008.003.040.00). Setzen Sie hierzu in der @wCssFragment-Definition die Gruppen mit Ihrem Gruppennamen zu einem Eintrag "groups". Mehrere Gruppen können Sie durch Komma getrennt angeben (siehe nachfolgendes Quelltextbeispiel).
Beispiel: CSS-Only-Variante zur Auswahl auf Weblication® Gruppen beschränken
/* CSS-Only-Variante steht nur Benutzern folgender Gruppen zur Auswahl: chiefeditorship,management */ /*@wCssFragment{class:listDefault;variant:8;caption:Titel;caption-en:Title;groups:chiefeditorship,management}*/
Auswahl von CSS-Only-Varianten auf Inhaltsgruppen beschränken
Einzelne CSS-Only-Varianten können innerhalb der Seitenbearbeitung nur für bestimmte Inhaltsgruppen zur Auswahl angeboten werden (ab CMS Version 008.004.081.000 ). Setzen Sie hierzu in der @wCssFragment-Definition die Gruppen mit Ihrem Gruppennamen zu einem Eintrag " contentgroups ". Mehrere Gruppen können Sie durch das Pipe-Zeichen | getrennt angeben (siehe nachfolgendes Quelltextbeispiel).
Beispiel: CSS-Only-Variante zur Auswahl auf Inhaltsgruppen (contentX) beschränken
/* CSS-Only-Variante steht nur für content1 und content3 zur Auswahl: contentgroups:content1|content3 */ /*@wCssFragment{class:listDefault;variant:8;caption:Titel;caption-en:Title;contentgroups:content1|content3}*/