Updated
Oct 4, 2024
Abode
Cove
Handshake
Kintsugi
Learnable
Marigold
Opponent
Parable
Quantum
Retrograde
Sidecar
Tandem
Nautilus
Remote CSS Delivery
How template CSS gets delivered remotely, and how to manage it yourself.
How template CSS gets delivered remotely, and how to manage it yourself.
How template CSS gets delivered remotely, and how to manage it yourself.
How it works
In the latest template update where I updated and redesigned all templates in Fluid Engine, I also changed all template CSS to be remotely applied. This allows me to quickly make any changes to the core template's code in case Squarespace makes any updates that negatively affect your site. This means that your Custom CSS window will be mostly empty, except for some variables that allow you to control parts of the code without writing any of it.
However, if you'd like to host all of the CSS locally on your own template site, here's how you can do that.
Navigate to the site's Header Code Injection
Copy the link portion of the very first script on the page (blurred in the example image). Be sure to leave off the quotation marks!
Paste that URL into your browser, and copy/paste everything you see there at the bottom of your site's CSS window.
Remove the entire
<script>
from the Header Code Injection and save.
The main drawback is that your template site's CSS will no longer be automatically updated when I make global changes to the design's code. What you may consider doing instead is simply pretending that the CSS I've added doesn't exist at all! You'd treat all code changes as if you're modifying the default site code—so instead of changing CSS that's already in the window, you'd add new code, but that's more specific to override what's in the imported code. The main thing to remember is to make it more specific, and the best way is to add "body" before any declarations.
For example: body h1 { ... }
In the latest template update where I updated and redesigned all templates in Fluid Engine, I also changed all template CSS to be remotely applied. This allows me to quickly make any changes to the core template's code in case Squarespace makes any updates that negatively affect your site. This means that your Custom CSS window will be mostly empty, except for some variables that allow you to control parts of the code without writing any of it.
However, if you'd like to host all of the CSS locally on your own template site, here's how you can do that.
Navigate to the site's Header Code Injection
Copy the link portion of the very first script on the page (blurred in the example image). Be sure to leave off the quotation marks!
Paste that URL into your browser, and copy/paste everything you see there at the bottom of your site's CSS window.
Remove the entire
<script>
from the Header Code Injection and save.
The main drawback is that your template site's CSS will no longer be automatically updated when I make global changes to the design's code. What you may consider doing instead is simply pretending that the CSS I've added doesn't exist at all! You'd treat all code changes as if you're modifying the default site code—so instead of changing CSS that's already in the window, you'd add new code, but that's more specific to override what's in the imported code. The main thing to remember is to make it more specific, and the best way is to add "body" before any declarations.
For example: body h1 { ... }
In the latest template update where I updated and redesigned all templates in Fluid Engine, I also changed all template CSS to be remotely applied. This allows me to quickly make any changes to the core template's code in case Squarespace makes any updates that negatively affect your site. This means that your Custom CSS window will be mostly empty, except for some variables that allow you to control parts of the code without writing any of it.
However, if you'd like to host all of the CSS locally on your own template site, here's how you can do that.
Navigate to the site's Header Code Injection
Copy the link portion of the very first script on the page (blurred in the example image). Be sure to leave off the quotation marks!
Paste that URL into your browser, and copy/paste everything you see there at the bottom of your site's CSS window.
Remove the entire
<script>
from the Header Code Injection and save.
The main drawback is that your template site's CSS will no longer be automatically updated when I make global changes to the design's code. What you may consider doing instead is simply pretending that the CSS I've added doesn't exist at all! You'd treat all code changes as if you're modifying the default site code—so instead of changing CSS that's already in the window, you'd add new code, but that's more specific to override what's in the imported code. The main thing to remember is to make it more specific, and the best way is to add "body" before any declarations.
For example: body h1 { ... }
Still have a question?
Check out the FAQ page, or send a message via the Contact page.