How to Customize Your Squarespace Cookie Alert with CSS
Learn how to customize the style of your Squarespace cookie alert using both the platform's design interface and custom CSS.
In this tutorial, we'll adjust text, button labels, disclaimer text size, and color themes directly within the editor. Then we'll dive into custom coding to further personalize your cookie alert, including changing background colors, button styles, and the Manage Cookies overlay.
📝 Original blog post → https://insidethesquare.co/squarespac...
🔔 Don’t forget to like and subscribe for more Squarespace tips and tricks! ❤️
Chapters:
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
Here is the base code from this tutorial:
.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 Resources:
📚 Squarespace CSS Resources → https://insidethesquare.co/css
🍿 Free Squarespace tutorials → https://insidethesquare.co/tutorials
🙋♀️ Have a question? Check out my code troubleshooting tips → https://insidethesquare.co/code-help
- -
The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace Inc. The accuracy of this information is subject to change. #squarespacetips #squarespacetutorial #squarespace #learnsquarespace #learncoding #squarespacetricks #squarespacetraining #squarespacecode
Watch video How to Customize Your Squarespace Cookie Alert with CSS online without registration, duration hours minute second in high quality. This video was added by user InsideTheSquare with Becca Harpain 30 July 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 352 once and liked it 16 people.