Jump to content

Custom CSS quit, "missing opening"

Go to solution Solved by derricksrandomviews,

Recommended Posts

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?

Edited by derricksrandomviews
Link to comment
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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution

Beyondspace, thanks for the reply. I have it repaired now. The red missing opening warning { (at the bottom of the css window)  is now gone.   I copied all my custom css to wordpad and then deleted it from my site. I re-entered it one snipped at a time to possibly find the error. Everytihing I pasted in seemed to work. I think the following code is the cause.  It is supposed to underline the active links in a navigation folder, but it never worked and it killed a number of pages when it was in advanced header code injection in site settings as Paul2009 discovered.  I moved it to custom css weeks ago and didn't remove it until today. It seems to cause an error on a delayed basis. I don't plan on pasting it back into custom css.

Here is my Avenue 7.0 site:

my random views

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

Edited by derricksrandomviews
Link to comment

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.

Link to comment

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.  

Edited by derricksrandomviews
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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  ⬇️

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

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?

Link to comment
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.

Link to comment
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.

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

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.

Link to comment

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

image.gif.fc0f2713eb705dc4d576e26b23fa3423.gif

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

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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:

image.gif.fc0f2713eb705dc4d576e26b23fa3423.gif

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

Link to comment
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. 

Link to comment
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 🙂

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

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%;
}

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 8 months later...

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.

Screen Shot 2023-10-04 at 9.40.43 AM.png

Link to comment

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

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

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

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 7 months later...

Hi,

I am getting a "missing opening" notification as well. Please help!

<!--SquareConvert Extension--->
<link rel="stylesheet" href="https://assets.thesquarespacer.com/multi-currency/multi-currency.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="//assets.thesquarespacer.com/multi-currency/multi-currency.js"></script> 
<script>
$.fn.tsCurrOptions({
  "HideBaseCurrency": true,
  "GeoLocation": true,
  "DecimalPrecision": 2,
  "BaseCurrency": "USD",
  "AvailableCurrencies": [
    "USD",
    "GBP",
    "EUR",
    "AUD",
    "CAD",
    "AED",
    "BRL",
    "CHF",
    "CNY",
    "HKD",
    "INR",
    "JPY",
    "KRW",
    "SGD",
    "ZAR"
  ]
});
</script>
<!--SquareConvert Extension--->
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.