Jump to content

Custom CSS Limit

Recommended Posts

Site URL: https://www.iqgaming.org

After a long time of research and finally finding out how to design my website to my liking, I needed to use Custom CSS to enable my design goals, because Squarespace's options are very limited. However, I love that I can quickly spin up a page using the Squarespace Platform. 

I'm now in a predicament where I cannot create more than 128,000 characters of CSS Code. The only solutions I've found on the forums relegate me to "compressing" my code. 
This isn't an applicable solution as my website is only a fraction of the size that I'd like it to be one day, and I don't want to sacrifice design quality just to throw pages on to my website.

Am I using the wrong platform? Is there a way to get an unlimited amount of CSS code injection, so that I can design freely and actually create the website I'm dreaming of, without limits?

 

**I'm currently on a personal plan. Does the Business Plan offer CSS edits per page at the 128,000 Limit? Any applicable solution that will allow me to keep designing and adding to my site would be appreciated.

Edited by CozMasta
Link to comment
  • Replies 14
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Have you tried creating .CSS file (paste all CSS there) then delcare it with link code yet? (With Personal Plan, you need to edit Site Footer >> Add a Code Block >> Paste below line)

Quote

<link rel="stylesheet" href="/s/tuanphan.css"/>

(support the css file name is tuanphan.css)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Adding custom code to your site mentions the 128,000 character limit. It's in there if a little buried.

Might be nice if SS could put that on the field itself in some manner.

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
16 hours ago, tuanphan said:

Have you tried creating .CSS file (paste all CSS there) then delcare it with link code yet? (With Personal Plan, you need to edit Site Footer >> Add a Code Block >> Paste below line)

(support the css file name is tuanphan.css)

I tried this, and followed a detailed guide. I bought the Business Plan in hopes that this would work. If I can just do all my edits in the custom CSS editor and see the updates/mistakes in real-time, then save the finished product to a file...that would be great! I loved that idea. However, when I actually uploaded the file, made the link, and linked to it on my site...The site didn't update at all. I didn't have any of the visuals I wanted, it was just a blank page with text, as if I hadn't done any coding.

I read somewhere that it can take a day to update...which is not productive. When I'm working on a project, I need to confirm that my updates are in fact working, and not have a page that looks like garbage sitting there for a full day waiting to update.

Link to comment

 I've included an image of my workflow for linking a .css file to the site and using the file to enable more use of Custom CSS code. Maybe you can help me figure out why the code works in the Custom CSS Editor, but doesn't work when I make a .css file and upload/link to it. I've labeled my steps in the image and described my process below:


1. I wrote this CSS code to put a static background image on the page "TESTER PAGE CSS." 
2. When I put this code into the Custom CSS Editor, it works. It's good code. You can see the image in the background of #2.
3. Now, I deleted the code, and want to test it out in a linked, .css file. So I go into a page I made to house the uploaded .css file, called "Custom CSS Link".
4. I've created a link, and uploaded the .css file, titled "tester.css". 
5. I've checked off the box in the advanced link options to ensure that the uploaded file is being linked to. When I click the link it downloads the .css file, it's successfully linked.

The URL for the link is:

/s/tester.css

6. I now go into the settings of my page that the CSS is adding the background image to. Again, this page is titled "TESTER PAGE CSS." 
7. I go into the Advanced Settings where I can enter page-specific Custom CSS code. I add the line of code that references the tester.css stylesheet.
<link rel="stylesheet" href="/s/tester.css"/>

8. I go back to the page, and wouldn't you know it, the background image is not there, and for some reason the site is not applying the externally linked CSS file.

742663709_Workflowforcsslink.thumb.jpg.adcc21424e8d152a3d5297de2afacde0.jpg

 

Everything seems to make sense to me, but the site just isn't reading and applying the code from the .css file. 
What am I doing wrong?

 

 

 

 

Link to comment
Quote

6. I now go into the settings of my page that the CSS is adding the background image to. Again, this page is titled "TESTER PAGE CSS." 

What is the URL for this page?

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

You can disable the page again.

Here is the issue. Your CSS file is using LESS syntax. The only place LESS is understood in Squarespace is Design > Custom CSS.

If you want to continue to use LESS you'd need to install v1.3.3 on your computer. I've done this myself. However this is a fairly advanced skill. Mine takes an understanding of how to use the command line on my OS. If you don't understand what command line means then this probably is not for you at this time.

Edited by creedon

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

I'm pretty sure most of the code I've learned to use is LESS Syntax. 

Here's an example of what a finished page looks like--the way that I want the content to look. 
https://www.iqgaming.org/guide-mystic-offensive-healer

I go through every block and back it up with a bordered image to give it that center section, with the static background. That's the look I'm trying to achieve for most pages. I've only developed about 25 pages doing this so far, but that was enough to back me up to the 128K limit, even after going through and combining all of the sections on the site into massive chains of block references in CSS (would have preferred to keep them separate with /*Titles*/ so that I could easily identify and edit them later).

