CSS Anpassung bei Cookie Notice

In meinem letzten Artikel hatte ich die zwei Plug-Ins „Cookie Notice“ und „Cookie Law Info“ verglichen und dabei beschrieben, dass bei Cookie Notice die Farben nur mittels CSS angepasst werden können. Ich diesem Artikel zeige ich euch meinen CSS-Code und welches Plug-In ich dafür verwende.

Einbindung CSS-Code in eine WordPress Webseite

Es gibt mehrere Möglichkeiten, eigenen CSS-Code in WordPress einzubinden.
Viele Theme’s bieten die Möglichkeit in den eigenen Einstellungen CSS-Code einzubauen. Eine andere Möglichkeit ist, mit Child-Theme’s zu arbeiten und dort den Code zu speichern. Ein großer Nachteil dieser Methode ist, dass bei Tausch des Theme auch dieser Code nicht mehr ausgeführt wird.

Benutzerdefinierte CSS – Theme Optionen

Eine weitere Möglichkeit ist, ein eigenes Plug-In dafür zu verwenden. Im Plug-In Verzeichnis von wordpress.org gibt es eine Vielzahl an unterschiedlichen Möglichkeiten. Ich habe mich für das Plug-In „Simple Custom CSS and JS“ entschieden.

Bildquelle: https://de.wordpress.org/plugins/custom-css-js/

Diese Plug-In hat mehr als 110.000 Downloads und wird regelmässig aktualisiert. Andere Plug-In sind seit über einem Jahr nicht mehr erneuert worden. Der ausschlagende Vorteil für mich war aber, dass ich mehrere Code-Item anlegen und diese auch einzel aktiviert bzw. deaktiviert kann. Bei den anderen Plug-Ins war immer nur ein einziges Editor-Fenster und wenn der CSS-Code länger wurde, dann wurde es schnell unübersichtlicher. Bei Simple Custom CSS and JS kann für jeden Codeteil ein eigenes Item angelegt werden und man behält leichter den Überblick.

PlugIn Custom Code – Item Ansicht

In meinem Fall sind zwei Items angelegt. Im Ersten befindet sich der CSS-Code für das Aussehen und die Effekte meiner Social Media Icons im Footer. Im Zweiten ist der Code für den Cookie Banner gespeichert.

CSS-Anpassung für Cookie Notice

Folgende CSS Anpassungen habe ich für Cookie Notice vorgenommen:

Cookie Info Law

Cookie Info Law

Cookie Notice ohne Hover Effekt

Cookie Notice ohne Hover Effekt

Cookie Notice mit Hover Effekt

Cookie Notice mit Hover Effekt

Um das angezeigte Orange durch seine eigene Cooperate-Design-Farbe zu ersetzten, genügt es den Farbcode #f29400 durch seinen eigenen auszutauschen.

Fazit:

Mit dem Plug-In „Simple Custom CSS and JS“ läßt sich relativ einfach zusätzlicher CSS- und JS-Code einbinden und mit dieser CSS-Vorlage kann ich mit kleinen Code-Änderungen die Cookie Leiste auf das entsprechende Corporate Design anpassen.