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!