CSS Anpassung bei Cookie Notice
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 - Leiste */
#cookie-notice {
background: rgba(255, 255, 255, 0.9 ) !important; /*Hintergrundfarbe der Leiste*/
border-top-color: #444; /*Farbe des Rahmens - oben*/
border-top-style: solid; /*Rahmenart des Rahmens - oben*/
border-top-width: 4px; /*Dicke des Rahmens - oben*/
}
/* Cookie - Button */
#cookie-notice .button.wp-default {
background: #f29400; /*Hintergrundfarbe*/
border-color: #444; /*Rahmenfarbe*/
color: #fff; /*Schriftfarbe*/
text-shadow: 0 0px 0 #fff; /*deaktivierung des Schattens bei der Schrift*/
font-size: 13px; /*Schriftgröße*/
border-radius: 6px 6px 6px 6px; /*Abrundung der Ecken*/
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.6); /*Schatteneffekt rund um die Buttons*/
}
/* Cookie - Button - Hover Effekt */
#cookie-notice .button.wp-default:hover, #cookie-notice .button.wp-default:focus {
background: #fff;
border-color: #444;
color: #f29400;
}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.
Damit diese Konfiguration auch funktioniert, gehört in den Einstellungen von Cookie Notice geprüft, dass der Einstellungspunkt „Buttonstil“ auf „WordPress“ eingestellt ist.
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.
Sie wollen keinen Blogartikel mehr von mir versäumen...
…dann tragen Sie sich gleich in den Newsletter ein!
Sie bekommen nach dem Absenden der Anmeldung einen Bestätigungslink, zur Überprüfung Ihre E-Mailadresse. Sollten Sie diese Mail nicht erhalten, überprüfen Sie bitte auch Ihren Spam-Ordner.
Danke! Feine Sache! VG Tim
Hallo Martin,
Dein CSS funktioniert leider nicht wenn man „Cookie Notice“ frisch mit dem Grundeinstellungen installiert und aktiviert:
Du solltest schon erwähnen, dass man dafür in den Einstellungen den „Button style“ = „WordPress“ stellen muss!
Damit klappt es dann allerdings SUPER.
Danke für dein CSS, sieht super aus!
Gruss Carsten
Hallo Carsten,
herzlichen Dank für dein Feedback. Ich habe oben deinen Hinweis mit dem Button Style ergänzt.
Liebe Grüße
Martin
Hallo Martin,
prima Artikel. Sag bitte, kann man den Font von Cookie Notice ebenfalls anpassen?
Danke und schöne Grüße,
Boris
Hallo Boris,
in dem du den CSS-Code „font-family: ‚meine-schrift‘;“ innerhalb der geschwungenen Klammer ergänzt.
z.B.:
#cookie-notice .button.wp-default {
font-family: ‚Source Sans Pro‘;
..
}
lg Martin
Vielen Dank für die gezeigten Optionen.
Gibt es auch eine Möglichkeit, die Position und Größe des Banners zu beeinflussen?
Hallo,
die Position (oben oder unten) kann in den Optionen des Plug-In konfiguriert werden.
Die Höhe kann mit folgender CSS-Ergänzung angepasst werden:
#cookie-notice {
height: 500px; /*die Höhe auf den gewünschten Wert einstellen/*
}
Liebe Grüße
Hallo Martin,
richtig toller Artikel, der mir auch bei meinen CSS-Anpassungen für die Cookie Notice geholfen hat.
Ich habe noch einige Sachen mehr abgeändert und z.B. den Buttons unterschiedliche Farben gegeben.
Vielleicht freut sich ja ein Leser von dir darüber etwas zu lesen: https://scueeze.com/blog/wie-ich-die-cookie-einwilligung-kostenlos-umgesetzt-habe/
Liebe Grüße
Kevin
Hallo Kevin,
danke für deinen tollen, ergänzenden Artikel 🙂
Liebe Grüße
Martin