- Einstellungen / Design / Farben - global für alle Projekte (Empfehlung)
- Projekteinstellungen / Darstellung / Farben
Wir empfehlen Dir die Einstellungen nur einmal global zu hinterlegen. So gehst Du sicher, dass all Deine Projekte gleich aussehen. Wenn Du einzelne Projekte anders konfigurieren willst, dann kannst Du dies in den jeweiligen Projekteinstellungen ändern. Bitte beachte dabei, dass die Projekteinstellungen vorrang vor den globalen Einstellungen haben.
Der Großteil der Farben wird automatisch von twingle berechnet um ein möglichst hohes Kontrastverhältnis zu erzielen. Du kannst aber auch eigene Werte eingeben.
Folgende Farben kannst Du anpassen:
- Primärfarbe - Hintergrundfarbe der aktiven Buttons und anderer Elemente
- Text auf Primär - Die Textfarbe der aktiven Elemente
- Sekundär - Hintergrundfarbe von inaktiven Elementen
- Text auf Sekundär - Textfarbe der sekundären Elemente
- Text - Allgemeine Texte des Widgets
- Label - Beschriftung von Eingabeelementen
- Hintergrund - Hintergrundfarbe des Widgets
- Headerfarbe des Widgets - Hintergrundfarbe der Überschrift in der eingebundenen Version des Widgets
- Mouseover - Hintergrundfarbe wenn die Nutzer:innen mit der Maus über ein Element fahren
- CTA - Hintergrundfarbe der Call-To-Action (CTA) Elemente, also der primären Buttons "Jetzt spenden", falls diese von der Primärfarbe abweichen sollte.
Die meisten der Farben werden automatisch berechnet und sind daher als auto markiert. Du kannst diese anpassen, in dem Du das Häkchen "automatisch" entfernst. Bitte beachte dass Du bei der Auswahl Deiner Farben auf ausreichend Kontrast achtest. Der twingleMANAGER zeigt Dir eine Warnung an, wenn der Kontrast nicht ausreichend ist.
Vorschau der Farbeinstellungen
Neben den Einstellungen der Farben siehst Du eine Vorschau des Widgets. Diese Vorschau zeigt nur ein paar typische Elemente an und entspricht nicht Deinen Projekteinstellungen. Prüfe in jedem Fall noch einmal Deine Einstellungen direkt auf Deiner Webseite wo das twingle Widget eingebunden ist.
Achtung: Wenn Du in Deinem Projekt eine eigene CSS-Datei hinterlegt hast, dann wirkt sich diese nicht auf die Vorschau aus.