Make Your Cookie Banner Look Delicious

 
A red and blue striped background with a white banner holding the headline text for this blog post.
 

We don’t live in the Wild West days of the Internet anymore. No longer is a person able to throw anything up online without considering what information they might be collecting from their visitors.

The potential consequences of learning specific things about a person without disclosing that you’re collecting information about them can be sobering.

With GDPR1 now a common and important law to consider, no matter where you are in the world, ensuring that all visitors to your site know what data you’re collecting about them should not be overlooked.

But having to adhere to all this Important Legal Stuff doesn’t mean we can’t put a beautiful spin on our collection notices.


Cookie Banner Styling

Squarespace, being the awesome service it is, has built easy to use methods of informing visitors that cookies are being used by your website. Their standard cookie banner is functional and informative, but it may not be the most appealing option for your website.

 
Then home page of the Dandy Cat Design website, featuring a cookie banner with white text on a black background.
 

I guess if your website has a moody color palette, then this banner will be perfect for you. A white text on an all black cookie banner does not look appealing on Dandy Cat Design, so it had to go.

Thankfully, through the magic of CSS, I’ve now got a cookie banner that’s both capable and in line with my site’s overall look.

 
The Dandy Cat Design website now featuring a cookie banner with white text on a pleasing blue background.
 

Pretty, right?

Let’s break down what’s going on in the CSS code I’m using for my cookie banner.

As far as the code goes, it’s not too complex. I’m adjusting the colors and fonts, adding a border, and messing with the confirmation button. Most of the heavy lifting is being done by Squarespace already; I’m just jazzing things up a bit.

Note before starting: when working with CSS code, be sure you’re ending each line with a semicolon. This will ensure the code works.

The very first step here is to navigate to the Custom CSS section in the Squarespace menu. Get there by going to Design -> Advanced -> Custom CSS.

I’m going to add a little bit of note code in the CSS box to keep everything organized for current and future reference. That can be done by inserting two forward slashes before your text: // Cookie Banner Styling.

 
An example of Squarespace CSS note text.
 

Under the Cookie Banner note, we’re going to start by calling the appropriate HTML code, already set by Squarespace:

.sqs-cookie-banner-v2 {

}

Easy enough. Within those opening and closing curly brackets were going to add the style we want.

I’ve got to get rid of that black color before it keeps hurting my eyes. I’ll do this by changing the hexadecimal color code2 to one that matches my site’s primary color:

.sqs-cookie-banner-v2 {
  background-color: #7193E0 !important;
}

Because the banner text is already white, I don’t have to worry about changing that, but if it’s something you want to mess with use color: #000000 !important; and change the hex code to the color you prefer.

I’m also including the !important tag to make sure my choice is overriding Squarespace’s default styling. This is an important step when adding nearly any custom code to Squarespace.

I wanted to make the banner stand out from similarly colored portions of my site, so I gave it a white border:

.sqs-cookie-banner-v2 {
  background-color: #7193E0 !important;
  border: 4px solid #fff !important;
}
 
An updated cookie banner, without appropriate text styling.
 

Things are looking good for the color of the box, but color isn’t the only thing I’m interested in here. The font in the banner also needs to match my site’s main font, “Montserrat,” and be large enough to be legible on bigger screens. I’m going to target the text in the box now:

.sqs-cookie-banner-v2 {
  background-color: #7193e0 !important;
  border: 4px solid #fff !important;
}

.sqs-cookie-banner-v2-text p {
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 1rem !important;
}
 
Another updated cookie banner, now just missing an “Accept” button with the right styling.
 

Everything is looking great so far. Well, almost everything. That confirmation button doesn’t have the same font and border styling that I’m trying to establish with this box. It’s clashing a bit, so let’s fix that by targeting the “Accept” button:

.sqs-cookie-banner-v2 {
  background-color: #7193E0 !important;
  border: 4px solid #fff !important;
}

.sqs-cookie-banner-v2-text p {
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 1rem !important;
}

.sqs-cookie-banner-v2-accept {
  font-family: Montserrat, Arial, sans-serif !important;
  font-weight: bold !important;
  border: 2px solid #fff !important;
}

And there you have it—Dandy Cat’s blue-colored, white-bordered cookie banner:

 
The newly styled and finished Dandy Cat Design cookie banner with gorgeous styling in line with the rest of the website.
 

The text and style of the banner is adjustable in Squarespace’s cookie banner settings. That can be found by navigating in the Squarespace menu to Settings -> Cookie & Visitor Data.

Here you can enable the banner, alter the text that appears in it, change the banner type, and decide on what sort of information Squarespace should collect from your visitors.


What you can do with the cookie banner within Squarespace is really only limited by your imagination.

My suggestion would be to mock up how you’d like your cookie banner to appear and then head over to the W3 Schools’ extensive CSS section to see what tools you can use to implement your design choices.

If you need some guidance, feel free to write me a comment in this post.

Informing the visitors of your site that some of their information is being collected by Squarespace (and any other service connected to your site) is not only important, but you’re legally obligated to do so.

Little steps, such as enabling the cookie banner for your site, go a long way to ensuring the safety and security of you and your visitors.

However, legal obligations don’t have to be boring. There’s no reason you can’t abide by the law and also look good while doing it. Adding some extra pizzazz is going to help your site’s design look more unified.

Have a nice day, cats.

  1. The General Data Protection Regulation is a part of European Union law that provides data protection and privacy for all individuals within the European Union and European Economic Area. Basically, anyone you might come across on the internet. ↩︎
  2. The handy W3 Schools Color Picker is a great way to find a color you like and learn what its hexadecimal code is. Give it a go. ↩︎