Cookie Banner color gradiant

SOLVE
Marlene
Contributor | Platinum Partner

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

Accepted Solutions
Anton
Solution
Key Advisor | Diamond Partner

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

 




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

0 Upvotes
2 Replies 2
Anton
Solution
Key Advisor | Diamond Partner

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

 




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

0 Upvotes
Marlene
Contributor | Platinum Partner

Hi @Anton,

 

great thank you very much!

 

Best regards,

Marlene

0 Upvotes