Pementa Posted July 10 Share Posted July 10 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
Solution paul2009 Posted July 10 Solution Share Posted July 10 (edited) 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 > Website > Cookies 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 July 10 by paul2009 leannemarie 1 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. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
lilyg Posted July 10 Share Posted July 10 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
samanthatroulis Posted July 10 Share Posted July 10 I was using this to customize the font on my cookie banner, but now it isn’t working. .sqs-cookie-banner-v2 p { color: #fafbff !important; font-family: 'New Kansas Regular'; letter-spacing: .7px; } Everything else that I customized in the cookie banner is still working except for that one. Link to comment
Lesum Posted July 10 Share Posted July 10 @samanthatroulis Hi! Can you share your site URL for context? 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
CADESIGN Posted July 11 Share Posted July 11 Will the New Changes to the Cookie Banner send our Google Account Consent permissions in line with the new Consent Mode V2 regulation? Link to comment
samanthatroulis Posted July 11 Share Posted July 11 @Lesum samanthatroulis.com Thank you! Link to comment
Z_Creative Posted July 11 Share Posted July 11 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: 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. 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
paul2009 Posted July 11 Share Posted July 11 (edited) 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 July 11 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. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
CADESIGN Posted July 11 Share Posted July 11 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
inside_the_square Posted July 11 Share Posted July 11 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 lilyg and seleniumland 1 1 🤓 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 Link to comment
Lesum Posted July 11 Share Posted July 11 @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
Z_Creative Posted July 12 Share Posted July 12 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? Link to comment
paul2009 Posted July 12 Share Posted July 12 (edited) 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 July 12 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. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
Z_Creative Posted July 12 Share Posted July 12 3 hours ago, paul2009 said: 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. Thanks so much for the advice. Unfortunately, it doesn't seemed to have changed it. My site link as requested 🙂 Link to comment
paul2009 Posted July 12 Share Posted July 12 The new Cookie Banner has been built to accommodate buttons up to 150px wide, with longer captions being clipped: 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. /* 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 ⬇️ Z_Creative 1 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. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
Z_Creative Posted July 12 Share Posted July 12 @paul2009 Thank you so much ! This did the trick 🙂 paul2009 1 Link to comment
mvelentzas Posted July 14 Share Posted July 14 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? Link to comment
paul2009 Posted July 14 Share Posted July 14 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. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
CADESIGN Posted July 15 Share Posted July 15 We are being told by Google that: "The domain (*****) is sending data to Google without properly indicating the user's consent choice in cases where the user has either explicitly denied consent or declined to interact with the consent banner. Please review our guide for troubleshooting consent mode here, and reach out to your CMP if you need assistance correcting your implementation." Our Google account is connected to our Squarespace account, shouldn't the data indicating a users consent choices be being transmitted to google? Link to comment
Z_Creative Posted July 15 Share Posted July 15 As far as I am aware the squarespace banner doesn't manage the meta pixel consent (at least for me) and I have heard google services have a similar problem. There was a post on how to do consent for google ads (google tag manager) here. I adapted this for the meta pixel here. Hopefully this is of some help. Link to comment
mooch Posted July 17 Share Posted July 17 Hi @Pementa Did anyone solve this for you as I'm having the same issue, I much prefer the simple text links for the buttons as I like to make my cookie banners not that prominent, I find the buttons now looks so silly and big. Anyway to simple convert the new button style back to simple text links would be useful. Link to comment
Pementa Posted July 26 Author Share Posted July 26 On 7/17/2024 at 4:47 PM, mooch said: Hi @Pementa Did anyone solve this for you as I'm having the same issue, I much prefer the simple text links for the buttons as I like to make my cookie banners not that prominent, I find the buttons now looks so silly and big. Anyway to simple convert the new button style back to simple text links would be useful. Not yet, I still can't change the buttons to simple text links. Link to comment
mgroeteke Posted July 26 Share Posted July 26 (edited) Question to the coders here: is there a way to make the floating cookie options sticky ? I noticed it will scroll up together with content while for example in a gallery, while still floating over the content. Not really looking good. I'm on "Wells" template. My website is: https://architectureshooting.com Edited July 26 by mgroeteke markus/architectureshooting web site: http://architectureshooting.com Link to comment
tuanphan Posted July 27 Share Posted July 27 15 hours ago, mgroeteke said: Question to the coders here: is there a way to make the floating cookie options sticky ? I noticed it will scroll up together with content while for example in a gallery, while still floating over the content. Not really looking good. I'm on "Wells" template. My website is: https://architectureshooting.com I see it already sticky on scroll up/down paul2009 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment