Jump to content

What happened with the cookie banner

Recommended Posts

Hi there!

Opened our website today and the cookie banner was a mess. Tried editing it and it's more or less back on track again, but those huge buttons are in the way, and I can't find how to change them back to simple links.

Also, a cookie preferences link was inserted in the footer without any consideration for the layout or design, not even a mail to announce the change. Now the footer is a hot mess, with spacing, padding and margins broken, and we're changing it back, but it's half an hour of extra work when our company is very busy. And there may be also broken things we did not detect yet.

Anyone else experiencing this?

Link to comment
4 hours ago, Pementa said:

Opened our website today and the cookie banner was a mess. Also, a cookie preferences link was inserted in the footer without any consideration for the layout or design, not even a mail to announce the change. Anyone else experiencing this?

@Pementa Squarespace are in the process of rolling out a new cookie banner.

If your website has been updated, you'll find the new settings in Settings > WebsiteCookies and Data Privacy, instead of Website Tools

There are some great new options, including the Manage Cookies feature that you mentioned. This allows visitors to manage their choices after consenting, which is important for those with visitors in the EU and elsewhere. 

If you've used any CSS to customise the old cookie banner, you may need to revisit this due to the changes.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Hi everyone. A while back I added some custom CSS (with code I found online, as I'm not a coder) so that my cookie banner matched the rest of my brand colors and fonts. It worked perfectly for several months, and a couple of days ago it suddenly stopped working. The font is still the one I set up, but the colors I lost, it's just a big ugly black and white box. I'm adding the code below, can anyone help?

 

/*Cookie Banner*/
/*Cookie Banner*/
.sqs-cookie-banner-v2 p,  {
color: #ffffff !important;
font-family: raleway;
font-size: 12px;
font-style: normal;
font-weight: 100;
letter-spacing: 0px;
line-height: 150%;
}

.sqs-cookie-banner-v2 {
background-color: #223247!important;
padding:20px;
}
// Button Style  //
.sqs-cookie-banner-v2.DARK.BUTTON .sqs-cookie-banner-v2-cta {
  font-family: raleway;
  background: #137170;
  border: 1px solid #137170;
  letter-spacing: 0px;
}

Link to comment

Hi,

I noticed yesterday that Squarepace has changed their style editor and the cookie banner has changed from links to buttons.

I have two issues:

  1. The text on one of my cookies doesn't fit inside the new buttons so it's not legible. I need to either make the button longer or convert the buttons back into normal linked text.
  2. The "accept" button has a primary button style and the "strictly necessary" button has a secondary button style.
    To comply with some law I honestly can't remember the name of, the accept button shouldn't be so much more appealing (green for go!) than the other button so I want to change them both to the tertiary button style.

Any help would be greatly appreciated. I am happy implimenting small bits of css and code but I really dont know how to reference the cookie banner in my css, or how to change buttons.

Many thanks,

Zoe

Link to comment
5 hours ago, CADESIGN said:

Will the New Changes to the Cookie Banner send our Google Account Consent permissions in line with the new Consent Mode V2 regulation?

For third-party cookies, if a provider offers a "consent mode", Squarespace now (with this latest update - 10 July 2024) sends the appropriate consent signal based on the visitor’s category choices:

  • Google Analytics:  Google’s consent mode is automatically integrated when added through the API keys panel
  • Meta Pixel: Meta’s consent mode is automatically integrated when added through the API keys panel
  • YouTube Videos: YouTube Privacy Enhanced Mode is automatically integrated when a video is added through the Video Block.

To use this feature, you must ensure you display either a Manage or Decline button to allow your visitors to decline cookies.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
57 minutes ago, paul2009 said:

Google Analytics:  Google’s consent mode is automatically integrated when added through the API keys panel

That is great, it seems. we have everything in place for this although Google still seem to be telling us changes need to be made. I will ask them to re-review. 

Was this Consent Mode Integration only deployed by squarespace on this latest update?

Link to comment

Hey @lilyg & @samanthatroulis Squarespace changed all of the CSS selector classes for cookie banner elements yesterday - even for version 7.0 sites.

Here are the new selectors; and for those of you with my Squarespace CSS cheat sheet, it has been updated and I've added some new style plugins too.

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

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment

@samanthatroulis Hi! You can update your existing code to the following:

.cookie-banner-mount-point p.disclaimer-text {
    font-family: 'New Kansas Regular' !important;
    color: #fafbff !important;
    letter-spacing: .7px;
}

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

I managed to fix my buttons to look how I wanted with this css

.decline.sqs-button-element--secondary {
  min-width: 290px !important;
  color: #919191 !important;
  border: 2px solid #919191 !important;
}

.decline.sqs-button-element--secondary:hover {
  min-width: 290px !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  background-color: #919191 !important;
}

.accept.sqs-button-element--primary {
  color: #919191 !important;
  border: 2px solid #919191 !important;
  background-color: #FFFFFF !important;
}

.accept.sqs-button-element--primary:hover {
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  background-color: #919191 !important;
}

The only problem I have now is that on mobile the buttons are clipped as they extend off the screen.

I've attached an image of how the mobile cookie bar looks at the moment.

Does anyone have any tips for how to shrink the gap between the buttons or stack them vertically to fix this?

cookie banner button issue.jpg

Link to comment
4 hours ago, Z_Creative said:

the buttons are clipped

Have you tried setting a max-width on the buttons instead of a min-width. By default, the buttons have a max-width of 150px.

If it doesn't help, please share a link to the site.

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

The new Cookie Banner has been built to accommodate buttons up to 150px wide, with longer captions being clipped:

image.png.2bf9e7b9b42ad92717da8da6d2ba18b2.png

Your CSS overrides this width restriction, but then you run out of space 🙂.

I haven't fully tested this, but I was able to wrap your super long button with the following CSS (in addition to forcing the max- or min-width). Let me know if this helps.

image.thumb.png.df23be84d1c3a45fe69716479848f5bd.png

/* Wrap Long Cookie Buttons */
@media screen and (max-width: 767px) {
  .gdpr-cookie-banner .button-group {
    flex-wrap: wrap;
    row-gap: 14px;
  }
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
1 hour ago, mvelentzas said:

Is there a way to just set the buttons all to the primary style, rather than have all three (primary, secondary, and tertiary) in use?

No, but you can style the banner's primary, secondary, and tertiary buttons using some CSS 🙂. What's your site URL and how do you want them to look?

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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.