Hola! ¡Tenemos nuestra Comunidad en Español!

How can I style the cookie alert banner? I want it to be shown at the bottom of the window.

Highlighted
Occasional Contributor

The cookie banner styling is located in the div id="hs-eu-cookie-confirmation" and div class="can-use-gradients". Unfortunately it's located in a system stylesheet, which is uneditable.

 

I tried adding these IDs/classes to my own stylesheet, but can't seem to get it to override the system stylesheet.

 

Has anyone had success with this?

5 Replies 5
Community Manager

Hey @HappyTaty do you have any resources you can share with @jmpimental, I know you've seen this query come up a lot Smiley Happy

Reply
0 Upvotes
Occasional Contributor

@roisinkirby Thank you! It would be great to have some more info/help on this Smiley Happy

Reply
0 Upvotes
New Contributor

Hi  @jmpimental,

We use Hubspot in combination with a Wordpress site. But basicly we overide the css styling that comes out of the box with a !important styling. Not the prettiest to use but it is effective.

Example:

#hs-eu-cookie-confirmation{
                   position:fixed!important;
                   max-width:400px!important;
                   margin-left:70%!important;
                   bottom:0;
                   background-color:#3AB49C!important;
                   top: auto !important;
                   background-image:none!important;
}

 

#hs-eu-cookie-confirmation-inner{

                   text-shadow:none!important;

}

 

Hope that helps

Reply
0 Upvotes
Occasional Contributor

hi!

 

thanks for posting. 

 

HS actually changed the css classes to apply the changes.

 

However, and here comes the time-saver,  these only work if you don't have entered any custom stylings in the HS settings in the admin sections. Otherwise, HS will create a custom CSS stylesheet and will not allow you to overwrite the stylings in the code.

 

/* =============== EU Cookie Confirmation Bar =============== */

/* Confirmation Outer Wrapper*/
#hs-eu-cookie-confirmation {}

/* Confirmation Inner Wrapper*/
#hs-eu-cookie-confirmation-inner {}
#hs-eu-cookie-confirmation-inner p{}

/* Confirmation Button */
#hs-en-cookie-confirmation-buttons-area {}
a#hs-eu-confirmation-button {}
HubSpot Moderator

Hi, 

 

A colleague of mine actually put together an article on how to customize this banner. 

 

You can find the original article below. 

https://community.hubspot.com/t5/GDPR/HOW-TO-Customize-Your-Privacy-Policy-Banner/td-p/189069

 

@cbarley 

 

Let me know if this article helps or if it should be updated.