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.
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.
In diesem Beispiel wird der Titel des Widgets fett und in kräftigem Pink dargestellt.
Wenn du komplexere oder umfangreichere Styling-Anpassungen vornehmen möchtest, kannst du mit dem `data-css-url`-Attribut auf eine externe CSS-Datei verweisen.
Hier lädt und wendet das Widget Stile aus der angegebenen `benutzerdefinierten-stilen.css`-Datei an.
Für maximale Flexibilität kannst du beide Attribute zusammen verwenden:
- `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"
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!
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"
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: 27/06/2024
Danke!