Jump to content

Error parsing Custom CSS, verify Custom CSS is valid

Recommended Posts

1 minute ago, Icclebug said:

I'm still baffled by where the issue is though 

Me too. I'm still trying to suss it out. It seems bizarre that SS would be popping these banners all over the place instead of where the supposed issue is, Custom CSS?. And how are they intelligently parsing any custom CSS to determine that it is interfering with the editing capabilities of their interface? I'm baffled at this point.

@Sarah_SQSP

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
19 minutes ago, paul2009 said:

Why is this error appearing in my editor?

This week, Squarespace introduced a new editor 'feature' with the intention of highlighting custom CSS errors when users are editing other content. If errors are detected with Custom CSS, a red banner appears in the editor to warn users about the issue. 

Squarespace have done this to try to reduce the number of problems being caused by custom code that users randomly add to their sites without knowing the harm that it can cause.

Recently many more customers reported problems with the editing interface, for example Fluid Engine, but these errors were often self-inflicted - caused by users adding snippets of Custom CSS that interfere with Squarespace. As customers rarely return to the Custom CSS panel after they've added some "magic code", this new error banner should help to highlight the issue and allow them to fix it for themselves.

However, I have seen a number of reports of the banner appearing even when the Custom CSS panel is empty, so there may be some instances of "false flags" where it appears for no good reason. 

How to fix the error

If the error has appeared on your site, my advice is to remove all custom CSS and then check if the error appears. You can do this as follows:

1. Go to Design > Custom CSS 

2. Save a copy of your CSS somewhere safe. A text file is ideal for this. Do not save it in Microsoft Word as this will often cause unwanted changes to the CSS.

3. When you are sure that you have a good backup of the CSS, delete all content in the Custom CSS panel.

4. Save the changes and check to ensure the panel is now empty. When empty, you should only see the label for line 1; nothing else:

     image.png.47ee5515891f0f3fec6da4293fe9821a.png

5. If you have added any custom CSS to any other areas of your website using Code Injection, repeat this process for all remaining code. You may find this in Settings > Advanced > Code Injection and in the Settings panel of individual pages. 

6. When you have removed all CSS, refresh your browser to reload the site (Cmd-R on Mac; Ctrl + Shift +R or Ctrl + F5 on Windows).

7. Return to the page you were editing and check for the error message...

  • If the error message has gone, your CSS was the likely cause of the error. You will need to check the CSS that you backed up to find the cause of the issue. Understandably, Squarespace Customer Care cannot help you to troubleshoot your own CSS. If you had more than a few lines of Custom CSS, it may help you to pinpoint the cause of the error if you carefully re-insert short sections of your CSS until the error reappears.
  • If the error message is still shown after you have removed all Custom CSS from your site then you know that your Custom CSS is not the cause of the error message. You can now confidently go back to Squarespace Customer Care to tell them that your site shows a CSS error message but you do not have any Custom CSS on the site. They can then assist you to resolve or escalate the issue. 

Let me know if you have any questions.

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

Thanks so much for this walkthrough Paul, I really appreciate it. I've followed it and removed all CSS from the Custom CSS part and also the small amount of code injection. Then refreshed and checked, same error with all CSS removed. I've tried to get this across to SS but they don't seem to respond to my comment about removing it all and it still showing the error. I'll keep trying of course 🙂

Link to comment

My site was built by my previous developer and currently have no one managing it except myself, don't think I will want to touch that and break the whole site. But will be unsure if they have future system updates more unnecessary issues like this one will be created. More of trouble than help with their so called "add on features". 

Link to comment

Yeah, I just noticed on my website this error popped up. I could technically still edit but nothing was lining up right in the editor.  I had the FB Chat Plugin Custom CSS script, removed, cleared cache on Chrome and the error is gone. But prior to any recent update, the FB Chat plugin was working just fine. Why all of a sudden these issues? 

- Custom CSS error on Syntax line 1 " 

"<div id="fb-root"></div>"
 

Link to comment
On 11/25/2022 at 3:22 AM, johnwells said:

I had the FB Chat Plugin Custom CSS script, removed, cleared cache on Chrome and the error is gone.

<div id="fb-root"></div>

If you added the code above to your Custom CSS panel then the error message is doing its job correctly - warning you that this code is HTML and should not be added to the Custom CSS panel. HTML should be added to one of the Code Injection areas or a Code Block instead. For more information, see this guide.

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

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

So, been backwards and forwards to SS and they've been super helpful. I've spotted a couple of parse errors in the CSS and when I now drop it all into a CSS validator it's all good. However, issue still occurs. 

If I remove all CSS, clear cache, refresh page and then try - error gone. So this still suggests my CSS is the issue but I simply can't find it. 

I could do with someone casting their eye over the CSS, any takers I can DM it over? 

Thanks in advance, this is driving me mad 😞 

Link to comment
20 minutes ago, Icclebug said:

I could do with someone casting their eye over the CSS, any takers I can DM it over? 

What is the site URL?

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Look for  a capital "I" - it should be lowercase.

image.png.32a93c5b7bc518b0f47e1187975958c3.png

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Hi All,

 

I'm having the same issues here but I'm unable to pin down the cause of the errors. I ran the custom css through a validator and fixed what I could but the remaining syntax errors seem to be found on this file...

https://static1.squarespace.com/static/sitecss/59a706d4f5e2319b70240ef9/889/55f0aac0e4b0f0a5b7e0b22e/59a706d4f5e2319b70240f0e/349/site.css

My hunch is that the issue could be that our previous developer wrote the custom css in scss which then gets compiled by Squarespace and it's during that process that the errors happen.

Has anyone run into a similar issue?

Thanks!

Link to comment
10 minutes ago, WJH said:

I'm having the same issues here but I'm unable to pin down the cause of the errors.

Take a look for an error involving calc and percentages on line 1152.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Hey Paul,

 

Good catch! While I did just now fix that error you pointed out, I actually resolved the issue moments before that. The reason I kept receiving the CSS Parse Error despite me fixing the css errors was because of some browser caching shenanigans on my end. Once I cleared that, the error disappeared.

For anyone curious, just follow the steps outlined here...

https://support.squarespace.com/hc/en-us/articles/115004581087?_ga=2.247538053.348732043.1669656977-393211385.1669656974

and here...

https://support.squarespace.com/hc/en-us/articles/205815408-Clearing-your-browser-s-cache

 

Thanks for the help!

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.