Design-Tipps
Benutzerdefiniertes CSS für das Bewertungs-Widget
In diesem Leitfaden
CSS und Widget-Klassen verstehen
Verfügbare Style-Klassen
So verwenden Sie die Style-Contract-Tabelle
So erstellen Sie benutzerdefiniertes CSS für Ihr Widget
CSS-Tipps für Desktop und Mobilgeräte
Mirror App-Widgets bieten eine breite Palette an integrierten Styling-Optionen. Wenn Sie jedoch mehr Kontrolle benötigen, können Sie benutzerdefiniertes CSS verwenden, um das Erscheinungsbild fein abzustimmen und das Widget perfekt an das Design Ihrer Website anzupassen.
CSS und Widget-Klassen verstehen
CSS (Cascading Style Sheets) ist eine Sprache, die das Aussehen von Elementen auf einer Seite steuert. Während HTML die Struktur definiert – Text, Bilder, Schaltflächen –, kümmert sich CSS um die visuelle Darstellung: Farben, Schriftarten, Abstände, Rahmen und das Layout.
CSS funktioniert, indem es Elemente auswählt und Stile auf sie anwendet. Sie können Elemente über ihre HTML-Tags, Klassen oder IDs ansprechen.
Um benutzerdefiniertes CSS auf Ihr Widget anzuwenden, müssen Sie zunächst wissen, welche Klassen verfügbar sind. Diese Klassennamen sind in der Style-Contract-Tabelle auf dieser Seite aufgeführt. Verwenden Sie ausschließlich diese Klassen – sie sind stabil und sicher für das Styling.
Verfügbare Style-Klassen
So verwenden Sie die Style-Contract-Tabelle
Die Tabelle enthält alle CSS-Klassen, die Sie zur Anpassung Ihres Widgets verwenden können. Jede Zeile liefert Ihnen drei Informationen:
• Component – der Teil des Widgets (z. B. widget, header, content, rating)
• Property – das spezifische Element innerhalb dieser Komponente (z. B. title, image, elements)
• Class – der exakte CSS-Klassenname – kopieren Sie diesen und fügen Sie ihn in Ihr benutzerdefiniertes CSS ein
Tipp
Um die Farbe des Header-Titels zu ändern, öffnen Sie die Header-Karte, suchen Sie unter „Property“ nach „title“ und kopieren Sie die danebenstehende Klasse
So erstellen Sie benutzerdefiniertes CSS für Ihr Widget
1
Öffnen Sie Ihr Mirror-App-Dashboard und wählen Sie das Widget aus, das Sie anpassen möchten
2
Navigieren Sie zum CSS-Tab
3
Kopieren Sie den Klassennamen aus der Style-Contract-Tabelle
4
Fügen Sie ihn in das benutzerdefinierte CSS-Feld ein
5
Fügen Sie Ihre Stile innerhalb der geschweiften Klammern ein
Tipp
• Verwenden Sie immer den exakten Klassennamen, wie er in der Tabelle angegeben ist
• Um bestehende Stile zu überschreiben, fügen Sie !important nach dem Eigenschaftswert hinzu
.wg-header {
padding: 20px !important;
background: #1a1a2e;
}• Änderungen werden sofort in der Vorschau übernommen
• Das Element, das du anpasst, wird hervorgehoben, sobald du eine CSS-Regel hinzufügst oder bearbeitest
CSS-Tipps für Desktop und Mobilgeräte
Verwende Media Queries, um unterschiedliche Styles für verschiedene Bildschirmgrößen anzuwenden.
Für mobile Bildschirme (bis 480px Breite):
@media (max-width: 480px) {
.wg-card {
padding: 12px;
font-size: 14px;
}
}Für Desktop-Bildschirme (ab 481px):
@media (min-width: 481px) {
.wg-card {
padding: 24px;
font-size: 16px;
}
}Du kannst die Breakpoints an das Design-System deiner Website anpassen.
💡 Zusätzliche Tipps
✅ Live-Vorschau – alle CSS-Änderungen werden sofort im Editor angezeigt
✅ Verwende nur Klassen aus der Style-Contract-Tabelle – diese sind stabil und verursachen keine Fehler
✅ Vor der Veröffentlichung testen – nutze die Editor-Vorschau, um sicherzustellen, dass alles korrekt aussieht
✅ Halte es schlicht – vermeide übermäßiges Styling; kleine Änderungen sind oft am effektivsten
Was This Article Helpful?
Hast du noch Fragen? Kontaktiere uns
Sprache
Sprache