In this tutorial, you’ll learn how to customize the colors of your cookie alert using CSS in Squarespace. A few things to note before we get started:
⚠️ This was recorded in my Squarespace 7.1 demo site but the codes are the exact same for any version and theme.
✨ There is more than one way to do this! This is just one approach of many because code is super customizable.
📄 You can learn more about borders at (https://insidethesquare.co/border) and more about color options at (https://insidethesquare.co/colors)
🙋 If you need any help along the way, head on over to insidethesquare.co/code-help to see my current support options.
Ready to rock? Here are the steps to turn on the cookie alert:
1 – Navigate to settings
2 – Select Cookies & Visitor Data
3 – Choose light or dark / bar or pop-up / opt-in or opt-in & out
4 – Optional: select customize to change the text and accept/deny option style
5 – Navigate back to your main menu
6 – Select Design
7 – Select CSS
8 – Customize your alert using the codes below!
SELECTORS FOR COOKIE ALERT OPTIONS
Cookie Alert
.sqs-cookie-banner-v2
Cookie Alert Disclaimer Text
.sqs-cookie-banner-v2 p
Cookie Alert Accept Option
.sqs-cookie-banner-v2-accept
Cookie Alert Decline Option
.sqs-cookie-banner-v2-deny
PREMADE CODE IDEAS
Decline red / Accept green
.sqs-cookie-banner-v2-accept {background:green!important}
.sqs-cookie-banner-v2-deny {background:red!important}
Decline red / Accept green on hover
.sqs-cookie-banner-v2-accept:hover {background:green!important}
.sqs-cookie-banner-v2-deny:hover {background:red!important}
Rounded Buttons
.sqs-cookie-banner-v2-accept, .sqs-cookie-banner-v2-deny {border-radius:20px}
Box shadow for it all
.sqs-cookie-banner-v2 {box-shadow: -15px 0px 15px }
Inset Shadow
.sqs-cookie-banner-v2 {box-shadow: inset 2px 2px 10px #ccc; background:#FFF!important;}
.sqs-cookie-banner-v2 *{color:#000!important}
Raised buttons on hover
.sqs-cookie-banner-v2-accept, .sqs-cookie-banner-v2-deny {box-shadow: 2px 2px 10px #ccc; }
.sqs-cookie-banner-v2 {box-shadow: inset 2px 2px 10px #ccc; background:#FFF!important;}
.sqs-cookie-banner-v2 *{color:#000!important}
.sqs-cookie-banner-v2-accept:hover, .sqs-cookie-banner-v2-deny:hover {box-shadow: 2px 2px 5px #ccc; }
—
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 50 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
—
The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace
