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.

Neu 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.

Beachten Sie, daß alle nicht universellen CSS-Only-Eigenschaften meist über aktuelle Weblic® 2.x Versionen umgesetzt sind! 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!

Hinweise

  • 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.

    Universell
  • -w-add-data

    Setzen von HTML5 Data-Attributen

    Universell
  • -w-add-events

    Ergänzt das Element um das angegebene JavaScript-Ereignis. (siehe auch Artikel)

    Universell
  • -w-add-objectdata

    Ergänzt das Element um die angegebenen Objektdaten

    default.wFilelist.php
  • -w-addCopyright

    Ergänzt ein Bild um den Copyright Hinweis

    picture.standard.wItem.php
  • -w-adddescription

    Definiert, ob die Beschreibung hinzugefügt werden soll

    gallery.wFilelist.php
  • -w-addsize

    Ergänzt einen Listeneintrag um die Dateigröße der ausgelesenen Datei

    gallery.wFilelist.php
  • -w-addsrc

    Ergänzt einen Listeneintrag um den Link zur ausgelesenen Datei

    gallery.wFilelist.php
  • -w-allow-enlargement

    Definiert, ob bei der Bildgenerierung eine eventuelle Vergrößerung vorgenommen wird

    bannerSlider.wFilelist.php
  • -w-allow-touch

    Definiert, ob ein Element touchfähig ist

    bannerSlider.wFilelist.php
  • -w-animation-direction

    Definiert die Laufrichtung durchlaufender Galerien

    gallery.wFilelist.php
  • -w-animation-zoom

    Definiert den Zoomfaktor einer Animation (als Ganzzahl oder Dezimalzahl mit Punkt getrennt (z.B. 1.8)

    gallery.wFilelist.php
  • -w-animation

    Definiert die Art der Animation beim Wechsel eines Listeneintrages

    bannerSlider.wFilelist.php
  • -w-aspectratio

    Definiert das Seitenverhältnis von generierten Bildern

    default.wFilelist.php
  • -w-background-target

    Definiert das Ziel eines Hintergrund-Elementes (z.B. Bannerbild)

    bannerSlider.wFilelist.php
  • -w-clickable

    Definiert, ob ein Element vom Anwender angeklickt werden kann (onclick)

    default.wFilelist.php
  • -w-color-data-selectable

    Definiert, ob die Auswahlbox für die Auswahl von Farbwerten angeboten wird

    chart.standard.wItem.php
  • -w-color-data

    Stellt Farbwerte für die Diagrammdarstellung zur Verfügung

    chart.standard.wItem.php
  • -w-create-hd

    Definiert, ob ein Bild in HD-Qualität generiert werden soll

    gallery.wFilelist.php
  • -w-date-format

    Setzt das Datumsformat

    default.wFilelist.php
  • -w-date-lang

    Setzt die Sprache zum Datumsformat

    default.wFilelist.php
  • -w-date-showalways

    Definiert, ob zu einem Listeneintrag einer Standardseite das Datum angezeigt werden soll

    default.wFilelist.php
  • -w-display

    Löscht das Element serverseitig aus dem Ergebnisbaum der Seite.

    Universell
  • -w-dom-appendto

    Fügt das Element clientseitig als letztes Unterelement des Zielelementes ein.

    Universell
  • -w-dom-insertafter

    Fügt das Element clientseitig nach dem Zielelement ein.

    Universell
  • -w-dom-insertbefore

    Fügt das Element clientseitig vor dem Zielelement ein.

    Universell
  • -w-dom-prependto

    Fügt das Element clientseitig als erstes Unterelement des Zielelementes ein.

    Universell
  • -w-editmaskExtended-ajax

    Zeigt das Auswahlfeld zum Blättern einer Liste über Ajax

    default.wFilelist.php
  • -w-editmaskExtended-anchor

    Definiert, ob das Eingabefeld für die Angabe eines Ankers angeboten wird

    container.section.wItem.php
  • -w-editmaskExtended-animation

    Definiert, ob die Auswahlbox für die Auswahl 'Animation' angeboten wird

    bannerSlider.wFilelist.php
  • -w-editmaskExtended-animationduration

    Definiert, ob die Auswahlbox für die Auswahl 'Wechselgeschwindigkeit' angeboten wird

    bannerSlider.wFilelist.php
  • -w-editmaskExtended-animationzoom

    Definiert, ob die Auswahlbox für die Auswahl 'Zoomfaktor' angeboten wird

    gallery.wFilelist.php
  • -w-editmaskExtended-backgroundcolor

    Definiert, ob die Auswahl für die Farbewerte der Hintergrundfarbe angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-backgroundcolorpicker

    Definiert, ob die Auswahl für die Farbewerte der Hintergrundfarbe angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-backgroundgradient

    Definiert, ob die Auswahl für die Verlaufseffekte angeboten wird

    socialButton.standard.wItem.php
  • -w-editmaskExtended-backgroundimage

    Definiert, ob das Dateiauswahlfeld für den Pfad des Hintergrundbildes angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-backgroundpositionclasses

    Definiert die Auswahlbox mit den gewünschten Werten für die Position des Hintergrundbildes

    container.box.wItem.php
  • -w-editmaskExtended-backgroundvideo

    Definiert, ob das Dateiauswahlfeld für den Pfad des Hintergrundvideo angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-border

    Definiert, ob die Auswahl für den Rahmen/Border angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-borderradius

    Definiert, ob die Auswahl für den Borderradius angeboten wird

    socialButton.standard.wItem.php
  • -w-editmaskExtended-categoriesquickfilter

    Zeigt das Eingabefeld für den Kategorien Quickfilter an

    default.wFilelist.php
  • -w-editmaskExtended-class

    Definiert, ob das Eingabefeld für die Angabe einer CSS-Klasse angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-classes

    Definiert die Auswahlbox mit den gewünschten Werten für eine CSS-Klasse

    container.box.wItem.php
  • -w-editmaskExtended-cols

    Definiert, ob die Auswahl für die Anzahl der Spalten angeboten wird

    default.wFilelist.php
  • -w-editmaskExtended-copyrighttext

    Definiert, ob das Eingabefeld für einen Copyright Hinweis im Bildelement angeboten wird

    picture.standard.wItem.php
  • -w-editmaskExtended-date

    Definiert, ob die Auswahl für die Anzeige des Datums angeboten wird

    default.wFilelist.php
  • -w-editmaskExtended-description

    Definiert, ob die Auswahl für die Anzeige der Beschreibung angeboten wird

    default.wFilelist.php
  • -w-editmaskExtended-entriespreviewlimit

    Definiert, ob die Auswahlbox für die Auswahl 'Bilder pro Galerie' angeboten wird

    album.wFilelist.php
  • -w-editmaskExtended-entriespreviewperrow

    Definiert, ob die Auswahlbox für die Auswahl 'Bilder pro Zeile' angeboten wird

    album.wFilelist.php
  • -w-editmaskExtended-entryicon

    Definiert, ob das Dateiauswahlfeld für den Pfad des Hintergrund-Icon im Akkordeon-Weblic® angeboten wird

    container.accordion.wItem.php
  • -w-editmaskExtended-fadetime

    Definiert, ob die Auswahlbox für die Auswahl 'Automatisch wechseln (nach x Sekunden)' angeboten wird

    bannerSlider.wFilelist.php
  • -w-editmaskExtended-float

    Definiert, ob die Auswahl für die Ausrichtung angeboten wird

    socialButton.standard.wItem.php
  • -w-editmaskExtended-height

    Definiert, ob die Auswahl für die Höhe bzw. das Seitenverhältnis angeboten wird

    map.google.wItem.php
  • -w-editmaskExtended-hover

    Definiert, ob die Auswahl für den Mouseover-Effekt angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-id

    Definiert, ob ein Eingabefeld für ein Individualformat (CSS id) angeboten wird

    container.layout.wItem.php
  • -w-editmaskExtended-ifvisible

    Definiert, ob die Auswahlbox für die Auswahl 'Einblendeffekt, wenn im sichtbaren Bereich' angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-initdelay

    Definiert, ob die Auswahlbox für die Auswahl 'Animation verzögert starten' angeboten wird

    bannerSlider.wFilelist.php
  • -w-editmaskExtended-innerheight

    Definiert, ob die Auswahl für die Höhe der Inhalte angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-innerwidth

    Definiert, ob die Auswahl für die Breite der Inhalte angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-lazyload

    Zeigt das Auswahlfeld zur Lazy Loading Einstellung von Bildern an

    default.wFilelist.php
  • -w-editmaskExtended-levelheadline

    Definiert, ob die Auswahlbox für die Überschriften-Ebene für Listeneinträge angeboten wird

    default.wFilelist.php
  • -w-editmaskExtended-limitpages

    Definiert, ob die Auswahlbox für die Auswahl 'blätterbare Seiten' angeboten wird

    gallery.wFilelist.php
  • -w-editmaskExtended-link

    Definiert, ob das Dateiauswahlfeld für das Setzen eines Linkpfades angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-margin

    Definiert, ob die Auswahl für die Abstände angeboten wird

    socialButton.standard.wItem.php
  • -w-editmaskExtended-mouseoverimage

    Definiert, ob das Dateiauswahlfeld für den Pfad des Mouseover-Bildes angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-padding

    Definiert, ob die Auswahl für die Abstände der Inhalte (Innenabstände) angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-parallaxbackground

    Definiert, ob die Auswahlbox für das Parallax Hintergrundbild angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-parallaxbackgrounddirection

    Definiert, ob die Auswahlbox für die Parallax Hintergrundbild Scroll-Richtung angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-parallaxbackgroundspeed

    Definiert, ob die Auswahl für den Hintergrundbild Scroll-Faktor angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-parallaxcontent

    Definiert, ob die Auswahlbox für den Parallax Effekt Inhalt angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-parallaxcontentdirection

    Definiert, ob die Auswahlbox für die Parallax Inhalt Scroll-Richtung angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-pictureaspectratio

    Definiert, ob die Auswahlbox für die Auswahl 'Seitenverhältnis' angeboten wird

    gallery.wFilelist.php
  • -w-editmaskExtended-picturecreatehd

    Definiert, ob die Auswahlbox für die Auswahl 'HD Versionen der Bilder generieren' angeboten wird

    gallery.wFilelist.php
  • -w-editmaskExtended-picturemode

    Definiert, ob die Auswahlbox für die Auswahl 'Darstellungsart der Großbilder' angeboten wird

    gallery.wFilelist.php
  • -w-editmaskExtended-picturepreviewaspectratio

    Definiert, ob die Auswahlbox für die Auswahl 'Seitenverhältnis der Vorschaubilder' angeboten wird

    album.wFilelist.php
  • -w-editmaskExtended-picturepreviewmode

    Definiert, ob die Auswahlbox für die Auswahl 'Darstellungsart der Vorschaubilder' angeboten wird

    album.wFilelist.php
  • -w-editmaskExtended-position

    Definiert, ob die Auswahl für die Position / Ausrichtung angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-preselectedentry

    Definiert, ob das Eingabefeld für die Angabe 'Vorausgewählter Banner' angeboten wird

    bannerSlider.wFilelist.php
  • -w-editmaskExtended-shadow

    Definiert, ob die Auswahl für den Schatten angeboten wird

    socialButton.standard.wItem.php
  • -w-editmaskExtended-showtimeonsingledaydates

    Definiert, ob die Checkbox für den Veranstaltungsparameter "Uhrzeit bei eintägigen Terminen anzeigen" angeboten wird

    default.wFilelist.php
  • -w-editmaskExtended-showtype

    Definiert, ob die Checkbox für den Veranstaltungsparameter "Veranstaltungstyp in Liste anzeigen" angeboten wird

    default.wFilelist.php
  • -w-editmaskExtended-size

    Definiert, ob die Auswahl für die Größe angeboten wird

    socialButton.standard.wItem.php
  • -w-editmaskExtended-styler

    Definiert, ob die Auswahl für den Stil angeboten wird

    map.google.wItem.php
  • -w-editmaskExtended-target

    Definiert, ob das Dateiauswahlfeld für die Auswahl des Link-Zieles angeboten wird

    container.box.wItem.php
  • -w-editmaskExtended-thumbnail

    Definiert, ob die Auswahl zur Anzeige von Vorschaubildern der Untervariante angezeigt wird.

    default.wFilelist.php
  • -w-editmaskExtended-thumbnailmode

    Zeigt das Auswahlfeld zur Definition des Modus der Vorschaubilder an (crop, default, embed)

    default.wFilelist.php
  • -w-editmaskExtended-thumbnailswidth

    Zeigt das Eingabefeld zur Definition der Vorschaubildbreite an

    default.wFilelist.php
  • -w-editmaskExtended-title

    Definiert, ob das Eingabefeld für die Angabe eines Titels angeboten wird

    container.section.wItem.php
  • -w-editmaskExtended-width

    Definiert, ob die Auswahl für die Breite angeboten wird

    map.google.wItem.php
  • -w-embedtype

    Definiert den zu verwendenden Typ zum Einbetten

    bannerSlider.wFilelist.php
  • -w-entrieslimit

    Definiert die Anzahl der aufzulistenden Einträge

    album.wFilelist.php
  • -w-entriesperrow

    Definiert die Anzahl an Einträgen pro Zeile

    album.wFilelist.php
  • -w-entryselected

    Definiert einen Eigenschaft des selektierten Listeneintrages

    gallery.wFilelist.php
  • -w-fadetime

    Definiert, ob das Wechselintervall von Bannereinträgen aktiviert oder deaktiviert ist

    bannerSlider.wFilelist.php
  • -w-initon

    Legt fest, dass der Banner erst nach dem vollständigen Laden aller Seiteninhalte initialisiert wird (load).

    bannerSlider.wFilelist.php
  • -w-jquery

    Führt den angegebenen jQuery-Code aus.

    Universell
  • -w-levelheadline

    Definiert das Level der Überschrift für die Listeneinträge

    default.wFilelist.php
  • -w-maptypestyler-saturation

    Definiert den Wert der Sättigung für den Google Map Stil

    map.google.wItem.php
  • -w-maptypestyler-visibility

    Definiert den Wert die Sichtbarkeit für den Google Map Stil

    map.google.wItem.php
  • -w-max-level

    Definiert das maximal auswählbare Level im Überschriften-Element

    headline.text.wItem.php
  • -w-number-columns

    Definiert die Anzahl an Spalten zum mehrspaltigen Inhaltscontainer

    container.standard.wItem.php
  • -w-onclick

    Deaktiviert das onclick-Ereignis für einen Listeneintrag im Vorschaubereich

    gallery.wFilelist.php
  • -w-pause-onmouseover

    Definiert, ob der automatische Bannerwechsel bei Mouseover pausiert wird (verfügbar ab CMS 10.x Weblics)

    bannerSlider.wFilelist.php
  • -w-picture-background-color

    Setzt die Hintergrundfarbe für das zu generierende Vorschaubild

    gallery.wFilelist.php
  • -w-picture-colorspace

    Definiert den Graustufen Farbraum für Vorschaubilder

    default.wFilelist.php
  • -w-picture-mode

    Definiert den Darstellungsmodus generierter Bilder

    default.wFilelist.php
  • -w-picture-srchover

    Definiert Graustufen Vorschaubilder beim Mouseover in Farbe

    default.wFilelist.php
  • -w-prevent-events-ontouch

    Verhindert, dass die Seite gescrollt werden kann, wenn man auf dem Banner ist (z.B. bei Tablets).

    bannerSlider.wFilelist.php
  • -w-quality

    Definiert die Qualität eines generierten Banner-Bildes (prozentuale Angabe)

    bannerSlider.wFilelist.php
  • -w-registerJs

    Einbinden einer JavaScript Datei über CSS

    Universell
  • -w-seturlentryonselect

    Definiert, ob sich die URL beim Klick ändert

    bannerSlider.wFilelist.php
  • -w-show-facebookpublisher

    Definiert, ob zu den Listeneinträgen die Veröffentlichungsfunktion für Facebook aktiviert ist

    default.wFilelist.php
  • -w-show-googlepublisher

    Definiert, ob zu den Listeneinträgen die Veröffentlichungsfunktion für GooglePlus aktiviert ist

    default.wFilelist.php
  • -w-show-twitterpublisher

    Definiert, ob zu den Listeneinträgen die Veröffentlichungsfunktion für Twitter aktiviert ist

    default.wFilelist.php
  • -w-showEditbuttonsPreview

    Definiert, ob zu den Vorschaubildern eine Bearbeiten-Schaltfläche angezeigt werden soll

    gallery.wFilelist.php
  • -w-showlightboxtitle

    Definiert, ob der Bildtitel in der Lightbox angezeigt wird

    gallery.wFilelist.php
  • -w-subvariants

    Verknüpft die vordefinierten CSS-Only Untervarianten zu einer Hauptvariante (ab CMS 9.x funktionsfähig)

    default.wFilelist.php
  • -w-use-lib

    Definiert die zu verwendende Weblication® Library

    container.accordion.wItem.php
  • -w-use-orig

    Definiert, ob beim Generieren des Bannerbildes das Originalbild verwendet werden soll

    bannerSlider.wFilelist.php
  • -w-usefancybox

    Definiert, ob die Fancybox-Funktionalität genutzt werden soll

    gallery.wFilelist.php
  • -w-wsl

    Führt die definierte WSL-Funktion mit entsprechenden Parametern aus.

    Universell

Weitere Beispiele finden Sie im Entwickler-Blog über die weiterführenden Links unten.

Entwicklerbereich Weblication® CMS - © Scholl Communications AG