How to style the EU cookie banner in Squarespace

I know I'm not the only one still running around making sure everything on my site is ready for the GDPR deadline, and since that includes setting the EU cookie banner I wanted to share a quick snippet that my lovely friend Yana Dirkx from Bliss & Gold came up with to make the awful Squarespace cookie banner look much much nicer!

 

Note: if you're wondering where to activate the banner simply go to Settings > Cookies & Visitor Data and enable it. I chose to set the default text and then changed it slightly and added a link to my privacy notice.

 

Without further ado, here's the final result and the code you need, you can adapt it to fit your site's brand like I did with mine!

EU cookies banner Squarespace
/* This changes the layout of the entire element */
/* Make sure to use “!important" to overwrite values that are a part of the original code */
.cookie-notice {
  background: #d88c76 !important;
  color: #fff !important;
  max-width: 320px !important;
  padding: 20px 30px !important;
}

/* This changes the styling of the “More information” link */
/* To add the link to your text, just edit the cookie banner in your Squarespace settings and link the text “More information” to your data or privacy policy */
.cookie-notice a {
  text-decoration: underline !important;
  color: #fff !important;
}

/* This changes the styling of the button */
.cookie-notice .accept {
  background: #ffffff !important;
  color: #d88c76 !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  border: 0px !important;
  border-radius: 5px !important;
  padding: 0px 20px !important;
  margin-top: 0px !important;
  box-sizing: auto !important;
}

 

Until next time,

B.

 

LIKED THIS POST?

I'd love it if you shared!