Wie man das Wald-Widget und das Carousel-Widget mit CSS anpasst

Hinweis

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

Unser Wald-Widget und das Carousel-Widget bieten 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

Inline CSS

<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

Externe CSS-Datei

<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:

<div
  class="reviewforest-app-xxxx-yyyy-xxxx-yyyy"
  data-inline-css=".header {display: none;}"
></div>

Wichtige Hinweise

1. Stelle sicher, dass der Pfad zur externen CSS-Datei korrekt ist und von deiner HTML-Datei aus zugänglich ist.
2. Der Widget-Inhalt ist in einem Shadow DOM gekapselt, sodass benutzerdefinierte Stile, die über diese Attribute angewendet werden, nur das Widget selbst betreffen.
3. 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.
4. 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!