Farben¶

Wo: Menü Konfiguration > Farben. Wer: Administratoren ändern die Farben; Redakteure sehen sie sich an und kopieren ihre CSS-Klassen.

Hier legst du die Farben des Erscheinungsbilds der Website ein für alle Mal fest. Keine andere Seite erlaubt es, eine Farbe frei einzugeben: Die Aktivitäten, die Veranstaltungen, die Seiten und die Beitragskategorien wählen eine der hier festgelegten Farben.

Der Vorteil: Wenn du eine Farbe auf dieser Seite änderst, ändert sie sich überall zugleich. Wird das Orange der Website zu einem sanfteren Orange, ändern sich alle Aktivitäten, Seiten und Blöcke, die es verwenden, auf einen Schlag, ohne dass du sie einzeln überarbeiten musst.

Warum nur Administratoren die Farben ändern können

Diese Farben bilden das Erscheinungsbild der Website. Sie wurden vorab sorgfältig durchdacht, damit sie zueinander passen und der Website ihre Identität geben. Da die Änderung einer Farbe das Aussehen der ganzen Website auf einen Schlag verändert, können nur Administratoren sie ändern.

Redakteure sehen dieselbe Seite schreibgeschützt, um dort die CSS-Klassen der Farben zu kopieren (siehe Was Redakteure sehen). Wenn dir eine Farbe änderungsbedürftig erscheint, wende dich an den Administrator der Website.

1 Farbpalette: die Farben der Website. 2 Farbrollen: welche Farbe der Palette welchen Teil der Website färbt. 3 Farbe der Untermenüs: aus der Standardfarbe berechnet. 4 Französische CSS-Klassen: Kompatibilitätseinstellung für ältere Websites. 5 Änderungen speichern: Vor diesem Klick wird nichts übernommen.

In einer Minute verstehen¶

flowchart LR
    P["Farbpalette<br>10 Farben"] --> A[Aktivitäten]
    P --> E[Veranstaltungen]
    P --> G[Seiten]
    P --> C[Beitragskategorien]
    P --> R["Rollen<br>Kopfzeile, Fußzeile,<br>Menü, Kalender …"]
    P --> K["CSS-Klassen<br>Blöcke der Avada-Seiten"]

Die Farbpalette hat 10 Farbplätze, von 1 bis 10 nummeriert. Jeder bekommt eine Farbe und einen Namen.
Überall sonst wählst du einen Farbplatz in einer Auswahlliste, in der jede Farbe mit ihrer Nummer und ihrem Namen erscheint (zum Beispiel 2 · orange-light).
Die Website merkt sich die Nummer des Farbplatzes, nicht die Farbe selbst. Deshalb wirkt sich eine Änderung der Farbe eines Farbplatzes überall aus.

Was Redakteure sehen¶

Ein Redakteur öffnet dieselbe Seite schreibgeschützt:

eine Meldung erinnert daran, dass die Farben zum Erscheinungsbild gehören;
jede verwendete Farbe erscheint mit ihrer Nummer, ihrem Namen, einer Vorschau und ihrem Code, gefolgt von den Schaltflächen Hintergrund und Text, um ihre CSS-Klasse zu kopieren;
die Schaltfläche zum Kopieren von Weißer Text bleibt verfügbar;
die Rollen und die Farbe der Untermenüs werden angezeigt, lassen sich aber nicht ändern;
es gibt keine Schaltfläche Änderungen speichern.

Der Rest dieser Seite beschreibt die Seite so, wie Administratoren sie sehen.

Die Farbpalette¶

1 Nummer des Farbplatzes. 2 Name. 3 Farbe. 4 Schaltflächen zum Kopieren der CSS-Klassen.

Ein Farbplatz ohne Farbe wird nicht verwendet: Er erscheint in keiner Auswahlliste. Du musst nicht alle zehn ausfüllen.

Nummer¶

Die Nummer ändert sich nie. Sie ist es, die sich die Aktivitäten, die Seiten und die anderen Einstellungen merken: Du kannst also die Farbe oder den Namen eines Farbplatzes ändern, ohne dass sie ihre Einstellung verlieren.

Name¶

Aus dem Namen entstehen die CSS-Klassen der Farbe (siehe Schaltflächen Hintergrund und Text), und er kennzeichnet sie in den Auswahllisten.

