Farben und Stil deines Widgets anpassen

Mit Widget V2 kannst du deine Badge- und Carousel-Widgets an deine Website anpassen. Dafür gibt es zwei Wege: visuelle Regler im Dashboard ganz ohne Code, oder CSS für Entwickler, die volle Kontrolle wollen.

Hinweis

Die Farb- und Stil-Anpassung gibt es für V2-Widgets. Wenn dein Widget noch Version 1.0 anzeigt, aktualisiere es zuerst auf V2.

Im Dashboard anpassen (ohne Code)

1. Öffne Website Widgets, wechsle zum Tab Deine Widgets und klick auf das Zahnrad-Symbol neben einem V2-Widget.

2. In Schritt 1 wählst du eine helle oder dunkle Basis und entscheidest, welche Elemente angezeigt werden (Logo, Button, Verifizierung).

3. Geh zu Schritt 2: Erscheinungsbild. Hier stellst du Farben und Form ein.

   Widget: Hintergrund, Text, Sekundärer Text, Rahmen, Rahmenbreite und Widget-Ecken (Eckenradius).

   Schaltfläche: Hintergrund, Hintergrund beim Hover, Text, Rahmen, Rahmenbreite und Schaltflächen-Ecken.

   Sterne: Farben für aktive und inaktive Sterne.

   Schublade (öffnet sich bei Klick): Farben und Breite für das Panel, das sich öffnet, wenn jemand auf das Badge klickt, inklusive Scrollbalken, Trennlinien, gedämpftem Text, Links und Tooltips.

   

4. Beobachte die Live-Vorschau rechts, während du Werte änderst, und speichere. Deine Website übernimmt den neuen Look automatisch.

Tipp

Klick auf ein Farbfeld, um eine Farbe visuell zu wählen, oder tippe einen Hex-Wert ein (zum Beispiel #1D2023) für eine exakte Markenfarbe.

Mit CSS anpassen (für Entwickler)

V2-Widgets stellen eine Reihe von CSS-Variablen (CSS Custom Properties) als öffentliche Styling-Schnittstelle bereit. Setz sie auf dem Container-Element des Widgets auf deiner Website:

<div class="reviewforest-app-xxxxxxxx"></div>

<style>
  .reviewforest-app-xxxxxxxx {
    --rf-bg: #ffffff;
    --rf-text: #1a1a1a;
    --rf-primary: #2f8f4e;        /* Button-Hintergrund */
    --rf-primary-text: #ffffff;   /* Text auf dem Button */
    --rf-radius: 8px;
    --rf-font: "Inter", sans-serif;
  }
</style>

Ersetze xxxxxxxx durch die ID deines Widgets (sie steht in der class des Snippets, das du im Dashboard kopiert hast). Du musst nur die Eigenschaften setzen, die du ändern willst — alles andere behält seinen Standardwert.

Farben, Text und Form (alle Widgets)

Variable	Steuert
--rf-primary	Hintergrund von Button / Call-to-Action
--rf-primary-text	Textfarbe auf dem Button
--rf-primary-hover	Button-Hintergrund beim Hover
--rf-bg	Hintergrundfarbe
--rf-text	Haupttextfarbe
--rf-text-secondary	Sekundäre Textfarbe
--rf-text-muted	Gedämpfte / Meta-Textfarbe
--rf-border	Rahmenfarbe
--rf-border-subtle	Trennlinie / feine Linie
--rf-radius	Eckenradius (Container)
--rf-radius-button	Eckenradius (Buttons)
--rf-font	Schriftart
--rf-font-size	Basis-Schriftgröße
--rf-focus	Farbe des Fokus-Rahmens (Tastaturnavigation)
--rf-link	Linkfarbe
--rf-link-hover	Linkfarbe beim Hover
--rf-star-filled	Farbe gefüllter Sterne
--rf-star-empty	Farbe leerer Sterne
--rf-warning-bg	Hintergrund Warnhinweis
--rf-warning-text	Text Warnhinweis

Nur Badge-Widgets

Variable	Steuert
--rf-shadow	Schlagschatten des Badges
--rf-border-width	Rahmenbreite des Badges
--rf-badge-padding	Innenabstand des Badges
--rf-badge-gap	Abstand zwischen Badge-Bereichen
--rf-badge-hover	Hintergrund des Badges beim Hover

Schublade (öffnet sich bei Klick)

Variable	Steuert
--rf-drawer-width	Breite der Schublade
--rf-drawer-gap	Abstand zwischen den Abschnitten
--rf-drawer-shadow	Schlagschatten der Schublade
--rf-drawer-scrollbar	Farbe des Scrollbalkens
--rf-tooltip-bg	Tooltip-Hintergrund
--rf-tooltip-text	Tooltip-Textfarbe

Nur Testimonial-Carousel

Variable	Steuert
--rf-slide-width	Breite einer Karte
--rf-slide-gap	Abstand zwischen Karten
--rf-dot-active	Farbe des aktiven Navigationspunkts
--rf-dot-inactive	Farbe inaktiver Navigationspunkte
--rf-dot-scale	Skalierung des aktiven Punkts
--rf-dots-width	Breite des Punkte-Bereichs
--rf-button-border	Rahmenfarbe der Navigationsbuttons
--rf-button-border-width	Rahmenbreite der Navigationsbuttons

Dark Mode

Um ein Widget auf seine dunkle Palette umzustellen, füge dem Container-Element das Attribut data-rf-theme="dark" hinzu: <div class="reviewforest-app-xxxxxxxx" data-rf-theme="dark"></div>. Jeder --rf-*-Wert hat einen eigenen Dark-Mode-Standard, und jeder Wert, den du selbst setzt, gewinnt gegenüber dem hellen und dem dunklen Standard.

Dunkle Button-Farbe gewünscht?

--rf-primary ist der Hintergrund des Buttons, keine Akzentfarbe. Wenn du sie auf eine dunkle Farbe setzt, setz auch --rf-primary-text auf eine helle Farbe, damit die Button-Beschriftung lesbar bleibt.

Schriften müssen bereits geladen sein

Wenn du --rf-font auf eine Webschrift wie Inter setzt, stell sicher, dass diese Schrift auf deiner Seite bereits geladen ist. Das Widget lädt keine Webschriften für dich.

Von V1 umgestiegen?

V1 nutzte die Attribute data-inline-css und data-css-url fürs Styling. V2-Badge- und Carousel-Widgets verwenden stattdessen die oben genannten CSS-Variablen. Das klassische Bewertungswald-Widget nutzt weiterhin die alte Methode, siehe Wie man das Bewertungswald-Widget mit CSS anpasst.

Warum dein Styling bleibt, wo es soll

V2-Widgets rendern in einem isolierten Container (einem Shadow DOM). Das heißt: Deine Anpassungen greifen sauber im Widget, und das Widget verändert nie versehentlich das Aussehen vom Rest deiner Website.

Website Widgets öffnen