Ukraine-Konflikt: Howto Einfärben der eigenen Webseite in Nationalfarben

Kategorien: Allgemein

Als kleinen Beitrag habe ich den Kopfbereich meiner Webseite in den Nationalfarben der Ukraine eingefärbt. Vielleicht möchten Sie diesem Beispiel folgen? Tipps zum Einfärben der Webseite in den Farben der Ukraine.

Einleitung

Auch mit diesem Beitrag werde ich mich mit politischen Äußerungen zurückhalten. Meine Bekundung für die Ukraine kann ich aber nicht unterdrücken. Da ich nicht gar nichts tun möchte, habe ich wenigstens meine Webseite mit ukrainischen Farben beflaggt.

Wer das Gleiche machen möchte und nicht genau weiß, was zu tun ist, findet hier vielleicht ein paar nützliche Tipps. Gerne nehme ich weitere Tipps mit auf. Einfach schreiben.

Farben der Ukraine

Hier die Farben der Ukraine-Flagge, die ich auf die Schnelle gefunden habe:

Bitte verzeihen Sie mir, wenn die Farben nicht perfekt sind. Ich glaube, es geht um andere Dinge als die exakten Farbwerte.

Die beiden Farben der Ukraine-Flagge sind blau und gelb. Ich nutze folgende Farbwerte:

• blau: #005BBB
• gelb: #FFD500

Webseite anpassen

Die einfache Möglichkeit ist das Einbinden einer Flagge oder eines Bilds mit Ukraine-Bezug. Ganz einfach ist es, dies nur auf einer Seite zu tun. Besser wäre es natürlich, die Einbindung so vorzunehmen, dass sie seitenweit zu sehen ist.

Etwas komplizierter, aber vielleicht auch wirksamer, ist das Anpassen des Aussehens der Webseite.

Beide Möglichkeiten beschreibe ich kurz.

Flagge oder Ukraine-Bild einbinden

Ganz einfach geht es, wenn Sie sich ein Flaggenbild der Ukraine oder ein geeignetes (lizenzfreies) Bild suchen und auf Ihrer Webseite einfach einbinden. Dann am besten auf jeder Seite (Kopf- oder Fußzeile), mindestens aber auf der Startseite, würde ich vorschlagen.

Flaggenbilder von Staaten wie der Ukraine sind immer lizenzfrei. Bei Russland bin ich mir da nicht ganz so sicher. Auf Pixabay gibt es viele Bilder, die kostenfrei und ohne Lizenzangabe nutzbar sind.

Beflaggung der Kopfzeile oder Fußzeile

Wenn Sie sich etwas in HTML und CSS auskennen, können Sie einen zweigeteilten Bereich wie den folgenden nutzen:

Den Effekt erreicht man über folgende CSS-Anweisungen (CSS ist die Layout-Sprache für HTML-Seiten):

.primary-header {
  background-image: linear-gradient(to bottom, #005BBB, #005BBB 50%, #FFD500 50%, #FFD500);
  background-size: cover;
  background-repeat: no-repeat;
}

Die Zeilen, die mit "background" anfangen, sind die eigentlichen Regeln, um die Flaggenfarben darzustellen. Es reicht hier, wenn die oberen 50% in Ukraine-blau, die unteren 50% in Ukraine-gelb gefärbt sind.

Die erste Zeile müssen Sie anpassen. Dort steht bei mir ".primary-header". Der Punkt am Anfang sagt, dass es sich um eine sogenannte CSS-Klasse handelt. Der Teil nach dem Punkt ist der Klassennamen, also "primary-header".

Ich habe das für meine Webseite wie folgt herausgefunden:

1. Webseite im Firefox-Browser (oder ähnlichem) aufrufen
2. Taste F12 drücken: Entwicklerkonsole öffnet sich
3. Links das Auswahlwerkzeug anklicken:

4. Kopfbereich anklicken, der beflaggt werden soll:

Dazu mit der Maus über den Bereich fahren, bis er sich einfärbt, dann mit linker Maustaste klicken.

Nun erscheint in der Entwicklerkonsole der HTML-Code des ausgewählten Bereichs:

Mit dem Pfeil habe ich die relevante Stelle markiert. Dort sehen Sie die oben genannte „Klasse“ namens „primary-header“. Wenn Ihre Klasse „titelbereich“ heißen würde, müssten Sie schreiben:

.titelbereich {
  background-image: linear-gradient(to bottom, #005BBB, #005BBB 50%, #FFD500 50%, #FFD500);
  background-size: cover;
  background-repeat: no-repeat;
}

Doch wohin schreibt man diesen Code? Hier zwei Beispiele:

WordPress-Webseiten

Haben Sie eine WordPress-Webseite, dann melden Sie sich dort als Administrator an. Dann rufen Sie Ihre Webseite auf und klicken dort „Customizer“ an:

Daraufhin erscheint ein Menü. Klicken Sie dort auf den Menüpunkt "Zusätzliches CSS", der sich bei mir ganz unten im Menü befindet.

Dort fügen Sie den eben gezeigten Code am Ende ein. Speichern nicht vergessen bzw. „Veröffentlichen“.

Webseiten Allgemein

Für alle Arten von Webseiten funktioniert das folgende Verfahren, bei dem die Änderung direkt im Dateisystem ausgeführt wird.

Suchen Sie eine CSS-Datei, die von Ihrer Webseite eingebunden wird. Die Datei hat die Endung „.css“.

Nehmen Sie eine CSS-Datei, die auf Ihrem eigenen Server liegt. Nutzen Sie ein FTP-Programm, um die Datei zu öffnen. Fügen Sie den oben genannten Code am Ende der Datei ein. Speichern Sie die Datei und laden Sie die Datei mit dem FTP-Programm hoch.

Farben ändern

Statt den Kopfbereich zu ändern oder ein Bild einzufügen, könnten Sie die Primärfarben Ihrer Webseite anpassen. In WordPress und sicher auch in anderen Content Management Systemen wie Typo3 oder Magento geht das mit wenigen Klicks.

Wenn Sie zufällig wissen, in welcher CSS-Datei die Primärfarben der Website gespeichert sind, können Sie auch dort direkt eingreifen.

Wenn Sie ein Cache-Plugin verwenden, ist es unter Umständen notwendig, den Cache nach der Änderung zu leeren.

Vielleicht haben Sie eine Agentur oder einen Webmaster, der Ihre Webseite betreut. Fragen Sie doch mal nach, ob eine kostenfreie Änderung (und später wieder Rückänderung) möglich ist. Das sollte doch machbar sein!

Wenn Sie weitere Ideen haben oder Ihre Webseite angepasst haben und diese nennen möchten, schreiben Sie mir doch eine Nachricht oder einen Kommentar unter diesem Beitrag.

Das Bild dieses Beitrags, die Flagge der Ukraine, dürfen Sie übrigens bei Bedarf frei verwenden. Dieser Hinweis entstand aufgrund einer Nachfrage eines Lesers.