Schreibe ihn auf Englisch: Das ist in CSS üblich, und die Klassen des Plugins sind es auch (background-color-…, text-color-…). Zum Beispiel orange, orange-light, dark-blue.
Verwende Kleinbuchstaben, Ziffern und Bindestriche, ohne Umlaute, Akzente oder Leerzeichen. Ein anders eingegebener Name wird beim Speichern umgewandelt („Dark Blue“ wird zu dark-blue).
Bleibt das Feld leer, wird der Name durch die Nummer des Farbplatzes ersetzt.
Zwei Farbplätze können nicht denselben Namen tragen.
Manche Namen sind vom Plugin reserviert und werden abgelehnt: page, page-light, page-clair, default, defaut.
Vermeide es, die Kennung einer Beitragskategorie zu übernehmen (ihre „Titelform“, sichtbar unter Beiträge > Kategorien): Die beiden würden sich widersprechen. Eine Meldung warnt dich, wenn das der Fall ist.

Tipp: Benenne jede Farbe nach ihrem Farbton

orange, blue, green … und hänge -light für die helle Version an: orange-light. Wenn sich das Erscheinungsbild eines Tages zu einem leicht anderen Orange entwickelt, ändere die Farbe, nicht den Namen.

Eine Farbe umzubenennen macht die Seiten kaputt, die sie verwenden

Wenn orange zu amber wird, gibt es die Klasse background-color-orange nicht mehr, und die Blöcke der Seiten, die sie verwendet haben, verlieren ihre Farbe. Die Umbenennung wird gespeichert: Die Seite Werkzeuge > Migration der Farben der Website bietet danach an, alle diese Seiten zu aktualisieren. Benenne eine Farbe nur um, wenn es wirklich nötig ist.

Farbe¶

Klicke auf die Schaltfläche Farbe auswählen, um die Farbauswahl zu öffnen.

1 Wähle die Farbe im Quadrat. 2 Passe ihre Abstufung, heller oder dunkler, mit dem Balken rechts an. 3 Oder füge den Code der Farbe aus dem Erscheinungsbild ein: ein # gefolgt von sechs Zeichen, zum Beispiel #e67e22. 4 Leeren leert den Farbplatz.

Leere keinen Farbplatz, der noch verwendet wird

Alles, was diese Farbe verwendet hat, verliert sie, aber nicht auf dieselbe Weise:

die Seiten und die Rollen übernehmen wieder die Standardfarbe;
die mit ihren Schaltflächen Hintergrund oder Text gefärbten Blöcke sind nicht mehr gefärbt;
die Aktivitäten behalten ihre alte Farbe im Kalender und in den Blöcken „Nächste Veranstaltungen“, aber ihre Farbauswahl erscheint auf ihrer Seite leer: Bei der nächsten Änderung musst du ihnen eine andere Farbe wählen.

Bevor du einen Farbplatz leerst, wähle überall dort, wo er verwendet wird, eine andere Farbe.

Schaltflächen Hintergrund und Text¶

Mit diesen Schaltflächen färbst du einen Block auf einer mit Avada gebauten Seite (Container, Spalte, Textblock, Überschrift …). Sie erscheinen nur bei Farbplätzen, die eine Farbe haben.

Sie kopieren eine CSS-Klasse: ein kleines Schlüsselwort, das man einem Block hinzufügt, um sein Aussehen zu ändern, hier, um ihm eine Farbe der Palette zu geben.

Klicke auf Hintergrund, um den Hintergrund des Blocks zu färben, oder auf Text, um seinen Text zu färben. Die Klasse ist kopiert: Die Schaltfläche zeigt eine Sekunde lang ✓.
Öffne im Avada-Baukasten die Einstellungen des zu färbenden Blocks, Reiter Allgemein. Zum Beispiel einen Container (Container), also einen Abschnitt der Seite, um seinen Hintergrund zu färben; oder einen Textblock (Text Block), um seinen Text zu färben.
Füge die Klasse in das Feld CSS Class ein und speichere dann die Seite. Für mehrere Klassen trenne sie durch ein Leerzeichen.

Schaltfläche	Kopierte Klasse	Wirkung
Hintergrund	`background-color-orange`	Hintergrund des Blocks in der Farbe `orange`
Text	`text-color-orange`	Text des Blocks in der Farbe `orange`

Weiß schreiben. Auf einem farbigen Hintergrund fügst du die Klasse text-white hinzu: Der ganze Text des Blocks wird weiß. Sie gehört nicht zur Palette (sie ist keine wählbare Farbe, nur „weiß“): Sie hat ihre eigene Schaltfläche zum Kopieren, direkt unter der Palette — siehe Weißer Text.

