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

[jmpimental]

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?

[jzilch]

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. 

[rutger12345]

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

[SebastianT · Accepted solution]

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 {}

[roisinkirby]

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

[jmpimental]

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