Anpassen einer Bannerslider Variante über CSS-Only
17. August 2018
weblication cms css css-only weblics banner slider teaser
CSS-Only Varianten von Weblics® können Sie über CSS individuell anpassen
Mit den Weblics® stehen Ihnen zahlreiche fertige Anwendungen zur Verfügung, die Sie bei Bedarf individuell anpassen können.
Beispiel 1: Bannervariante 40 mit Mouseover umsetzen
Am Beispiel der BASE Classic Bannervariante "Bild, mehrspaltiger Teaser unten" (Variante 40) demonstrieren wir Ihnen, wie Sie diese Bannervariante anpassen können (Stand: März 2014). Die Banner sollen im Gegensatz zur Standardauslieferung nicht per Klick auf den Teaser wechseln, sondern schon durch Mouseover. An der Ansicht bzw. Darstellung des Banners ändert sich sonst nichts.
Vor der Anpassung:
Beispiel: Auszug aus der design.css zur Bildergalerie-Variante 0 (Großansicht mit Diavorschau horizontal)
/* ... */ .listBannerSlider_var40 .listEntriesPreview .listEntry {display:table-cell;cursor:pointer;box-sizing:border-box} /* ... */
Nach der Anpassung (visuell gleich):
Beispiel: Auszug aus der design.css zur Banner-Variante 040
/* ... */ .listBannerSlider_var040 .listEntriesPreview .listEntry {-w-jquery:jQuery(this).mouseover(function()\007BjQuery(this).trigger('click')\007D);display:table-cell;cursor:pointer;box-sizing:border-box} /* ... */
Anhand diesem Beispiel sehen Sie, wie einfach eine bestehende CSS-Only-Variante nach eigenen Vorstellungen angepasst werden kann. Zur Veranschaulichung zeigen die oben ersichtlichen Quelltextbeispiele zur Standardauslieferung (var40) und angepassten Variante (als var040 benannt) nur die zu ändernde Zeile.
Das Bannerbild wird also mit -w-jquery per Mouseover über den Preview-Eintrag (mehrspaltiger Teaser unten) gewechselt.
Fertig ist die individuelle Banner-Variante über reine CSS-Anpassung!
Beispiel 2: Bannervariante 99 mit Zusatzbild versehen
Am Beispiel der BASE Classic Bannervariante "Banner Standard" (Variante 99) demonstrieren wir Ihnen, wie Sie diese Bannervariante (Stand: August 2018) anpassen können. Die Banner sollen im Gegensatz zur Standardauslieferung zusätzlich ein Bild im Infolayer des Banners bekommen.
Vor der Anpassung:
Beispiel: Auszug aus der design.css zur Banner-Variante 99 (Banner Standard)
/* ... */ .listBannerSlider_var99 .listEntriesPreview .listEntryImage {-w-display:none;width:48px;height:32px;display:none;-w-picture-mode:crop;-w-quality:default;} /* ... */
Nach der Anpassung:
Beispiel: Auszug aus der design.css zur Banner-Variante 99a
/* ... */ .listBannerSlider_var99a .listEntriesPreview .listEntryImage {-w-jquery:jQuery(this).removeClass('listEntryImage').addClass('listEntryThumbnail').appendTo(jQuery(this).closest('.listInner').find('.listEntries .listEntriesInner .listEntry:nth-child(' + (jQuery(this).parent().parent().index() + 1) + ') .listEntryInfoLayer .listEntryInfoLayerInner'));width:240px;-w-picture-mode:default} .listBannerSlider_var99a .listEntries .listEntryInfoLayer .listEntryThumbnail {margin-top:12px !important;} /* ... */
Anhand diesem Beispiel sehen Sie, wie einfach eine bestehende CSS-Only-Variante nach eigenen Vorstellungen angepasst werden kann. Zur Veranschaulichung zeigen die oben ersichtlichen Quelltextbeispiele zur Standardauslieferung (var99) und angepassten Variante (als var99a benannt) nur die zu ändernden Zeilen.
Das zusätzliche Bild wird also mit -w-jquery gesetzt und verschoben und greift auf das in der Banner-Folie (z.B. slide1.php) angegebene "Vorschau-, Auswahl- oder Zusatzbild" zurück)
Fertig ist die individuelle Banner-Variante über reine CSS-Anpassung!
- Was bedeutet „CSS-Only Varianten“ bei Weblics® und was kann man damit anpassen?
- CSS-Only Varianten von Weblics® können Sie über CSS individuell anpassen. Damit lassen sich bestehende Banner-Varianten (aus dem Pool fertiger Anwendungen) so ändern, dass sie z. B. anders reagieren oder zusätzliche Inhalte anzeigen.
- Ab welcher Version sind die beschriebenen Anpassungen nutzbar?
- Die Inhalte gelten „nutzbar ab: Version“ (im bereitgestellten Text steht kein konkreter Versionswert).
- Wie kann die Banner-Variante 40 so angepasst werden, dass der Teaser per Mouseover statt Klick wechselt?
- Bei der Bannervariante „40“ soll der Wechsel nicht per Klick erfolgen, sondern bereits durch Mouseover. Dazu wird in der CSS-Only-Variante eine angepasste Logik auf den Preview-Eintrag gesetzt, sodass beim Mouseover automatisch ein „click“-Event ausgelöst wird (visuell bleibt sonst alles gleich).
- Welche Änderungen sind bei Beispiel 1 (Variante 40 zu var040) in der CSS-Datei nötig?
- Im CSS wird die Klasse der Variante so erweitert/umbenannt, dass anstelle der Standard-Zeile eine angepasste Zeile für die Mouseover-Logik verwendet wird. Im Beispiel wird der Preview-Eintrag so versehen, dass bei Mouseover ein Trigger auf „click“ ausgeführt wird, während die Darstellung (z. B. Display/Cursor) ansonsten beibehalten wird.
- Wie benennt man die angepasste Variante bei Beispiel 1 (Variante 40)?
- Die angepasste Variante wird im Beispiel als „var040“ benannt (statt der Standard-Variante „var40“).
- Wie kann die Banner-Variante 99 so angepasst werden, dass im Infolayer ein Zusatzbild angezeigt wird?
- Bei der Bannervariante „99“ wird zusätzlich ein Bild im Infolayer des Banners ausgegeben. Dafür wird in der Anpassung eine neue Variante (im Beispiel „99a“) erstellt, die das Zusatzbild-Element setzt, verschiebt und die Darstellung entsprechend konfiguriert.
- Welche Anpassungen werden im Beispiel 2 (Variante 99 zu var99a) in der CSS-Datei vorgenommen?
- Im Beispiel wird zunächst in der Standardvariante (var99) das Bild-Element (listEntryImage) ausgeblendet bzw. in der Grundkonfiguration so eingestellt, dass es nicht sichtbar ist. Nach der Anpassung (var99a) wird das Bild-Element über die zusätzliche CSS-Only-Logik per jQuery gesetzt, mit Klassen versehen, in den Infolayer verschoben und in der passenden Breite/Stimmung dargestellt.
- Wie wird die angepasste Variante bei Beispiel 2 benannt?
- Die angepasste Variante aus der Banner-Variante „99“ wird im Beispiel als „var99a“ benannt.
- Woher kommt das Zusatzbild bei Beispiel 2 (Variante 99a)?
- Das zusätzliche Bild wird laut Text mit -w-jquery gesetzt und greift auf das in der Banner-Folie (z. B. slide1.php) angegebene „Vorschau-, Auswahl- oder Zusatzbild“ zurück.
- Bleiben die Banner-Ausgaben bei Beispiel 1 trotz Mouseover optisch gleich?
- Ja. Im Beispiel wird ausdrücklich beschrieben, dass sich „die Ansicht bzw. Darstellung des Banners“ ansonsten nicht ändert und der Effekt nur den Wechselmechanismus (Mouseover statt Klick) betrifft.
- Was ist das zentrale Prinzip der beschriebenen CSS-Anpassungen?
- Bestehende CSS-Only-Varianten können nach eigenen Vorstellungen angepasst werden, indem nur die relevanten Zeilen in der design.css bzw. an den betreffenden Variantenklassen geändert werden (die Beispiele zeigen jeweils „nur die zu ändernde Zeile“).