How to Customize Your Squarespace Cookie Alert
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About This Tutorial
This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes
Want to create a custom cookie alert that perfectly matches your Squarespace website's style? This is the tutorial for you, Squarespacer!
In the video below, I'll walk you through the process of customizing your Squarespace cookie alert from start to finish. We'll cover everything from using the built-in design options to diving into custom CSS for advanced styling.
Whether you want to change the colors, fonts, or even the layout of your cookie alert, this tutorial will equip you with the knowledge and skills to create a banner that not only complies with legal requirements but also enhances your website's overall design.
Get ready to take control of your cookie alert and make it uniquely yours!
Squarespace Tutorial
Here are some helpful timestamps for the video above:
00:00 Introduction to Customizing Cookie Alerts in Squarespace
00:42 Navigating Squarespace Settings for Cookie Alerts
01:13 Customizing Banner Style Using Squarespace Settings
02:31 Advanced Customization with Custom Code
03:50 Editing Button Styles with Custom Code
04:29 Customizing the Manage Preferences Overlay
06:29 Final Tips and Resources
Code Example
Here are the codes used in this tutorial.
You’ll find more selectors and style plugins like this inside the Squarespace CSS cheat shet, available at insidethesquare.co/css
Be sure to edit the values so they match the style of your own website!
.gdpr-cookie-banner{
background:#efefef!important;
border:2px solid pink;
box-shadow: 5px 5px 15px #333
}
.accept.sqs-button-element--primary{
background: green!important
}
.decline.sqs-button-element--secondary{
background: red!important
}
.manage.sqs-button-element--tertiary{
background：#fff!important
｝
.manage-cookies-overlay{
background: pink
}
.manage-cookies-overlay h3{
text-transform: uppercase;
font-size: 20px;
letter-spacing: 5px
}Related Content
#️⃣ Block ID Chrome extension → insidethesquare.co/chromeext
📚 Squarespace CSS Resources → insidethesquare.co/css
🍿 Free Squarespace tutorials → insidethesquare.co/tutorials
🙋♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help
