Change cookie banner colors/fonts

[pkoopmans]

How can I adjust the layout (colors / fonts and button) of the standard cookie banner so that it fits better with the layout of my site?

Thanks,

Pieter

[Bernadette3]

It's helpful for others if they can see the live site, @pkoopmans. Can you please post a link? 

[pkoopmans]

Hi,

My site adress: www.koopmansgezondheidsrecht.nl. But my site is not always live yet. I'm still working on it. And that does also not really seem necessary to me because it is the standard Weebly banner that I want to change.

Thanks,

Pieter

[Bernadette3]

On second thought, adjusting any settings to the cookie banner is probably not something you would want to do. You wouldn't want to find yourself in a situation where the banner doesn't properly show, and I highly doubt anyone on community would want to assume responsibility for that as well. 

I'm sorry, but I definitely suggest waiting it out a bit. GDPR rules are still fairly new as our the tools in the editor. You can always submit a feature request requesting the ability to edit the banner colors, though.

https://community.weebly.com/t5/forums/postpage/board-id/IdeaExchange/search-before-post-mode/true

[pkoopmans]

I just want to make some minor changes to the layout. I am a lawyer so I know the legal risks of the GDPR but I do not worry about it in this case. Does anyone have an idea where I can adjust this.

Thanks! Pieter

[Adam7]

I would guess that the CSS for that is not in the CSS you find in Theme > Edit HTML / CSS.  You could probably override the CSS with your own code, though.

[pkoopmans · Accepted solution]

I found the solution by adding some simple CSS code at the main.less, for example:

.kb-content {
	color: #B45F04 !important;
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	padding-right: 15px !important;
	Padding-left: 15px !important;
	}

.kb-container {
	background: #028090 !important;
	font-family: 'Montserrat', sans-serif !important;
	border-top: none !important;
	}

.kb-notice-btn {
	background: #f05d5e  !important;
	border-radius: 80px !important;
	}
	
.kb-remind-link {
	color: #000 !important;
	}
   

 Of course, other values ​​can be adjusted.

For me this is working in Chrome and Edge without any problems at my test site:

[wireandwings]

Thanks! That was very helpful. I was able to change the font size as well in my quest to be ADA compliant, also a big legal concern.

However, the link color of the website we are directed to (youronlinechoices.eu) is still super low contrast. Any idea how I can change the link color? I'm hoping for white, since the background is dark. The main link color I have on the rest of the site is dark, too, so defaulting to that won't help.

Thanks for any help you can give!