Custom CSS quit, "missing opening"

It seems all my custom CSS, loaded in design, custom css has quit working. I can't figure out why. Page injection is still functioning. The custom CSS window says missing opening { but does not point to  any line of code specifically. I was not making any changes to it and it worked earlier although it is possible I was looking and deleted something. Maybe one of the coders here can take a look and  see what is going on?

14 minutes ago, derricksrandomviews said:

It seems all my custom CSS, loaded in design, custom css has quit working. I can't figure out why. Page injection is still functioning. The custom CSS window says missing opening { but does not point to  any line of code specifically. I was not making any changes to it and it worked earlier although it is possible I was looking and deleted something. Maybe one of the coders here can take a look and  see what is going on?

Can you share some screenshots where you get this message?

We set up this website about five years ago and previous colleague created a custom CSS to match the look of another website. Strangely this morning the CSS suddenly stopped applying to the Squarespace site even though we didn't change anything. Has anyone had this issue? We're on a 7.0 template.

My code in custom css,  which I have a lot of in my site quit this morning also. I thought it might be my code, because one of my other 7.0 sites seemed to be okay, but it does not have much code. I deleted it and added it back in, except for one snippet which didn't work, and all is fine now.  I guess we both need to keep our eye on for awhile.  

4 hours ago, JaneJerardi said:

Strangely this morning the CSS suddenly stopped applying to the Squarespace site even though we didn't change anything.

Folks. In some cases the cause of custom CSS not working anymore is that SS makes a change which causes your CSS to no longer be valid. I'm not saying this is the case in the cited instances. SS also has the occasional backend issues that can cause CSS oddities. It is important to understand that SS is not a static platform. It is always changing, even the old versions of SS.

On 1/19/2023 at 1:12 PM, derricksrandomviews said:

The custom CSS window says missing opening { but does not point to  any line of code specifically. I think the following code is the cause. 

#header a:active {
 text-decoration: underline !important;
}
#header a:hover {
 text-decoration: underline !important;
}
div.folder.active {
 text-decoration: underline !important;
}
}

@derricksrandomviews The error is being generated by the last curly brace. It shouldn't be there 🙃. If you remove the last brace, it will work well again.

Here's some background on why this is happening. Whenever an opening curly brace (or opening bracket) exists, it must have a matching closing brace/bracket. The same applies to closing braces/brackets. If there's an extra closing brace, it causes a syntax error. These errors can cause reduce the performance of the Squarespace platform, so they appear to be applying best practice and don't apply the CSS if it contains errors - hence why you're only noticing this now 🙂

I hope this helps.

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

I have this problem now.  Tried to upload a file in Custom CSS and it says 'Missing Opening '{'' against this code and other files that I uploaded previously.

None of them work now (they were interactive maps)

I'm not an IT expert and have no idea what has suddenly happened here, but all this worked a week ago.  Has there been some change to the coding of Squarespace in the last couple of days?

4 minutes ago, LakelandPhotoCentre said:

I have this problem now.  Tried to upload a file in Custom CSS and it says 'Missing Opening '{'' against this code and other files that I uploaded previously.

None of them work now (they were interactive maps)

I'm not an IT expert and have no idea what has suddenly happened here, but all this worked a week ago.  Has there been some change to the coding of Squarespace in the last couple of days?

I tried removing the last } as suggested above and now I get 'Syntax Error Line 1' instead.

As I say, all I'm doing is uploading a map using the tool provided in the Custom CSS area - I'm not typing in any code or anything, just following instructions.

47 minutes ago, LakelandPhotoCentre said:

I have this problem now. I tried removing the last } as suggested above and now I get 'Syntax Error Line 1' instead.

The advice about removing the curly brace was specific to Derrick's issue. 

I'd need to see your CSS to determine the cause of the error 🙂 - although please take care not to publish copyrighted code in the forum.

https://static1.squarespace.com/static/5f2815bb99143526295ae414/t/6398819b00550051423f2285/1670939046808/Photography+Coaches+Franchise+Map.jpghttps://static1.squarespace.com/static/5f2815bb99143526295ae414/t/6398882bba670f432080b74e/1670940724024/Photography-Coaches-Franchise-Map.jpg.yui3-squarespacecalendar .marker-daynum {
  font-size : 20px;
  }

/* flyout title */
.yui3-squarespacecalendar .flyoutitem a {
    font-size: 20px;
}
.eventlist-title .eventlist-title-link {
    font-size: 20px;
}

#collection-62ce8c57b953936b4da7b29d {
    header, footer {
        display: none !important;
    }
}

.scroll{ overflow: hidden!important;
position: relative!important;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 15s linear infinite;
 -webkit-animation: scroll 15s linear infinite;
  animation: scroll 15s linear infinite;}