Einen Hintergrund aufhellen. Füge eine zweite Klasse hinzu, durch ein Leerzeichen getrennt: background-opacity-XX, wobei XX ein Prozentsatz ist. Zum Beispiel ergibt background-color-orange background-opacity-40 einen orangen Hintergrund mit 40 %.

Beispiele

Avada-Block	Im Feld CSS Class	Ergebnis
Container (ein Abschnitt der Seite)	`background-color-blue text-white`	Abschnitt auf blauem Hintergrund, Text in Weiß
Container	`background-color-orange background-opacity-20`	Abschnitt auf sehr hellem orangem Hintergrund
Textblock	`text-color-orange`	Text in Orange

Alte Namen

Auf älteren Websites begegnet dir in Seiten vielleicht texte-blanc: Das ist der alte Name von text-white, er funktioniert weiterhin. Für eine neue Seite verwende text-white.

Neuer Name noch nicht gespeichert

Wenn du gerade einen Namen eingegeben oder geändert hast, kopieren die Schaltflächen schon die neue Klasse, aber diese funktioniert auf der Website erst nach Änderungen speichern.

Weißer Text¶

Direkt unter der Palette gibt dir eine Schaltfläche Kopieren die Klasse text-white: Sie macht den Text eines Blocks weiß, um auf einem farbigen Hintergrund zu schreiben. Wie bei den Schaltflächen Hintergrund und Text genügt ein Klick, dann fügst du die Klasse in das Feld CSS Class des Blocks in Avada ein (siehe Schaltflächen Hintergrund und Text).

Dieses Feld ist rein praktisch: text-white gehört nicht zur Palette und wird nicht gespeichert, die Schaltfläche funktioniert also für Administratoren genauso wie für Redakteure.

Die Farbrollen¶

Eine Rolle weist einem bestimmten Teil der Website eine Farbe der Palette zu. Jede Liste bietet nur die Farbplätze an, die eine Farbe haben, und nimmt die Farbe der gewählten Option an.

1 Standardfarbe. 2 Farbe der Kalenderschaltflächen. 3 Farbe der Bildlaufleisten. 4 Farbe der Untermenüs. 5 Französische CSS-Klassen.

Standardfarbe¶

Die Hauptfarbe der Website: Sie bestimmt ihre vorherrschende Farbe. Sie färbt:

die Kopfzeile und die Fußzeile aller Seiten;
das Menü der Website (das ausklappbare Menü);
die Seiten ohne eigene Farbe (Einstellung „Seitenfarbe“ jeder Seite);
die Schaltflächen der Formulare und mehrere Elemente des Layouts;
die Blöcke „Nächste Veranstaltungen“ und die Veranstaltungsseiten, wenn die Aktivität keine Farbe hat.

Sie hat auch ihre Schaltflächen Hintergrund und Text, die background-color-default und text-color-default kopieren: Ein so gefärbter Block folgt der Standardfarbe, auch wenn du sie eines Tages änderst.

Farbe der Kalenderschaltflächen¶

Die Navigationsschaltflächen des Kalenders: vorheriger Zeitraum, nächster Zeitraum und zurück zum aktuellen Zeitraum. Beim Darüberfahren wird eine Schaltfläche heller; beim Klicken dunkler. Die Schaltfläche zum Zurückkehren bleibt heller, solange man schon im aktuellen Zeitraum ist.

Ihre Beschriftung folgt der Anzeige: „heute“ in der Monatsansicht, „diese Woche“ in der Wochenansicht — der Ansicht auf dem Handy.

Farbe der Bildlaufleisten¶

Der bewegliche Teil der Bildlaufleisten: der der Seite und die der Bänder, die waagerecht scrollen (nächste Veranstaltungen, Porträts der Lehrer).

Note

Firefox übernimmt diese Farbe nicht und behält seine üblichen Bildlaufleisten.

Farbe der Untermenüs¶

Die Untermenüs des ausklappbaren Menüs haben keine eigene Farbe: Sie übernehmen die Standardfarbe, aufgehellt um die angegebene Zahl an Helligkeitspunkten. So bleiben Menü und Untermenüs aufeinander abgestimmt, auch wenn sich die Standardfarbe ändert.