I'm new to working in CSS, and most of the stuff I've learned is through heuristics and video guides online that fit the problem I'm trying to solve. 

Ideally I'd like to continue to be able to use whatever CSS code snippets I'm able to take from guides online etc., regardless of whether they're in LESS syntax or not. 

Should I download v1.3.3? If so, where can I find it?



 



 

Edited by CozMasta
Link to comment
Quote

Should I download v1.3.3? If so, where can I find it?

I should have been more explicit in my previous post, which I updated.

Installing LESS, at least the way I did it, is not a program that you fire up and put some LESS in and get out some CSS. It is a command line tool (see previous updated post).

If it helps I've converted your LESS into CSS.

[data-section-id="61cb71c5b7a337404cdd9f3e"] .section-background::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://i.imgur.com/yR37HVC.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
@media (max-width: 787px) {
  [data-section-id="61cb71c5b7a337404cdd9f3e"] .section-background::after {
    background-position: center center;
    background-attachment: fixed !important;
  }
}

 

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

Thanks creedon!! Do you know of any tools that allow me to translate code that was written using LESS into traditional CSS? So that in the future, should I use copy+pastes of code, I can fix it so that it will work through a linked .css file?

Edited by CozMasta
Link to comment

creedon, firstly, thank you for all of your help so far.

I've uploaded an image to showcase a problem I'm running into with the externally linked .css file. 

In the image you can see the code I've used to create the centerpiece blue gradient background for the content. When I have this code plugged into the Custom CSS Editor, it works beautifully. 

However, when I copy the code into the .css file to upload via an external link... It doesn't work.

There seems to be absolutely no rhyme or reason to what code will work and what will not. The code you provided me for the backgrounds does not work when I upload it via an external .css file. 

There are sections of my site that will work with the below code, and then randomly some pages will not work. There will be random pages without toppers on the center section, and entire pages missing the mid-sections that I coded. 

I'm being very careful to maintain the work I've done, so I can go back to normal just in-case. When I plug the code back into the Custom CSS Editor in squarespace, everything goes back to normal and works perfectly. 

I don't see anything unusual in the code, and it's the EXACT same code I'm using for other parts of the site, which work fine when uploaded through the .css file. It's like a patchy beard, with missing sections in random places. 

What I did was put all of my Custom CSS code from the editor into one master .css file, and then upload it to a link and then linked every page that uses the custom code.

Again, some sections of code, like this one, work perfectly:

#block-913bbdc38fd28189c3cb,
#block-81c06f1d4da06e7593c7,
#block-9d867cf31d6f7e48307b,
#block-5a0d623c85c19b756e98,
#block-170b579a5f35d98738b9,
#block-2e685ead114bf83f0524,
#block-3dd8d05cec9b45c60f79,
#block-ed808ae8b110c4097ccf,
#block-yui_3_17_2_1_1640656375550_20585
{background-image: url(https://i.imgur.com/ay05crJ.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  padding: 30px;
  border-right: solid 2px Black;
  border-left: solid 2px Black;
}


However, code such as this (the referenced code in the image), simply doesn't work:


#block-yui_3_17_2_1_1620533854363_3053,
#block-yui_3_17_2_1_1620673028282_15720,
#block-yui_3_17_2_1_1619884772918_3461,
#block-yui_3_17_2_1_1619884772918_2889,
#block-yui_3_17_2_1_1629478472966_27154,
#block-yui_3_17_2_1_1620678231458_24973,
#block-yui_3_17_2_1_1620664605340_31268,
#block-yui_3_17_2_1_1620664605340_29181,
#block-yui_3_17_2_1_1620664605340_32480,
#block-yui_3_17_2_1_1620664605340_32541,
#block-yui_3_17_2_1_1629478776774_31824,
#block-yui_3_17_2_1_1629478776774_27435,
#block-yui_3_17_2_1_1629478776774_34240,
#block-yui_3_17_2_1_1629848432189_42496,
#block-yui_3_17_2_1_1620663813649_33269,
#block-yui_3_17_2_1_1620663813649_30264,
#block-yui_3_17_2_1_1620663813649_32245,
#block-yui_3_17_2_1_1620664605340_21039,
#block-yui_3_17_2_1_1620663813649_10131,
{background-image: url(https://i.imgur.com/ay05crJ.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  padding: 30px;
  border-right: solid 2px Black;
  border-left: solid 2px Black;
}
 




image.thumb.png.4e45b44661407ecf3683e4fd011ad7da.png

Edited by CozMasta
Link to comment

Without the URL for the exact page your are referencing it is hard to help.

If I had to guess you have a syntax error in the second CSS code snippet you show.

The following...

#block-yui_3_17_2_1_1620663813649_10131,
{background-image: url(https://i.imgur.com/ay05crJ.jpg);

...should be...

#block-yui_3_17_2_1_1620663813649_10131

  {
  
    background-image : url ( https://i.imgur.com/ay05crJ.jpg );

The spacing is not critical. It is the comma character that you have between the end of the block id and the open curly bracket.

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

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.