Anpassen einer Bannerslider Variante über CSS-Only

Nutzbar ab: Version 008.003.052.000

07. Mär 2014

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.

Am Beispiel der 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

Banner-Variante 40 (Bild, mehrspaltiger Teasesr unten) per Klickzoom
Banner-Variante 40 (Bild, mehrspaltiger Teasesr unten) per Klick

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)

Banner-Variante 40 (Bild, mehrspaltiger Teasesr unten) per Mouseoverzoom
Banner-Variante 40 (Bild, mehrspaltiger Teasesr unten) per Mouseover

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!

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG