You've successfully subscribed to Dandy Cat Design.
Great! Next, complete checkout for full access to Dandy Cat Design.
Welcome back! You've successfully signed in.
Success! Your account is fully activated. You now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

Make Your Cookie Banner Look Delicious

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.

Sean Anderson
Sean Anderson

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 GDPR 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.

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.

Standard Squarespace cookie banner on the old Dandy Cat Design home page.

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.

A styled cookie banner on the old Dandy Cat Design website.

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.

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.

A screenshot of the Squarespace CSS editor window.

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 code 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 image of a cookie banner that’s in the process of being styled.

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;
}
An image of a cookie banner nearing completion.

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:

An image of the finished cookie banner on the Dandy Cat Design 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.

On Pinterest? Be sure to pin these images.

Website

Sean Anderson

Lover of productivity tips, Apple devices, and vegan ice cream. Mostly, I'm busy petting cats 🐱 and dogs 🐶


Dandy Cast

Subscribe to my weekly podcast in your favorite podcast player.

Apple Podcasts icon

Apple Podcasts

Castro icon

Castro

Overcast icon

Overcast

Pocket Casts icon

Pocket Casts

Spotify icon

Spotify

Google Podcasts icon

Google Podcasts


Listen to the latest episode...