Button color change?

I had samé problém with different one, I forgot how I fixed that, maybe I just edited some cash files.

There’s a couple of ways I have this working, depending on whether you have bootstrap or not – though I just set all the buttons to the same colours. NB This is also set in my child theme – if adding via addiiontal CSS on the customiser you may need to declare !important – I can’t remember

* Style for cookie banner buttons*/
.cn-button.wp-default
{
background: white;
color: #0d0d48;}

/* Style for cookie banner button*/
.cn-button.bootstrap
{
background-color: #2c9c49;
color: black;}

aaahh..a CSS hack. I thought that we had a code hack so that the settings from the admin are taken into account ??

I’ll try the CSS hack if there is no other solution.

Thanks for the hint!

Didier.

Yeah I couldn’t get the css class for the button to work. That’s fine though – I’m always styling a fair few other things in my child theme anyway ??

Great. A small CSS custo and the trick is done. Only one class is enough in my case. This is my setting:

/* Style for cookie banner button*/
.cn-button.bootstrap
{
background-color: #2c9c49;
color: white;
letter-spacing: 1px;
font-size: 1em !important;
font-weight: 400 !important;
font-family:Roboto, Arial, Helvetica, sans-serif;
}

Thanks for the hint!

Now let’s pray that this button bug is fixed one day. Amen ??

Didier.

Where did you put this css code? We need to change the class name?

No, not the class name as the plugin is not taking it.

You add it as custom CSS in your theme custom css section (if you have that), or via plugin, or child theme style.css.

The class must be called “.cn-button.bootstrap” (in my case). I took the CSS values from a button of my website, and I applied the same CSS values for this class. Mostly background color, text color and font family.

Not great as solution, but it is acceptable.

PS: I used the browser console to confirm what class is used for the Cookie notice buttons.

Didier.

• This reply was modified 4 years, 6 months ago by swissspaceboy.

I put it in style.css but nothing…

ok.

1. see what class you need to change? .cn-button.bootstrap:nth-child(3) is a bit strange for that 3rd child. Keep only “.cn-button.bootstrap.”
2. style.css should be good, maybe add “!important” so that this CSS is taken into account after the one from Cookie Notice plugin.
3. in developer console, is your new CSS class definition taken into account at least?

Didier.

Yes i put it like yours but nothing.

My console shows this:

<a href="#" id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie button bootstrap">OK</a>

Any idea?

• This reply was modified 4 years, 6 months ago by mf_iii.
• This reply was modified 4 years, 6 months ago by mf_iii.
• This reply was modified 4 years, 6 months ago by mf_iii.

My html on the “yes” button

<a href="#" id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie cn-button bootstrap btGradient btFormButton" aria-label="Oui">Oui</a>

So the same HTML. Your definition of the custom CSS is not taking into account. What do you see as style in the console?. I have in that order:

#cookie-notice .cn-button {
    margin: 0 0 0 10px;
    border: none;
}
#cookie-notice, #cookie-notice * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.cn-button.bootstrap {
    background-color: #2c9c49;
    color: #fff;
    letter-spacing: 1px;
    font-size: 1em !important;
    font-weight: 400 !important;
    font-family: Roboto,Arial,Helvetica,sans-serif;
}

The last one is my custom one.

Didier.

#cookie-notice .button.bootstrap {
    margin-right: .3em;
    margin-bottom: 0;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top,#08c,#04c);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
    background-image: -webkit-linear-gradient(top,#08c,#04c);
    background-image: -o-linear-gradient(top,#08c,#04c);
    background-image: linear-gradient(to bottom,#08c,#04c);
    background-repeat: repeat-x;
    border-color: #04c #04c #002a80;
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
    box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 1px 2px rgba(0,0,0,.05);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    padding: 2px 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

I dont know why some elements are deleted

They have a line on them like disabled

yes..your class is “button” instead of “cn-button”. Strange.

In your style.css, you can define your css as .button.bootstrap{} and style it here.

I am not an expert on all this CSS stuff.

I put it like that in all places but nothing ??