Die Vorschau zeigt die Farbe des Menüs (oben) und die der Untermenüs (unten), so wie sie gespeichert sind.
0: Die Untermenüs haben genau die Farbe des Menüs, man unterscheidet sie nicht mehr.
8 (Standardwert): ein dezenter, aber sichtbarer Unterschied.
100: Die Untermenüs werden weiß.

Der Farbton bleibt erhalten: Das Ergebnis ist dieselbe Farbe in heller, keine verwaschene Farbe.

Links das Menü in der Standardfarbe. Rechts ein Untermenü, aufgehellt.

Französische CSS-Klassen¶

Bevor das Plugin auf Englisch umgestellt wurde, trugen die Farbklassen französische Namen: fond-couleur-…, texte-couleur-…, fond-opacite-….

Technische Einstellung

Ändere sie nur mit dem Einverständnis des Webmasters der Website.

Lass das Kästchen angekreuzt, wenn Seiten deiner Website diese Klassen noch verwenden. Die Seite Werkzeuge > Migration der Farben der Website listet alle in den Seiten gefundenen Klassen auf.
Nimm das Kreuz weg bei einer neuen Website oder sobald alle Seiten auf die englischen Klassen umgestellt sind: Jede Seite der Website wird dann etwas leichter.

Speichern¶

Nur für Administratoren. Klicke unten auf der Seite auf Änderungen speichern. Die Meldung „Einstellungen gespeichert.“ bestätigt den Vorgang.

Oben auf der Seite kann eine Warnmeldung erscheinen:

Meldung	Was passiert ist
„der Name … ist vom Plugin reserviert“	Der Name wurde durch die Nummer des Farbplatzes ersetzt. Wähle einen anderen Namen.
„der Name … wird bereits von Farbe … verwendet“	Zwei Farbplätze trugen denselben Namen: Der zweite hat stattdessen seine Nummer bekommen.
„… ist zugleich die Titelform einer Beitragskategorie“	Der Name wird angenommen, kann aber mit der Farbe dieser Kategorie in Konflikt geraten. Wähle einen anderen Namen.

Sobald sich eine Farbe ändert, wird der Cache der Website automatisch geleert: Die Besucher sehen die neuen Farben bei ihrem nächsten Besuch.

Häufige Fragen¶

Ich habe eine Farbe geändert, aber die Website hat sich nicht geändert. Prüfe, ob du wirklich auf Änderungen speichern geklickt hast, und lade dann die Seite der Website mit Strg + F5 neu (auf dem Mac: Cmd + Umschalt + R): Dein Browser hat vielleicht noch die alte Version behalten.

Ein Block einer Seite hat seine Hintergrundfarbe verloren. Seine CSS-Klasse entspricht keiner Farbe mehr: Farbplatz umbenannt oder geleert, oder alte Klasse einer Aktivität (die Aktivitäten erzeugen keine Klassen mehr). Die Seite Werkzeuge > Migration der Farben der Website findet diese Klassen und ersetzt sie.

Die Farbe, die ich suche, erscheint nicht in der Liste einer Aktivität oder einer Seite. Der Farbplatz hat in der Palette keine Farbe. Fülle ihn hier aus und speichere dann.

Ich kann die Farben nicht ändern. Das ist normal, wenn du Redakteur bist: Die Farben gehören zum Erscheinungsbild, und nur Administratoren können sie ändern. Du kannst ihre CSS-Klassen aber jederzeit mit den Schaltflächen Hintergrund und Text kopieren.

Kann ich eine elfte Farbe hinzufügen? Nein, die Palette hat immer zehn Farbplätze.

Kann ich eine Farbe außerhalb der Palette verwenden? Nur in zwei Fällen: bei einer Seite („Seitenfarbe“ > „Andere Farbe wählen“) und bei einer Veranstaltung („Individuelle Farbe“). Behalte das Ausnahmen vor: Diese Farben folgen den Änderungen der Palette nicht.

Wo diese Farben gewählt werden¶

Seite	Einstellung
Eine Aktivität	Farbe der Aktivität im Kalender und auf den Kurs- und Veranstaltungsseiten
Eine Veranstaltung	Ersatzfarbe, nur wenn sie sich von der der Aktivität unterscheiden soll
Eine Seite	Seitenfarbe, im Kasten rechts auf der Bearbeitungsseite
Eine Beitragskategorie	Farbe der Kategorie

Für die Logik des Ganzen siehe Die Farben der Website.