CSS-Only Referenz
Weblication® CMS ab Version 8 bietet mit CSS-Only eine grundlegend neue Technologie. Mit CSS-Only erstellen Sie rein über CSS individuelle Layouts, individuell gestaltete Anwendungen, Logik sowie responsive Designs. Ihre Vorteile:
- Sie können beliebig individuell gestaltete Webseiten rein über CSS bauen, ohne Templates zu ändern
- Sie steuern JavaScript und XSLT über CSS
- Sie können aus der permanent steigenden Anzahl standardisierter Layout-Varianten jederzeit Ihre neue Varianten downloaden und per Mausklick Ihre Websites und Anwendungen völlig ohne Programmierung ändern.
Neue Darstellungvarianten von Weblics® lassen sich oft in wenigen Minuten erstellen, weshalb wir bereits kostenlos für Partner Wunschvarianten erstellt haben. Wenn auch Sie Wünsche haben, Layout-Varianten zum Download zu nutzen - statt selbst eine CSS-Variante zu erstellen-, melden Sie sich einfach. Je nach Wunsch erstellen wir kurzfristig Ihre gewünschte Variante und bieten diese zum Download über weblics.de an.
Zu beachten:
- Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic Projekte und Weblics®!
BASE (Mobile First) Projekte nutzen nur Teile dieser CSS-Only-Eigenschaften und darüber hinaus weitere, hier nicht dokumentierte Eigenschaften, welche allerdings direkt im CSS der MF dokumentiert sind. - Alle nicht universellen CSS-Only-Eigenschaften sind meist über aktuelle Weblic® 2.x Versionen umgesetzt! In einer BASE 1.x mit Weblic® 1.x Versionen müssen Sie die entsprechenden Abfragen ggf. manuell nachrüsten! Passen Sie dort auch den WSL-Aufruf zum Inkludieren der CSS-Ressourcen an, damit WCSS interpretiert werden kann!
Mit CSS-Only können Sie viele Funktionen direkt in CSS abbilden, für die in der Vergangenheit PHP- oder JavaScript-Anpassungen notwendig waren. Beachten Sie, dass CSS-Only-Eigenschaften nur bei XML-Konformen Seiten korrekt greifen!
- Einzelne CSS-Only-Varianten können innerhalb der Seitenbearbeitung nur für bestimmte Gruppen zur Auswahl angeboten werden (siehe hierzu Artikel "CSS-Only Varianten anpassen").
- Ab CMS-Version 008.002.089.000 unterstützt CSS-Only einfache Rechenoperationen über wCalc:
Beispiel: margin-left:-wCalc($widthBlockTop / 2);font-size:wCalc($fontSizeNavigationLevel2 + 2);
* und - können auch verwendet werden.
Folgende Übersicht zeigt Ihnen, welche universellen und anwendungsbezogenen CSS-Only-Eigenschaften Sie in der design.css nutzen können.
-
-w-add-classes
Ergänzt das Element über Javascript um die angegebene Klasse. -
-w-add-data
Setzen von HTML5 Data-Attributen -
-w-add-events
Ergänzt das Element um das angegebene JavaScript-Ereignis. (siehe auch Artikel) -
-w-add-objectdata
Ergänzt das Element um die angegebenen Objektdaten -
-w-addCopyright
Ergänzt ein Bild um den Copyright Hinweis -
-w-adddescription
Definiert, ob die Beschreibung hinzugefügt werden soll -
-w-addsize
Ergänzt einen Listeneintrag um die Dateigröße der ausgelesenen Datei -
-w-addsrc
Ergänzt einen Listeneintrag um den Link zur ausgelesenen Datei -
-w-allow-enlargement
Definiert, ob bei der Bildgenerierung eine eventuelle Vergrößerung vorgenommen wird -
-w-allow-touch
Definiert, ob ein Element touchfähig ist -
-w-animation-direction
Definiert die Laufrichtung durchlaufender Galerien -
-w-animation-zoom
Definiert den Zoomfaktor einer Animation (als Ganzzahl oder Dezimalzahl mit Punkt getrennt (z.B. 1.8) -
-w-animation
Definiert die Art der Animation beim Wechsel eines Listeneintrages -
-w-aspectratio
Definiert das Seitenverhältnis von generierten Bildern -
-w-background-target
Definiert das Ziel eines Hintergrund-Elementes (z.B. Bannerbild) -
-w-clickable
Definiert, ob ein Element vom Anwender angeklickt werden kann (onclick) -
-w-color-data-selectable
Definiert, ob die Auswahlbox für die Auswahl von Farbwerten angeboten wird -
-w-color-data
Stellt Farbwerte für die Diagrammdarstellung zur Verfügung -
-w-create-hd
Definiert, ob ein Bild in HD-Qualität generiert werden soll -
-w-date-format
Setzt das Datumsformat -
-w-date-lang
Setzt die Sprache zum Datumsformat -
-w-date-showalways
Definiert, ob zu einem Listeneintrag einer Standardseite das Datum angezeigt werden soll -
-w-display
Löscht das Element serverseitig aus dem Ergebnisbaum der Seite. -
-w-dom-appendto
Fügt das Element clientseitig als letztes Unterelement des Zielelementes ein. -
-w-dom-insertafter
Fügt das Element clientseitig nach dem Zielelement ein. -
-w-dom-insertbefore
Fügt das Element clientseitig vor dem Zielelement ein. -
-w-dom-prependto
Fügt das Element clientseitig als erstes Unterelement des Zielelementes ein. -
-w-editmaskExtended-ajax
Zeigt das Auswahlfeld zum Blättern einer Liste über Ajax -
-w-editmaskExtended-align
Definiert, ob die Auswahlbox für die Ausrichtung des Bildes im Bildelement angeboten wird -
-w-editmaskExtended-anchor
Definiert, ob das Eingabefeld für die Angabe eines Ankers angeboten wird -
-w-editmaskExtended-animation
Definiert, ob die Auswahlbox für die Auswahl 'Animation' angeboten wird -
-w-editmaskExtended-animationduration
Definiert, ob die Auswahlbox für die Auswahl 'Wechselgeschwindigkeit' angeboten wird -
-w-editmaskExtended-animationzoom
Definiert, ob die Auswahlbox für die Auswahl 'Zoomfaktor' angeboten wird -
-w-editmaskExtended-backgroundcolor
Definiert, ob die Auswahl für die Farbwerte der Hintergrundfarbe angeboten wird -
-w-editmaskExtended-backgroundcolorpicker
Definiert, ob die Auswahl für die Farbwerte der Hintergrundfarbe angeboten wird -
-w-editmaskExtended-backgroundgradient
Definiert, ob die Auswahl für die Verlaufseffekte angeboten wird -
-w-editmaskExtended-backgroundimage
Definiert, ob das Dateiauswahlfeld für den Pfad des Hintergrundbildes angeboten wird -
-w-editmaskExtended-backgroundpositionclasses
Definiert die Auswahlbox mit den gewünschten Werten für die Position des Hintergrundbildes -
-w-editmaskExtended-backgroundvideo
Definiert, ob das Dateiauswahlfeld für den Pfad des Hintergrundvideo angeboten wird -
-w-editmaskExtended-border
Definiert, ob die Auswahl für den Rahmen/Border angeboten wird -
-w-editmaskExtended-borderradius
Definiert, ob die Auswahl für den Borderradius angeboten wird -
-w-editmaskExtended-categoriesquickfilter
Zeigt das Eingabefeld für den Kategorien Quickfilter an -
-w-editmaskExtended-class
Definiert, ob das Eingabefeld für die Angabe einer CSS-Klasse angeboten wird -
-w-editmaskExtended-classes
Definiert die Auswahlbox mit den gewünschten Werten für eine CSS-Klasse -
-w-editmaskExtended-cols
Definiert, ob die Auswahl für die Anzahl der Spalten angeboten wird -
-w-editmaskExtended-copyrighttext
Definiert, ob das Eingabefeld für einen Copyright Hinweis im Bildelement angeboten wird -
-w-editmaskExtended-date
Definiert, ob die Auswahl für die Anzeige des Datums angeboten wird -
-w-editmaskExtended-description
Definiert, ob die Auswahl für die Anzeige der Beschreibung angeboten wird -
-w-editmaskExtended-entriespreviewlimit
Definiert, ob die Auswahlbox für die Auswahl 'Bilder pro Galerie' angeboten wird -
-w-editmaskExtended-entriespreviewperrow
Definiert, ob die Auswahlbox für die Auswahl 'Bilder pro Zeile' angeboten wird -
-w-editmaskExtended-entryicon
Definiert, ob das Dateiauswahlfeld für den Pfad des Hintergrund-Icon im Akkordeon-Weblic® angeboten wird -
-w-editmaskExtended-fadetime
Definiert, ob die Auswahlbox für die Auswahl 'Automatisch wechseln (nach x Sekunden)' angeboten wird -
-w-editmaskExtended-float
Definiert, ob die Auswahl für die Ausrichtung angeboten wird -
-w-editmaskExtended-height
Definiert, ob die Auswahl für die Höhe bzw. das Seitenverhältnis angeboten wird -
-w-editmaskExtended-hover
Definiert, ob die Auswahl für den Mouseover-Effekt angeboten wird -
-w-editmaskExtended-id
Definiert, ob ein Eingabefeld für ein Individualformat (CSS id) angeboten wird -
-w-editmaskExtended-ifvisible
Definiert, ob die Auswahlbox für die Auswahl 'Einblendeffekt, wenn im sichtbaren Bereich' angeboten wird -
-w-editmaskExtended-initdelay
Definiert, ob die Auswahlbox für die Auswahl 'Animation verzögert starten' angeboten wird -
-w-editmaskExtended-innerheight
Definiert, ob die Auswahl für die Höhe der Inhalte angeboten wird -
-w-editmaskExtended-innerwidth
Definiert, ob die Auswahl für die Breite der Inhalte angeboten wird -
-w-editmaskExtended-isnavanchor
Definiert, ob das Aktivieren der automatischen Verlinkung in der Navigation angeboten wird -
-w-editmaskExtended-layout
Definiert, ob die Auswahlbox für das Layout im Bildelement angeboten wird -
-w-editmaskExtended-lazyload
Zeigt das Auswahlfeld zur Lazy Loading Einstellung von Bildern an -
-w-editmaskExtended-levelHeadline
Definiert, ob die Auswahlbox für die Überschriften-Ebene für Listeneinträge angeboten wird -
-w-editmaskExtended-limitpages
Definiert, ob die Auswahlbox für die Auswahl 'blätterbare Seiten' angeboten wird -
-w-editmaskExtended-link
Definiert, ob das Dateiauswahlfeld für das Setzen eines Linkpfades angeboten wird -
-w-editmaskExtended-margin
Definiert, ob die Auswahl für die Abstände angeboten wird -
-w-editmaskExtended-mouseoverimage
Definiert, ob das Dateiauswahlfeld für den Pfad des Mouseover-Bildes angeboten wird -
-w-editmaskExtended-padding
Definiert, ob die Auswahl für die Abstände der Inhalte (Innenabstände) angeboten wird -
-w-editmaskExtended-parallaxbackground
Definiert, ob die Auswahlbox für das Parallax Hintergrundbild angeboten wird -
-w-editmaskExtended-parallaxbackgrounddirection
Definiert, ob die Auswahlbox für die Parallax Hintergrundbild Scroll-Richtung angeboten wird -
-w-editmaskExtended-parallaxbackgroundspeed
Definiert, ob die Auswahl für den Hintergrundbild Scroll-Faktor angeboten wird -
-w-editmaskExtended-parallaxcontent
Definiert, ob die Auswahlbox für den Parallax Effekt Inhalt angeboten wird -
-w-editmaskExtended-parallaxcontentdirection
Definiert, ob die Auswahlbox für die Parallax Inhalt Scroll-Richtung angeboten wird -
-w-editmaskExtended-pictureaspectratio
Definiert, ob die Auswahlbox für die Auswahl 'Seitenverhältnis' angeboten wird -
-w-editmaskExtended-picturecreatehd
Definiert, ob die Auswahlbox für die Auswahl 'HD Versionen der Bilder generieren' angeboten wird -
-w-editmaskExtended-picturemode
Definiert, ob die Auswahlbox für die Auswahl 'Darstellungsart der Großbilder' angeboten wird -
-w-editmaskExtended-picturepreviewaspectratio
Definiert, ob die Auswahlbox für die Auswahl 'Seitenverhältnis der Vorschaubilder' angeboten wird -
-w-editmaskExtended-picturepreviewmode
Definiert, ob die Auswahlbox für die Auswahl 'Darstellungsart der Vorschaubilder' angeboten wird -
-w-editmaskExtended-position
Definiert, ob die Auswahl für die Position / Ausrichtung angeboten wird -
-w-editmaskExtended-preselectedentry
Definiert, ob das Eingabefeld für die Angabe 'Vorausgewählter Banner' angeboten wird -
-w-editmaskExtended-shadow
Definiert, ob die Auswahl für den Schatten angeboten wird -
-w-editmaskExtended-showtimeonsingledaydates
Definiert, ob die Checkbox für den Veranstaltungsparameter "Uhrzeit bei eintägigen Terminen anzeigen" angeboten wird -
-w-editmaskExtended-showtype
Definiert, ob die Checkbox für den Veranstaltungsparameter "Veranstaltungstyp in Liste anzeigen" angeboten wird -
-w-editmaskExtended-size
Definiert, ob die Auswahl für die Größe angeboten wird -
-w-editmaskExtended-styler
Definiert, ob die Auswahl für den Stil angeboten wird -
-w-editmaskExtended-target
Definiert, ob das Dateiauswahlfeld für die Auswahl des Link-Zieles angeboten wird -
-w-editmaskExtended-thumbnail
Definiert, ob die Auswahl zur Anzeige von Vorschaubildern der Untervariante angezeigt wird. -
-w-editmaskExtended-thumbnailmode
Zeigt das Auswahlfeld zur Definition des Modus der Vorschaubilder an (crop, default, embed) -
-w-editmaskExtended-thumbnailswidth
Zeigt das Eingabefeld zur Definition der Vorschaubildbreite an -
-w-editmaskExtended-title
Definiert, ob das Eingabefeld für die Angabe eines Titels angeboten wird -
-w-editmaskExtended-width
Definiert, ob die Auswahl für die Breite angeboten wird -
-w-embedIfLocalSVG
Definiert, ob eine lokal verfügbare SVG-Datei direkt als SVG-Markup in das HTML-Dokument eingebettet werden soll. In dem Fall lassen sich dann z.B. Farben im CSS anpassen. -
-w-embedtype
Definiert den zu verwendenden Typ zum Einbetten -
-w-entrieslimit
Definiert die Anzahl der aufzulistenden Einträge -
-w-entriesperrow
Definiert die Anzahl an Einträgen pro Zeile -
-w-entryselected
Definiert einen Eigenschaft des selektierten Listeneintrages -
-w-fadetime
Definiert, ob das Wechselintervall von Bannereinträgen aktiviert oder deaktiviert ist -
-w-initon
Legt fest, dass der Banner erst nach dem vollständigen Laden aller Seiteninhalte initialisiert wird (load). -
-w-jquery
Führt den angegebenen jQuery-Code aus. -
-w-levelheadline
Definiert das Level der Überschrift für die Listeneinträge -
-w-maptypestyler-hue
Definiert den Wert für einen individuellen Basisfarbton für eine eingebundene Google Map -
-w-maptypestyler-saturation
Definiert den Wert der Sättigung für den Google Map Stil -
-w-maptypestyler-visibility
Definiert den Wert die Sichtbarkeit für den Google Map Stil -
-w-max-level
Definiert das maximal auswählbare Level im Überschriften-Element -
-w-number-columns
Definiert die Anzahl an Spalten zum mehrspaltigen Inhaltscontainer -
-w-onclick
Deaktiviert das onclick-Ereignis für einen Listeneintrag im Vorschaubereich -
-w-option-linkTarget
Definiert das Link-Ziel eines Listeneintrages -
-w-pause-onmouseover
Definiert, ob der automatische Bannerwechsel bei Mouseover pausiert wird (verfügbar ab CMS 10.x Weblics) -
-w-picture-background-color
Setzt die Hintergrundfarbe für das zu generierende Vorschaubild -
-w-picture-colorspace
Definiert den Graustufen Farbraum für Vorschaubilder -
-w-picture-mode
Definiert den Darstellungsmodus generierter Bilder -
-w-picture-srchover
Definiert Graustufen Vorschaubilder beim Mouseover in Farbe -
-w-prevent-events-ontouch
Verhindert, dass die Seite gescrollt werden kann, wenn man auf dem Banner ist (z.B. bei Tablets). -
-w-quality
Definiert die Qualität eines generierten Banner-Bildes (prozentuale Angabe) -
-w-registerJs
Einbinden einer JavaScript Datei über CSS -
-w-registerJsDefer
Einbinden einer JavaScript (defer) Datei über CSS -
-w-seturlentryonselect
Definiert, ob sich die URL beim Klick ändert -
-w-show-facebookpublisher
Definiert, ob zu den Listeneinträgen die Veröffentlichungsfunktion für Facebook aktiviert ist -
-w-show-googlepublisher
Definiert, ob zu den Listeneinträgen die Veröffentlichungsfunktion für GooglePlus aktiviert ist -
-w-show-twitterpublisher
Definiert, ob zu den Listeneinträgen die Veröffentlichungsfunktion für Twitter aktiviert ist -
-w-showEditbuttonsPreview
Definiert, ob zu den Vorschaubildern eine Bearbeiten-Schaltfläche angezeigt werden soll -
-w-showlightboxtitle
Definiert, ob der Bildtitel in der Lightbox angezeigt wird -
-w-subvariants
Verknüpft die vordefinierten CSS-Only Untervarianten zu einer Hauptvariante (ab CMS 9.x funktionsfähig) -
-w-use-lib
Definiert die zu verwendende Weblication® Library -
-w-use-orig-backgroundimage
Definiert, ob beim Generieren des Hintergrundbildes das Originalbild verwendet werden soll -
-w-use-orig
Definiert, ob beim Generieren des Bannerbildes das Originalbild verwendet werden soll -
-w-usefancybox
Definiert, ob die Fancybox-Funktionalität genutzt werden soll -
-w-wsl
Führt die definierte WSL-Funktion mit entsprechenden Parametern aus.
Weitere Beispiele finden Sie im Entwickler-Blog über die weiterführenden Links unten.