Zum Inhalt

Die Farben der Website

Die Farben der Website werden nicht frei, Seite für Seite, gewählt: Sie stammen alle aus derselben Farbpalette, die ein für alle Mal festgelegt wird. Diese Seite erklärt dieses Prinzip und seine Folgen. Die Einzelheiten der Seite findest du unter Farben.

In einer Minute

  • Die Farbpalette umfasst zehn Farben auf nummerierten Farbplätzen von 1 bis 10. Sie wird unter Konfiguration > Farben eingestellt.
  • Überall sonst (bei einer Aktivität, einer Seite, einer Beitragskategorie) wählst du eine dieser Farben aus einer Liste. Du gibst nie einen Farbcode ein.
  • Die Website merkt sich die Nummer des gewählten Farbplatzes, nicht die Farbe selbst.

Daraus folgt das Wichtigste: Änderst du eine Farbe der Palette, ändert sie sich überall gleichzeitig. Wird das Orange des Zentrums zu einem sanfteren Orange, folgen alle Aktivitäten, Seiten und Blöcke, die es verwenden, ohne dass du sie einzeln überarbeiten musst.

Wer die Farben ändern kann

Die Farben bilden das Erscheinungsbild der Website: Nur Administratoren können sie ändern. Redakteure öffnen dieselbe Seite nur zum Lesen, um dort die CSS-Klassen der Farben zu kopieren (siehe unten).

Wenn du meinst, eine Farbe sollte sich ändern, wende dich an den Administrator der Website.

Wo jede Farbe verwendet wird

Eine Farbe der Palette kann an vier Stellen verwendet werden.

Die Aktivitäten. Jede Aktivität erhält eine Farbe. Ihre Sitzungen erscheinen in dieser Farbe im öffentlichen Kalender, in den Blöcken „Nächste Veranstaltungen“ und auf der Seite der Veranstaltung. Eine Veranstaltung kann ausnahmsweise eine eigene Farbe erhalten (siehe unten).

Die Seiten und die Beitragskategorien. Eine Seite kann ihre eigene Farbe erhalten; sonst übernimmt sie die Standardfarbe der Website. Dasselbe gilt für eine Beitragskategorie.

Die Farbrollen. Einige Teile der Website haben eine feste Farbe, die aus der Palette gewählt wird:

Farbrolle Was sie färbt
Standardfarbe Die vorherrschende Farbe der Website: Kopfzeile, Fußzeile, Menü, Seiten ohne eigene Farbe.
Farbe der Kalenderschaltflächen Die Navigationsschaltflächen des öffentlichen Kalenders.
Farbe der Bildlaufleisten Die Bildlaufleisten der Seite und der scrollenden Bereiche.

Die Untermenüs haben keine eigene Farbe: Sie übernehmen die Standardfarbe, etwas aufgehellt. So bleiben sie auf das Menü abgestimmt, wenn diese sich ändert.

Die Blöcke der Avada-Seiten. Ein Block einer Seite (ein Abschnitt, ein Text, ein Titel …) kann eine Farbe der Palette erhalten (siehe unten).

Einen Block einer Seite färben

In Seiten, die mit Avada gebaut sind, färbst du einen Block, indem du ihm eine CSS-Klasse gibst: ein kleines Schlüsselwort, das du in das Feld CSS Class der Einstellungen des Blocks einfügst. Jede Farbe der Palette hat zwei Klassen, die du auf der Seite Farben kopierst:

  • background-color- gefolgt vom Namen der Farbe, um den Hintergrund des Blocks zu färben (background-color-orange);
  • text-color- gefolgt vom Namen der Farbe, um seinen Text zu färben (text-color-orange).

Die Klasse text-white schreibt den Text weiß, auf einem farbigen Hintergrund.

Die Vorgehensweise und Beispiele findest du unter Schaltflächen Hintergrund und Text.

Der Name einer Farbe zählt

Die Klassen werden aus dem Namen der Farbe gebildet. Wird orange in amber umbenannt, gibt es die Klasse background-color-orange nicht mehr, und die Blöcke, die sie verwendeten, verlieren ihre Farbe. Den Farbton eines Farbplatzes zu ändern, macht dagegen nichts kaputt. Siehe Name.

Die Ausnahmen

Zwei Einstellungen nehmen eine Farbe außerhalb der Palette an:

  • eine Seite: „Seitenfarbe“ > „Andere Farbe wählen“;
  • eine Veranstaltung: „Individuelle Farbe“, wenn sie sich von ihrer Aktivität abheben soll.

Diese Farben folgen den Änderungen der Palette nicht. Behalte sie echten Ausnahmen vor.

Wann die Änderung sichtbar wird

Sobald ein Administrator eine Änderung der Farben speichert, wird der Cache der Website geleert: Die Besucher sehen die neuen Farben bei ihrem nächsten Besuch. Zeigt dein eigener Browser noch die alten, lade die Seite mit Strg + F5 neu (auf dem Mac: Cmd + Umschalt + R).

Weiterführende Seiten