Farben

Im Digital Signage System der THW-Jugend Baden-Württemberg gibt es ein fest definiertes System von Farben und Farbabstufungen. Diese werden in sogenannten HEX-Codes definiert, die aus sechs Buchstaben von A-F und Zahlen von 0-9 und einer führenden Raute # bestehen. Zur Orientierung: je geringer die Zahl, desto dunkler die Farbe (z.B. Schwarz: #000000), A ist die mittel helle Farbe und F die hellste (z.B. Weiß: #FFFFFF). Spezielle Farben werden dann durch die Mischung dieser Werte erzeugt (z.B. Cyanblau: #009EE0).

Die Anwendung der Farbe erfolgt dann innerhalb des visuellen Editors, im HTML-Code oder im CSS Stylesheet.

Die Farben der THW-Jugend und ihre Codes

Farbe	Einsatzzweck	Bedeutung	HEX-Code	RGB-Werte
thw-jugend-cyan	Schriftfarben, Icons, Elemente	Leitfarbe der THW-Jugend, insbesondere Landesjugend	#009EE0	0, 158, 224
thw-jugend-cyan-02	Schriftfarben, Hintergründe	Abstufung der Leitfarbe, in der Jugendwelt verwendet	#4DBBEA	77, 187, 234
thw-jugend-cyan-03	Hintergründe		#7FCEEF	127, 206, 239
thw-jugend-cyan-04	Hintergründe		#BFE7F7	191, 231, 247
thw-jugend-orange	Schriftfarben, Icons, Elemente	Leitfarbe der THW-Jugend, insbesondere Ortsjugend	#F49E00	244, 158, 0
thw-jugend-orange-02	Schrift, Hintergründe		#F7B740	247, 183, 64
thw-jugend-orange-03	Hintergründe		#F9CE7F	249, 206, 127
thw-jugend-orange-04	Hintergründe		#FCE7BF	252, 231, 191
thw-blau	Schriftfarben, Icons, Elemente	Leitfarbe des THWs, insbesondere Bundesjugend	#00377F	0,55,127
thw-blau-02	Schrift, Hintergründe		#406FAC	64, 111, 172
thw-blau-03	Hintergründe		#7F9EC7	127, 158, 199
thw-blau-04	Hintergründe		#BFCFE3	191, 207, 227
schiefer	Schriftfarbe, Icons		#1D1E20	29, 30, 32
schiefer-02	Schriftfarbe		#565658	86, 86, 88
schiefer-03	Schriftfarbe		#8E8E8F	142, 142, 143
schiefer-04	Hintergründe		#C6C6C7	198, 198, 199

Ersetzung der Farben im Layout

Alle Komponenten und Layout-Vorlagen sind bereits mit vordefinierten Farben erstellt. Diese Farben kannst du generell an drei verschiedenen Stellen bearbeiten. Die einfachste Art ist der visuelle Editor, alternativ funktioniert bei manchen Komponenten aber nur der HTML-Code, oder der CSS Stylesheet.

Dabei gibt es generell zwei Werte, die du hier beachten musst: Der Wert color bestimmt in HTML sowie in CSS immer die Schriftfarbe eines Textes, während der Wert background-color die Hintergrundfarbe eines Elementes definiert. Willst du also die Schriftfarbe ändern, suchst du nach dem Wert color.

Ersetzung im HTML-Code

Als Beispiel nehmen wir hier den Untertitel des Titel-Elements. Klicke auf das Element und wähle im Layout-Editor rechts den Tab "Vorlagen/Main" aus. Hier wird der Text mit h2 für eine Überschrift eingeleitet und die Farbe direkt im Code definiert. Für uns ist lediglich der Wert hinter dem #-Zeichen relevant:

<h2 style="font-family: trebuchet ms; margin: 0; font-size: 32px; color: #FFFFFF;">Ortsverband Musterstadt</h2>

Ersetze zum Beispiel einfach den Wert #FFFFFF (weiß) mit dem Wert für die Farbe thw-jugend-orange. Das Endergebnis sieht dann so aus:

<h2 style="font-family: trebuchet ms; margin: 0; font-size: 32px; color: #F49E00;">Ortsverband Musterstadt</h2>

Ersetzung im CSS Stylesheet

Die Ersetzung der Farbe im CSS Stylesheet ist eine Option für erfahrene Benutzer! Diese Option kommt insbesondere bei Komponenten wie z.B. dem Newsfeed oder dem Wissensfeed zum Einsatz. Klicke zum Öffnen des Stylesheets auf das Element und rechts im Layout-Editor auf den Tab "Vorlagen/optionaler Stylesheet".

Hier nehmen wir als Beispiel den Newsfeed, bei dem du die Hintergrundfarbe des Verlaufs verändern möchtest. Klicke in das Feld unter "Optionaler Stylesheed Template" und tippe auf deiner Tastatur STRG + F (Mac: Cmd + F). Suche dann nach dem Begriff "background". Da hier ein Verlauf mit Transparenz zum Einsatz kommt, müssen wir uns der RGB-Werte aus der oberen Tabelle bedienen. Relevant ist für uns dabei die Zeile bei "background-image:"

background-image: linear-gradient(180deg, rgba(0,158,224,0.00) 0%, rgba(0,158,224,0.75) 30%);

Wie du siehst, ist hier zweimal eine Farbe eingebunden, allerdings ist das die gleiche Farbe. Lediglich der Wert mit der führenden Null unterscheidet sich. Dieser Wert ist für die Deckkraft zuständig, also wie transparent die Farbe ist. Den können wir hier unverändert lassen. Für uns sind nur die ersten drei Komma-Zahlen wichtig. Wir nutzen jetzt die Werte des thw-blau und setzen diese ein. Anschließend sieht der Code so aus:

background-image: linear-gradient(180deg, rgba(0,55,127,0.00) 0%, rgba(0,55,127,0.75) 30%);