Override default cookie button color

Developer Support CMS Development
1

Does anyone know if its possible to override the styling of the cookie ‘Accept’ button?
I’ve been able to add in my own css for styling the main message and positioning the button, but there seems to be some default css controlling the color which I can’t override as it has ‘!important’ after it.
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button {
background-color: #425b76!important;
border: 1px solid #425b76!important;
}

Thanks in advance

2

Hi @ben-duchy,

Since the cookie css is loaded directly into the body it will override the css settings from the head.

If it’s only the color - you can change it in the settings (settings->cookie).

If you want to change more you can try following things:

- Add your stylings in the website settings(settings->website->HTML Footer). I know it’s not great to load css in the footer but it worked for me a few times.

- try some jquery find and append/css. Like

$(body).find('a#hs-eu-confirmation-button').css('background-color','#425b76')

- (very “dirty” solution) create a rich-text element in the global footer open it in the sourcecode view and paste your stylings into it. Place/Move it as the last element in the footer(if you have some js there which need to be the last element place the rich-text above them)

best,

Anton

3

Thanks @Anton, I don’t know how I missed that one - I’ll blame the long week!
Yeah I changed the colour in the settings as you suggested and it worked. Thansk again :grinning_face: