CMS Development

Marlene
Contributor | Platinum Partner
Contributor | Platinum Partner

Cookie Banner color gradiant

SOLVE

Hi,

 

I have a problem with the color gradiant of the cookie banner. I used custom coding for it. With the help of this forum I can see the correct banner in different browsers and on mobile too. But now I've seen that the color gradiant is no more correct (screenshot 1). It should look like screenshot 2.

 

Screenshot 1:

screenshot 1.png

 

Screenshot 2:

screenshot 2.png

 

My code:

<style>
div#hs-eu-cookie-confirmation.can-use-gradients {
background: rgba(0,0,0,1); background: -moz-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(120,120,120,1))); background: -webkit-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: -o-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: -ms-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); filter: progidXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#787878', GradientType=1 );
border-bottom: none;
box-shadow: none;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
background: rgba(0,0,0,1); background: -moz-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(120,120,120,1))); background: -webkit-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: -o-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: -ms-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); filter: progidXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#787878', GradientType=1 );
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a {
color: #e30421!important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button {
color: #ffffff!important;
border-radius: 0px;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p {
font-family: sans-serif!important;
color: #ffffff!important;
font-weight: bold!important;
}
</style>

 

Thanks a lot!

 

Best regards,

Marlene

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Cookie Banner color gradiant

SOLVE

Hi @Marlene 

change the

div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
background: rgba(0,0,0,1); 
background: -moz-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(120,120,120,1)));
background: -webkit-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: -o-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%);
background: -ms-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%);
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#787878', GradientType=1 ); }

to

div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
background:rgba(0,0,0,0);

this should help 🙂

 

If don't add an !important rule to it so it looks like this

div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
background:rgba(0,0,0,0) !important;

also you should clear your browsers cache or check it in incognito mode

 

regards,

Anton

 

Anton Bujanowski Signature

View solution in original post

0 Upvotes
2 Replies 2
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Cookie Banner color gradiant

SOLVE

Hi @Marlene 

change the

div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
background: rgba(0,0,0,1); 
background: -moz-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(120,120,120,1)));
background: -webkit-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: -o-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%);
background: -ms-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%); background: linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%);
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#787878', GradientType=1 ); }

to

div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
background:rgba(0,0,0,0);

this should help 🙂

 

If don't add an !important rule to it so it looks like this

div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
background:rgba(0,0,0,0) !important;

also you should clear your browsers cache or check it in incognito mode

 

regards,

Anton

 

Anton Bujanowski Signature
0 Upvotes
Marlene
Contributor | Platinum Partner
Contributor | Platinum Partner

Cookie Banner color gradiant

SOLVE

Hi @Anton,

 

great thank you very much!

 

Best regards,

Marlene

0 Upvotes