CMS Development

jmpimental
Participante

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

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 Respostas 5
jzilch
HubSpot Employee
HubSpot Employee

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

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
Participante | Parceiro Platinum
Participante | Parceiro Platinum

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

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
Participante

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

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
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

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

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

0 Avaliação positiva
jmpimental
Participante

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

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

0 Avaliação positiva