(UPDATED) How to style the EU cookie banner in Squarespace

September 2018: the following is an updated version of the code that works with the new classes and structure of Squarespace’s EU cookie banner

 

updated squarespace eu cookie banner 

Since Squarespace recently changed the structure of the EU cookie banner, I adapted the previous code to work with this new version.

They modified both the classes/ids of the HTML elements comprising the banner as well as the original layout setup, so make sure to check and update yours to keep it looking nicely!

 

Style example #1

This is the code I used to set the style of the cookie banner on a client’s site to make it round!

I started with setting the banner inside the Cookie Banner Settings as light and pop up, then I went ahead and added the CSS to make it match her brand and website:

Round EU cookie banner Squarespace
/*To change the background of the banner*/
.sqs-cookie-banner-v2 {
  background: #fff !important;
  padding: 50px !important;
  text-align: center !important;
  width: 300px !important;
  height: 300px;
  border: 2px solid #519C85 !important;
  border-radius: 50%;
  box-sizing: border-box;
  display: block !important;
}

/*To style the text*/
.sqs-cookie-banner-v2-text p {
  color: #000 !important;
  margin: 0 auto !important;
  font-size: 14px;
  font-family: 'lato';
  line-height: 1.5em;
}

/*To style the button*/
.sqs-cookie-banner-v2-accept {
  margin: 0 auto !important;
  margin-top: 20px !important;
  text-align: center !important;
  display: inline-block !important;
  background: #519C85 !important;
  color: #fff !important;
  text-transform: uppercase;
  font-weight: bold;
  border: none !important;
  border-radius: 5px;
  padding: 12px !important;
}

/*To style any links inside the text of the banner*/
.sqs-cookie-banner-v2-text p a {
  color: #519C85 !important;
  text-decoration: none;
  border-bottom: 1px solid #519C85;
}

Style example #2

This other code snippet is targeting the exact same sections as before, but the style and position are a little bit different to match my own website colors!

Squarespace EU cookie banner code style example
/*To change the background of the banner*/
.sqs-cookie-banner-v2 {
  background: #ebebeb !important;
  box-shadow: 0px -2px 8px rgba(0,0,0,0.1);
  border: 3px solid #191717;
  width: 300px !important;
  display: block !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 30px;
}

/*To style the text*/
.sqs-cookie-banner-v2-text p {
   color: #191717 !important;
  font-size: 13px !important;
  font-family: 'open sans' !important;
}

/*To style the button*/
.sqs-cookie-banner-v2-accept {
  margin: 0 auto !important;
  padding: 15px 30px !important;
  margin-top: 20px !important;
  border: none !important;
  background: #fa8696 !important;
  text-align: center !important;
  display: inline-block !important;
  color: #fff !important;
}

/*To style any links inside the text of the banner*/
.sqs-cookie-banner-v2-text p a {
  color: #fa8696 !important;
  text-decoration: none;
  border-bottom: 1px solid;
}


Previous code first modification in August 2018

Here's the exact code I'm using for mine now (as of August 2018), feel free to edit anything your heart desires minus the properties in light grey – unless you want to play with the layout as well:

/*To change the styles of the main container*/
.cookie-notice {
  background: #ebebeb !important;
  border: 3px solid #191717;
  box-shadow: 0px -2px 8px rgba(0,0,0,0.1);
  color: #191717 !important;
  display: block !important;
  font-size: 13px !important;
  font-family: 'open sans' !important;
  max-width: 300px !important;
  bottom: 0 !important;
  right: 0 !important;
  top: inherit !important;
  left: auto !important;
}

/*To change the text container of the banner*/
#sqsp-cookie-banner-text {
  overflow: visible !important;
}

/*To change the text of the banner*/
.cookie-notice p {
  margin: 0 auto !important;
}

/*To change the button*/
#sqsp-cookie-banner-accept {
  background: #fa8696 !important;
  border: none !important;
  display: block !important;
  margin: 0 auto !important;
  margin-top: 30px !important;
  text-align: center !important;
}

/*To change the link inside the text*/
.cookie-notice a {
  border-bottom: 1px solid;
  color: #fa8696;
  text-decoration: none;
}

Previous code

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!


More Squarespace tips & tricks this way