Guest Posted November 18, 2020 Posted November 18, 2020 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!
paul2009 Posted November 18, 2020 Posted November 18, 2020 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. 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.
Guest Posted November 18, 2020 Posted November 18, 2020 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!
paul2009 Posted November 18, 2020 Posted November 18, 2020 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. 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.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.