How to change color of placeholder “I Agree” button

Hi @dodecadence,

Are you by any chance referring to the Cookiebanner? We have a separate section for this, you can find it at Complianz > Cookie banner > edit > Customisation, here you can choose the colors of the buttons of the banner.

If I misunderstand and you want to change the colors for a certain placeholder, let me know what page to find this, and we can help you with the CSS you can place for this.

Let me know, happy to help!

Kind regards, Kim van Dijk

hi kim,

thanks for the swift reply!

no, i’m talking about the placeholder (in my case for google maps and vimeo videos), the settings of which can be found in WP under Complianz/Settings/Cookies/Placeholder (misc.)
https://complianz.io/changing-the-google-maps-placeholder/

i would be happy with the way it looks above, but in my case it look’s like this (see link below), featuring a light grey “I agree” button, which conflicts with my white font.

https://complianz.io/leaflet-maps/

why do the placeholders on my site feature a button and a different text?
is this due to the free version of Complianz?
i can only chose the “default” Placeholder Style and various dimensions.

i’d prefer to get rid of the button entirely like on the 1st image.
but if that’s not possible, how can i change the light grey button color (incl. hover).

thanks in advance!

if you still need my website in order to help, is it possible to send via DM?

Hi @dodecadence,

There a difference in the buttons, based on choosing either Consent per Category or Consent per Service, the latter you have enabled. You can change the button with to your liking with some CSS:

button.cmplz-accept-service {
background: black;
border: 1px solid black;
border-radius: 3px;
color:white;
text-decoration:underline;
}

For hover:

button.cmplz-accept-service:hover {
background: black;
border: 1px solid black;
border-radius: 3px;
color:white;
text-decoration:underline;
}

regards Aert

• This reply was modified 1 year, 8 months ago by Aert Hulsebos.

hi aert,

thanks, this worked like a charm.

one more question if i may:

i’m unable to find options to style certain elements in the cookie banner:

1.) the background colour of the categories & descriptions when you click on “Preferences”: Functional Cookies, Preferences, Statistics, Marketing

2.) Font Color for “Always active” on “Functional Cookies” category header

am i missing something or can this, as well, only be solved via CSS?
if so, what would be the code?

thanks again for helping out.
much appreciated!

Hi @dodecadence,

You can indeed change this with some CSS under Appearance > Customize > Additional CSS as well.

For #1, the categories and descriptions:

.cmplz-cookiebanner .cmplz-categories summary, .cmplz-cookiebanner .cmplz-categories details.cmplz-category {
    background-color: lightblue;
}

For #2, the Always Active text next to the Functional category:

.cmplz-cookiebanner .cmplz-body .cmplz-categories .cmplz-category .cmplz-always-active {
    color: blue;
}

Kind regards, Jarno

hi @jarnovos,

thanks.

#1 is working fine, even though the changes aren’t reflected in the “Complianz/Style your Banner” Options, which was confusing, at first.

#2 is not working for me.
i’ve tried on 2 different sites and emptied cache.
any idea, why this could be?

btw, it would be great if these styling options could be included directly in the plugin settings, in a future update.

thanks!