Jump to content

Sharing some CSS for slight customization of the cookie banner (buttons, borders)

Recommended Posts

Posted

Site URL: https://mis.haus/

You can freely customize the values to your taste. These are just what I have on my website.

Go to "Website" > "Pages" > "Website Tools" > "Custom CSS" to add these code snippets.

 

To add a white 4px border around your entire cookie banner, have sharp edges, and custom width:

// Cookie Banner Border, Corner Radius, and Width //
.gdpr-cookie-banner {
  border: solid 4px #FFF !important;
  border-radius: 0px !important;
  width: 425px
}

 

To add a 1px border to your cookie banner's decline button to match the accept button's border:

// Cookie Banner Decline Button Border //
.decline.sqs-button-element--secondary {
  border: 1px solid white !important;
}

 

To add a 1px border to your cookie banner's manage cookies button to match the accept button's border:

// Cookie Banner Manage Button Border //
.manage.sqs-button-element--tertiary {
  border: 1px solid white !important;
}

 

To add a 2px border to and change the background color of your "Manage Cookies" popup:

// Manage Cookies Background and Border //
.manage-cookies-overlay {
	border: 2px solid white !important;
	background: #000 !important;
}

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.