Color Settings

In diesem Theme-Abschnitt finden Sie alle Einstellungen, um Ihre Website mithilfe von Farben unverwechselbar zu gestalten.

Reiter: »Color«

Anleitung   Hinweise, Tipps & Tricks


Schritt für Schritt

Hintergrundfarbe:

  • Klicken Sie den Reiter Color.
  • Bei Background Colors stellen Sie mit einem HTML-Code die Hintergrundfarbe Ihrer Website ein. Für die Hashtag- und Zahlen/Ziffer-Kombinationen finden Sie unzählige Farbtafeln im Netz.
  • Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Schriftfarbe:

  • Bei den Recommendations for font colors legen Sie fest, ob Sie eine eigene Farbvariante verwenden (Custom) oder die voreingestellten Schriftfarben black beziehungsweise grey blue.
  • Custom: Mit den Eingabefeldern bei Base Font Color, Light Font Color und Dark Font Color legen Sie die Farben für verschiedene Font-Kategorien fest.
  • Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Primärfarben:

  • Bei den Recommendations for primary colors legen Sie mit einer Farbe aus der Drop-Down-Liste die Hauptfarbe der Website fest.
  • Custom: Alternativ legen Sie in den dann gezeigten Eingabefeldern BaseLight und Dark Primary Color die Hauptfarben der Website fest.
  • Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Sekundärfarben:

  • Wie bei den Primärfarben legen Sie bei den Recommendations for secondary colors mit der Drop-Down-Liste die »Zweitfarbe« der Website fest.
  • Custom: Alternativ legen Sie mit den dann gezeigten Eingabefeldern BaseLight und Dark Secondary Color die Sekundärfarben der Website fest.
  • Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Signalfarben:

  • Bestimmte Dialogmeldungen und Systemantworten können farblich betont werden, hier bei den Eingabefeldern Success ColorWarning Color sowie Error Color.
  • Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Desktop- und Mobil-Navigation:

  • Hier legen Sie fest, welches der eingestellten Farbsets für die Navigation am Desktop sowie an mobilen Geräten verwendet wird. Für die Desktop Navigation werden die Werte Primary ColorsSecondary Colors und Font Colors angeboten, für die Mobile Navigation nur Primary Colors sowie Secondary Colors.
  • Klicken Sie über der Arbeitsfläche auf den Button Speichern.

Hinweise, Tipps & Tricks

Wer TYPO3 kennt, weiß, dass viele Wege nach Rom führen. toujou ist TYPO3. Wir weisen Sie an dieser Stelle auf wichtige Informationen und den einen oder anderen Kniff hin, den Sie bei der Erstellung und Bearbeitung Ihrer Website beachten sollten.

Ganz unten im Reiter »Color« innerhalb der Theme-Settings sehen Sie stets eine Übersicht Ihrer aktuellen Farbeinstellungen.

Die in toujou voreingestellten Farbvorschläge werden stets im Dreierpack geliefert: Einem Grundton, einer helleren Variante des Grundtons und respektive einer dunkleren Variante dessen. Die unterschiedlichen Farbtöne dienen der Darstellung von Interaktion (z.B. Mouse-over auf Links) oder zum Erzeugen einer Tiefendimension im Design. Sie sind frei in der Entscheidung, ob bis zu drei Farbvarianten eingesetzt werden sollen.

Als Quelle für diese Designentscheidung gelten die weitgehend als »Standardwerk« zu wertende Material-Design-Guidelines von Google ↗.

In toujou bestimmen Sie den Farbwert für die Schriftfarbe (Font Color). Für Überschriften gelten abweichende Farbeinstellungen, die zusätzlich auf die Einstellungen zu Primär- und Sekundärfarbe zurückgreifen: 

Headline 1: Font Color

Headline 2: Primary Color

Headline 3: Secundary Color

Headline 4: Font Color

Headline 5: Font Color

Verknüpfte Elemente

Elemente aus der toujou-Elementbibliothek, die mit diesen Einstellungen in Verbindung stehen.

Headline Element

Diese Webseite verwendet Cookies

Wir verwenden Cookies, um Inhalte zu personalisieren und die Zugriffe auf unsere Website zu analysieren. Weitere Informationen finden Sie in unserer Datenschutzerklärung.
OK