styling the cookies banner…

Hi,

For starters, this is how it looks now at my end:
https://snag.gy/kvJ0B3.jpg

After accepting the cookies, you will not see the bar until the period you set in settings to “remember” the choise of a visitor.

Set it to a minimum of one day, so it will show up quicker.
Work arounds are:

Delete all cached cookies from your browser ( google how to do that ).
Open an in private window in your browser.

Hope this helps!
Annie

thank you so much, that is very helpful, a perfect answer!!!

Can you by any chance help me with what css I need to target to change the styling of the banner?? or alternatively, where can i find the css for the buttons and banner?

thank you!

Hi,

You’re welcome!

Well, in the settings of cookie notice, you are able to chose color of the bar and font.
Also you have 3 options to give the button another style.
Did you know that, or do you want more styles options anyway?

Annie

Hi,

If you want some more css styling, you can add this css code into your custimizer> extra css:

/* 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;
}

I found it here:https://www.martinkrueber.com/css-anpassung-bei-cookie-notice/ and tested it myself, it works!

Just play with the different colors to your liking.
This: background: rgba(255, 255, 255, 0.9 ) the 0.9 at the end stands for transparancy. If you want less adjust to something like 0.5

Annie

Thank you again Annie, that is exactly what I was looking for, you are awesome! Thank you for your time! xx

You’re welcome!