topic Re: How can I style the cookie alert banner? I want it to be shown at the bottom of the window. in CMS Development

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

jmpimental — Tue, 06 Feb 2018 20:11:11 GMT

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?

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

roisinkirby — Thu, 08 Mar 2018 12:49:38 GMT

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

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

jmpimental — Thu, 08 Mar 2018 16:23:51 GMT

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

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

rutger12345 — Thu, 10 May 2018 19:49:39 GMT

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

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

SebastianT — Mon, 01 Apr 2019 07:58:28 GMT

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

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

jzilch — Mon, 01 Apr 2019 08:43:55 GMT

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.