How to customise the new cookie banner using CSS - Squarespace 7.1 [2024]

Squarespace recently introduced a new cookie banner, and here’s a list of all the CSS selectors you need to know about.

//Cookie Banner 
.gdpr-cookie-banner

//Disclaimer Text
.gdpr-cookie-banner.full-styling.popup .disclaimer-text

//All Buttons
.button-group

//Accept Button
.accept.sqs-button-element--primary

//Decline Button
.decline.sqs-button-element--secondary
 
//Manage Button
.manage.sqs-button-element--tertiary

//Manage Overlay
.manage-cookies-overlay

//Manage Overlay: Section Titles
.category-selection

//Manage Overlay: Description (also applies to on/off labels)
.category-description

//Save Preferences Button
.manage-cookies-overlay .save .sqs-button-element--primary

Example:

Curved corners

//Cookie Banner
.gdpr-cookie-banner {
  border-radius: 10px;
}