Jump to content

How to increase the CSS writing code capacity?

Recommended Posts

Hello, 

I've been working on a web site for my client and this website has a lot of pages and CSS codes applied to pages and blocks. 

There are few more pages to build and more CSS code to apply. 

Unfortunately, when I try to create more CSS codes a message in red appears saying: "You have entered too much CSS, please reduce the amount before proceeding." 

I contacted SquareSpace support and the only solution they gave me is start working on the Developer Mode on. But from what I understood, this Developer Platform is only available for SquareSpace 7.0, which is not my case, I am using a 7.1 template. 

Please, is there anyway I can keep working with the CSS codes on the current website without having to start everything from zero? Any way to create an external .css file and upload to the website or any other solution? 

 

I appreciate a lot your attention, 

Your help would be magic! 

Thank you!

Link to comment
  • Replies 4
  • Created
  • Last Reply
44 minutes ago, joaop2020 said:

Unfortunately, when I try to create more CSS codes a message in red appears saying: "You have entered too much CSS, please reduce the amount before proceeding."

You can have up to 128,000 characters in Custom CSS which is usually sufficient. 

In answer to your question, you can link to a .css file by adding a line through Code Injection, but if you've reached your limit, you are probably better off reviewing your CSS to see if it can be written more efficiently. 

For example:

  • Does it refer to classes and collections? Or are lines of code duplicated because they refer to individual block IDs?
  • Are you using LESS or just plain CSS? Custom CSS supports LESS which is much more efficient.

If you can post a working link to the site, the community can take a look at a section of the CSS and provide some tips. Note that if your site isn't live yet, we will only be able to view it if you set a site password and tell us what it is.

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Thank you so much for your feedback! 

 

The website is on:

www.parisclinics.com 

What makes the internal CSS coding sheet so long is that I've been using mostly borders, paddings, etc for each block. Plus there are a lot of pages and duplicated to a second language. 

 

My knowledge in coding is not so much, so I am not sure if this is a plain or LESS sheet. I believe is a plain, because I am not sure what LESS is. 

 

If I consider on applying the external CSS file to the Code Injection, will it apply to all pages? After doing it, should I empty the old css codes on the squarespace CSS editor, like that I can have more free space for future codes? 

Also, I've been trying to create a .css file with my text editor on mac, but it seems not having this file option to save. How can I create this file? 

 

Thank you once again for your help!

Link to comment

No problem.

Let's take an example from the start of your Custom CSS. You have the following sections that all refer to the same block ID #block-yui_3_17_2_1_1605615483658_14974. You can replace:

 

SECTION A

#block-yui_3_17_2_1_1605615483658_14974 {
    border-left: 1px solid #000
}

#block-yui_3_17_2_1_1605615483658_14974 {
    border-bottom: 1px solid #000
}

#block-yui_3_17_2_1_1605615483658_14974 {
    padding: 0
}

with this:

NEW SECTION TO REPLACE SECTION A

#block-yui_3_17_2_1_1605615483658_14974 {
  border-left: 1px solid #000
  border-bottom: 1px solid #000
  padding: 0
}

This is because each of these styles are being applied to the same element.

 

Going further, you have a number of sections of your CSS that repeat like this, but apply to different blocks. For example, the section (I've called it section B) is almost exactly the same as the first one above because it sets the same styles on a different block ID.

SECTION B

#block-yui_3_17_2_1_1605613218639_19283 {
    border-left: 1px solid #000
}

#block-yui_3_17_2_1_1605613218639_19283 {
    border-bottom: 1px solid #000
}

#block-yui_3_17_2_1_1605613218639_19283 {
    padding: 0
}

Where you want the same styles to apply to different IDs, you can place them on the same line separated by a comma. You can therefore go further than I suggested in the 'new section A' and replace both sections A & B with this single section:

NEW SINGLE SECTION TO REPLACE BOTH SECTION A AND SECTION B

#block-yui_3_17_2_1_1605615483658_14974, #block-yui_3_17_2_1_1605613218639_19283 {
  border-left: 1px solid #000
  border-bottom: 1px solid #000
  padding: 0
}

That's a massive saving (159 chars compared to 430 chars). If you repeat this throughout your site (checking for mistakes as you go), you should be able to reduce the current CSS down to below 45K.

I hope this helps.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • Susana_SQSP changed the title to How to increase the CSS writing code capacity?

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.