Wie kann ich die Widget-Codes auf meiner Website vom Design her übers CSS anpassen?

In diesem Artikel erfährst du, wie du über euer CSS Design-Anpassungen an unseren Widget-Codes auf eurer Website vornehmen kannst

TIPP: Die Schriftart sowie die Farben für die Buttons und die Überschrift kannst du ganz einfach direkt in unserem Widget-Code ändern. Wie das funktioniert erfährst du in diesem Artikel.

Damit sich die Widget-Codes noch besser an das CI deiner Website anpassen, kannst du darüber hinaus auch über euer CSS auf eurer Website Änderungen vornehmen. Sieh dir dafür die nachfolgenden zwei Kundenbeispiele an.

Bitte beachte: Unser Logo rechts unten beim letzten Stream darfst du bitte nicht entfernen!

Kundenbeispiel 1 – Sonnenhof Alpendorf:

Kundenbeispiel 2 – Hotel zur Treene:

Du siehst, dass die Streams der zwei Kunden sehr unterschiedlich aussehen. In beiden Fällen liegen aber dieselben Widget-Codes von uns zur Grundlage, es wurden lediglich ein paar Design-Anpassungen der Programmierer am CSS vorgenommen. Im Folgenden findest du die wichtigsten CSS-Klassen dafür im Überblick:

Um z.B. die Ecken der Erlebnis-Kacheln abzurunden, musst du diese CSS-Klassen ansteuern:
.giggle_block .stream-activity
Diese CSS-Klassen steuerst du an, um die Größe der Kacheln zu ändern:
.giggle_stream .g-widget .stream__group-activities a.stream-activity
Für Änderungen an der Überschrift des Streams benötigst du diese CSS-Klassen:
.giggle-widget-v2 .stream__title
Änderungen am Erlebnistitel kannst du über diese CSS-Klassen vornehmen:
.giggle-widget-v2 .stream-simple h3.stream-activity__title
Anpassungen an den Preisen steuerst du über:
.giggle-widget-v2 .stream-activity__currency
oder
.giggle-widget-v2 .stream-activity__top
Den Farbverlauf kannst du hierüber entfernen:
.giggle-widget-v2 .stream-activity__shadow