@-moz-keyframes scroll {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }

}
@-webkit-keyframes scroll  {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
#page {overflow-x:hidden}
.testimonialSlider {
   position: relative;
 }
 .rslides {
   position: relative;
   list-style: none;
   overflow: hidden;
   width: 100%;
   padding: 0;
   margin: 0;
   li {
     -webkit-backface-visibility: hidden;
     position: absolute;
     display: none;
     width: 100%;
     left: 0;
     top: 0;
     &:first-child {
       position: relative;
       display: block;
       float: left;
     }
   }
   img {
     display: block;
     height: auto;
     float: left;
     width: 100%;
     border: 0;
   }
 }
 .rslides_tabs {
     list-style: none;
     -webkit-margin-before: 0;
     -webkit-margin-after: 0;
     -webkit-padding-start: 0;
     padding: 0;
     text-align: center;
       li {
       display: inline;
       padding: 0 10px;
       a {
         text-indent: -9999px;
         overflow: hidden;
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;
         background: #ccc;
         background: rgba(0,0,0, .2);
         display: inline-block;
         _display: block;
         -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
         -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
         box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
         width: 5px;
         height: 5px;
       }
     }
     .rslides_here a {
       background-color: #222;
     }
   }

As I said, I just uploaded a map image using the tool provided.

There are three other maps uploaded that all worked previously, but now all of them show 'Missing Opening '{'' and then 'Syntax Error Line 1' if you remove the last closing bracket.

If there is an error it is in the uploading system somewhere, as I've used this quite a few times in the past and never had this problem before.

@LakelandPhotoCentre If you remove the two URLs that have accidentally been added to the first line, the error should clear. See this video:

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

13 minutes ago, paul2009 said:

@LakelandPhotoCentre If you remove the two URLs that have accidentally been added to the first line, the error should clear. See this video:

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

Nope - didn't work I'm afraid...  Error message gone, but no map appears on page where the code injection uses that map.  

Have to be honest I don't have a clue what I'm doing here, so going to give up I think.

Thanks for your help

13 hours ago, creedon said:

Folks. In some cases the cause of custom CSS not working anymore is that SS makes a change which causes your CSS to no longer be valid. I'm not saying this is the case in the cited instances. SS also has the occasional backend issues that can cause CSS oddities. It is important to understand that SS is not a static platform. It is always changing, even the old versions of SS.

I understand @creedon - it's just strange because we haven't had an issue in _five_ years since we set up the site with this CSS. I might need advice on the style sheet -- and will post if needed but need to check in with our other website team. 

9 minutes ago, LakelandPhotoCentre said:

Nope - didn't work I'm afraid...  Error message gone, but no map appears on page where the code injection uses that map.  

Debugging code is a step-by-step process where you need to find one issue at a time. Now you;ve removed this error, we can move on to the next one. If you want to troubleshoot this further, please provide a link to the page on your site 🙂

Paul, such a brilliant simple fix for a large oversight on my part. Your solution worked perfectly for me as you can see when using my dropdown menus. Thank you very much!

Derrick. 

https://myrandomviews.com/views-images

Could someone help me with this. I'm getting the missing opening error. I've copied the below. 

.form-wrapper .field-list .field .field-element

form-wrapper .field-list .field .field-element {color: purple; font-family:’Poppins”;}
.form-wrapper .field-list .field .field-element:active, .form-wrapper .field-list .field .field-element:focus {background: white; outline: transparent}
h1 {
font-family: “Overpass”;
}
/* Contact form */
.form-wrapper .field-list .field .field-element {
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: gray !important;
}
.form-wrapper .field-list .field .field-element:hover {
    background: #E8E5E1 !important;
}
/* Field error background */
.field-error {
    background-color: #8B9D9B;
}/* Field error background */
.field-error {
    background-color: #768D99;
}
.header-nav-item--active a {
    background: none !important;}
    color:#F7F6F5!important;
}
.sqs-block-accordion .accordion-item__description {
  max-width: unset !important;
  width: 100%;
}

13 hours ago, Sara2222 said:

Could someone help me with this. I'm getting the missing opening error. I've copied the below.

You have a number of syntax errors in your code. Try the following.

form-wrapper .field-list .field .field-element {
color : purple;
font-family : Poppins;
}

.form-wrapper .field-list .field .field-element:active, .form-wrapper .field-list .field .field-element:focus {
background : white;
outline : transparent;
}

h1 {
font-family : Overpass;
}

.form-wrapper .field-list .field .field-element {
background : transparent !important ;
border-top : none !important ;
border-left : none !important ;
border-right : none !important ;
color : gray !important ;
}

.form-wrapper .field-list .field .field-element:hover {
background : #E8E5E1 !important ;
}

.field-error {
background-color : #8B9D9B;
}

.field-error {
background-color : #768D99;
}

.header-nav-item--active a {
background : none !important ;
color : #F7F6F5 !important ;
}

.sqs-block-accordion .accordion-item__description {
max-width : unset !important ;
width : 100%;
}

Let us know how it goes.

Hi! I am also encountering an error on my CSS code. I am not a coder and in the dark here but I believe it is connected to our video no longer playing on our homepage. I would really appreciate any advice anyone could offer!

(Also attaching an image)

ERROR MESSAGE: 

Missing Opening `{`

CODE: 

https://static1.squarespace.com/static/5dd3feb8e731013c09f020ec/t/646f000d23db3c6a03befd22/1684996109936/sofiapro-light.otf.sqs-gallery-block-grid .image-slide-title {
  background: #00000070;
  color: #ffffff;
  font-weight: bold;
  font-size: 14px !important;
  padding: 20px 20px;
  position: absolute;
  bottom: -.75;
  display: inline-block;
  width: auto;
  left: 0%;
  transform: translateX(-50%);
  transform: translateY(-185%);
  max-width: 100%;
  box-sizing: border-box;
  background: border-box rgba(0, 0, 0, .4);
}
a.Header-nav-folder-item:first-child {
    display: none;
}

a.Mobile-overlay-folder-item:nth-child(2) {
  display: none;
}
a {border-bottom-style: none !important; text-decoration: none!important}
 

Also, if this not about our home page video - I would love any insights to help solve that as well. It was working up until a couple weeks ago.

It looks like someone has pasted this URL before the CSS. Start by deleting this:

https://static1.squarespace.com/static/5dd3feb8e731013c09f020ec/t/646f000d23db3c6a03befd22/1684996109936/sofiapro-light.otf

That took away the error. But my video is still not working. Do you have any advice to remedy that?

I'd need a URL so that I could view the site.

https://www.theashtonagency.com/ 

Absolutely, thank you for your help. 

1 hour ago, TAA said:

my video is still not working. Do you have any advice to remedy that?

This is part of a wider issue with videos not playing on some browsers. Please see this thread:

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