Anpassen einer Bannerslider Variante über CSS-Only

Nutzbar ab: Version

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:

Banner-Variante 40 (Bild, mehrspaltiger Teasesr unten) per Klick
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 Mouseover
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!

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:

Banner-Variante 99 (Banner Standard)
Banner-Variante 99 (Banner Standard)

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:

Banner-Variante 99a (Banner Standard mit Zusatzbild)
Banner-Variante 99a (Banner Standard mit Zusatzbild)

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!