So passt du die Farben des TuCalendi-Widgets an

In dieser Anleitung erfährst du, wie du die Farben des TuCalendi-Widgets mithilfe einer Designvorlage anpassen kannst. Die Farben bestimmen das Erscheinungsbild des Widgets und ermöglichen es dir, es an das Markenimage deines Unternehmens anzupassen.

Wenn du eine neue Theme-Vorlage erstellst, werden alle Farbfelder automatisch mit den Standardeinstellungen vorbelegt. Von dort aus kannst du jede Farbe einzeln anpassen, um das gewünschte Erscheinungsbild zu erzielen.

Das Widget verfügt über sechs einzelne Farbfelder und ein zusätzliches Feld für das Gesamtdesign:

  • Primärfarbe. Die Hauptfarbe der Benutzeroberfläche: Schaltflächen, Tage und hervorgehobene Elemente.
  • Sekundärfarbe. Akzentfarbe für sekundäre Elemente.
  • Haupttextfarbe. 
  • Sekundäre Textfarbe.
  • Hervorhebungsfarbe. Wird verwendet, um Elemente innerhalb des Widgets hervorzuheben.
  • Hintergrundfarbe
  • Farbschema. Allgemeiner Darstellungsmodus: „Auto“, „Hell“ oder „Dunkel“.

Bevor du loslegst

Um diesem Tutorial folgen zu können, musst du zum Abschnitt „Darstellung“ des Widgets navigieren und eine Theme-Vorlage erstellt haben, die du bearbeiten kannst. Der gesamte Vorgang zum Erstellen und Zuweisen von Vorlagen wird im allgemeinen Tutorial zum Erstellen und Zuweisen einer Widget-Theme-Vorlage erklärt.

Schritt 1. Rufe die Darstellungseinstellungen des Widgets auf

Gehe im TuCalendi-Seitenmenü zum Abschnitt "Widgets" und wähle die Option "Erscheinungsbild" aus.

Erscheinungsbild des widgets

Schritt 2. Erstelle oder bearbeite eine Widget-Darstellungsvorlage

Erstelle im Bereich  "Erscheinungsbild" eine neue Vorlage oder bearbeite eine bestehende, indem du auf  "Bearbeiten" klickst .

Designvorlage das Widget Bearbeiten

Schritt 3. Überprüfe die Standard-Farbeinstellungen

Wenn du eine neue Vorlage erstellst, werden alle Farbfelder automatisch mit Standardwerten ausgefüllt. Der Screenshot unten zeigt, wie der Editor mit den Standardfarbeinstellungen aussieht.

Standard-Designvorlage für das Widget

Schritt 4. Passe die Farben der Vorlage an

Klicke auf eines der Farbfelder, um es zu öffnen, und wähle den gewünschten Wert aus. Du kannst jedes Feld einzeln anpassen:

  • Primärfarbe: Wirkt sich auf die Hauptschaltflächen, ausgewählte Tage im Kalender und die auffälligsten Elemente der Benutzeroberfläche aus.
  • Sekundärfarbe: Gilt für ergänzende Elemente der Benutzeroberfläche.
  • Haupttextfarbe: Steuert die Farbe des im Widget sichtbaren Haupttextes.
  • Sekundäre Textfarbe: Legt die Farbe des sekundären Texts fest, z. B. Beschreibungen und Beschriftungen.
  • Hervorhebungsfarbe: Wird verwendet, um bestimmte Elemente hervorzuheben, wie z. B. Benachrichtigungen oder wichtige Aktionen.
  • Hintergrundfarbe: Legt die Hintergrundfarbe des Widgets fest.
  • Farbschema: Hier kannst du zwischen "Auto" (das Widget passt sein Erscheinungsbild an den hellen oder dunklen Modus des Systems des Nutzers an), "Hell" (immer im hellen Modus) oder "Dunkel" (immer im dunklen Modus) wählen.

Der folgende Screenshot zeigt den Editor mit den Farben von TuCalendi als Beispiel für die Anpassung.

Erscheinungsbild des Widgets mit benutzerdefinierten Farben

Schritt 5. Speichere die Änderungen

Nachdem du alle gewünschten Farben konfiguriert hast, klicke auf  "Speichern", um die Änderungen auf die Designvorlage anzuwenden.

Schritt 6. Überprüfe die Elementzuordnung

Sobald die Vorlage gespeichert ist, überprüfe, ob sie dem entsprechenden Hub oder der Umfrage mit Routing zugewiesen ist. Wenn die Vorlage keinem Element zugewiesen ist, werden die Änderungen in keinem Widget angezeigt.

Vorlage Erscheinungsbild Widgets mit Zugewiesenem Element

Schritt 7. Überprüfe das Ergebnis im Widget

Sobald die Farben konfiguriert und die Änderungen gespeichert sind, zeigt das Widget die neue Farbpalette auf allen seinen Bildschirmen an. Der folgende Screenshot zeigt, wie die Farbanpassung in dem für den Endnutzer sichtbaren Widget erscheint.

Widget mit benutzerdefinierten Farben von TuCalendi

Zusammenfassung des Vorgangs

Um die Farben des Widgets anzupassen, gehe zu "Widget-Darstellung", erstelle oder bearbeite eine Vorlage und passe die verfügbaren Farbfelder an: Primärfarbe, Sekundärfarbe, Haupttextfarbe, Sekundärtextfarbe, Hervorhebungsfarbe, Hintergrundfarbe und Farbthema. Beim Erstellen einer neuen Vorlage sind alle Felder mit Standardwerten vorbelegt, die du frei ändern kannst. Klicke auf "Speichern", vergewissere dich, dass die Vorlage dem entsprechenden Hub oder der Umfrage zugewiesen ist, und überprüfe, wie das Widget nach der Farbanpassung aussieht.