Wie man das Wald-Widget mit CSS anpasst

Dies gilt nur für das Wald-Widget. Bei anderen Widgets kannst du das CSS direkt einfügen.

Unser Wald-Widget bietet flexible Styling-Optionen durch zwei Schlüsselattribute: data-inline-css für schnelle, inline CSS-Anpassungen und data-css-url zum Verlinken einer externen CSS-Datei für umfangreichere Anpassungen.

Verwendung von Inline-CSS

Für schnelle, kleinere Anpassungen ist das `data-inline-css`-Attribut deine Lösung. Es ermöglicht dir, CSS-Regeln direkt im HTML-Tag anzugeben.

Beispiel

<div
  class="reviewforest-app-xxxyyyxxx"
  data-inline-css=".promo__ttl {color: #ff69b4; font-weight: bold;}"
></div>

In diesem Beispiel wird der Titel des Widgets fett und in kräftigem Pink dargestellt.

Nutzung einer externen CSS-Datei

Wenn du komplexere oder umfangreichere Styling-Anpassungen vornehmen möchtest, kannst du mit dem `data-css-url`-Attribut auf eine externe CSS-Datei verweisen.

Beispiel

<div
  class="reviewforest-app-xxxyyyxxx"
  data-css-url="https://deine-website.de/pfad/zu/benutzerdefinierten-stilen.css"
></div>

Hier lädt und wendet das Widget Stile aus der angegebenen `benutzerdefinierten-stilen.css`-Datei an.

Kombination beider Ansätze

Für maximale Flexibilität kannst du beide Attribute zusammen verwenden:

<script src="https://widgets.reviewforest.org/main.js" defer></script>

<!-- Inline-CSS-Anpassung -->
<div 
  class="reviewforest-app-xxxyyyxxx"
  data-inline-css=".promo__ttl {color: #ff69b4; font-weight: bold;}"
></div>

<!-- Anpassung mit externer CSS-Datei -->
<div
  class="reviewforest-app-xxxyyyxxx"
  data-css-url="https://deine-website.de/pfad/zu/benutzerdefinierten-stilen.css"
></div>

<!-- Kombinierte Anpassung -->
<div
  class="reviewforest-app-xxxyyyxxx"
  data-inline-css=".promo__ttl {color: #ff69b4; font-weight: bold;}"
  data-css-url="https://deine-website.de/pfad/zu/benutzerdefinierten-stilen.css"
></div>

Details zu den Attributen

- `data-inline-css`: Wendet CSS-Regeln direkt an. Perfekt für schnelle Anpassungen.
- Beispiel: data-inline-css=".promo__ttl {color: #ff69b4; font-weight: bold;}"
- `data-css-url`: Verlinkt auf eine externe CSS-Datei. Ideal für umfassende Styling-Anpassungen.
- Beispiel: data-css-url="https://deine-website.de/pfad/zu/benutzerdefinierten-stilen.css"

Anwendungsfälle

Ausblenden des Widget Menüs

Um das Menü des Widgets nicht anzuzeigen, kann die Zeile data-inline-css=”.header {display: none}“ in das Widget-Snippet eingefügt werden.
Beispiel:

<script src="https://widgets.reviewforest.org/main.js" defer></script>
    <div
      class="reviewforest-app-xxxx-yyyy-xxxx-yyyy"
      data-inline-css=".header {display: none}"
    ></div>

Wichtige Hinweise

Stelle sicher, dass der Pfad zur externen CSS-Datei korrekt ist und von deiner HTML-Datei aus zugänglich ist.
Der Widget-Inhalt ist in einem Shadow DOM gekapselt, sodass benutzerdefinierte Stile, die über diese Attribute angewendet werden, nur das Widget selbst betreffen.
Wenn du data-css-url verwendest, stelle sicher, dass dein Server Cross-Origin Resource Sharing (CORS) erlaubt, falls die CSS-Datei auf einer anderen Domain gehostet wird.
Für komplexe Layouts oder responsive Designs empfehlen wir die Verwendung des externen CSS-Datei-Ansatzes.

Durch die Nutzung dieser Attribute kannst du das Erscheinungsbild deines Widgets nahtlos an das Design deiner Website anpassen und deine spezifischen Stilanforderungen erfüllen.

Benötigst du weitere Unterstützung? Zögere nicht, dich an unser Support-Team zu wenden!

Aktualisiert am: 24/09/2024