(Part 1) Disable code automatically while editing a Squarespace 7.1 site
How to stop code from working during Edit Mode in Squarespace 7.1?
In Squarespace 7.1, you can control when custom code runs by targeting the classes that Squarespace automatically adds to the
tag during editing.Two key classes are: .sqs-edit-mode and .sqs-edit-mode-active
The .sqs-edit-mode-active class appears only when you are actively editing content inside the page editor. It does not appear on the Live Site or in the regular backend view.
To prevent custom CSS from running while editing, you can use the :not() pseudo-class to exclude .sqs-edit-mode-active from your selector. For example:
- Target the when it does not contain .sqs-edit-mode-active
- Wrap your existing CSS inside that conditional selector
- Your custom styling runs on the Live Site
- Your styling runs in the regular backend view
- Your styling automatically disables itself while actively editing
Having a customization get in the way while you’re trying to update content in the backend of a site may not be the end of the world… but it still is annoying AF.
The good news? Squarespace actually gives us a built-in piece that – depending on how we use it – lets us control exactly when our code runs.
And that’s precisely what we’ll be looking at how to use in this 3-part tutorial.
Curious?
Then let’s dive into the first example!
Video timestamps
00:00 – How to Apply Custom Code Only in Edit Mode or the Live Site
Today we'll be looking at how we can apply custom code to Squarespace 7.1 only on Edit Mode or only on the Live Site. I'm gonna be showing you three examples of how you can use this trick, but keep in mind that this is something that you can implement on pretty much any modification that you're working on.
Now the key to this adaptation has to do with two very specific classes that Squarespace applies to the <body> tag of their pages while we're editing the site in the backend.
So depending on how we use them in our code, we can pretty much turn our code or parts of it on or off based on what we need.
00:34 – Finding the .sqs-edit-mode Class in the Body Tag
Before we jump into the actual examples, I wanna show you where those classes are and what they are called so that you can have them as a reference for your own modifications.
So here I have my test site, and if I inspect the <body> tag while I'm inside the backend, scrolling all the way up to the <body> tag, we're going to see that there are a lot of classes applied to this, and this is pretty much the same thing for every single page in Squarespace. However, if we go all the way down, we can notice that there's a specific class called .sqs-edit-mode inside this list.
01:15 – Finding .sqs-edit-mode-active in the Active Edit Mode
Now let's take a look at what happens when we actually enter the Edit Mode of the site.
If we go into the Inspect Element tool and once again search for that <body> tag, where we previously saw that .sqs-edit-mode class, that one is still applying in this situation. However, there's a second class present here that's called .sqs-edit-mode-active.
01:45 – When Edit Mode Classes Disappear
Now if we happen to inspect the same backend of Squarespace while we have this completely stretched out in the backend, once more going inside the Inspect Element tool and going all the way up to the <body> tag, we can see that here near the end none of those classes show up.
And then if we go on to the actual Live site without being logged in into Squarespace, if we go all the way up to that <body> tag, we're going to see that those two classes don't show up in here either.
So basically those two classes of .sqs-edit-mode and .sqs-edit-mode-active are the ones we can rely on to be able to decide whether the code applies in one situation or the other.
02:39 – Example 1: Disabling Hover Effects While Editing an Auto Layout Section
With this in mind, let's go ahead and hop on to the first example. So here I already have an Auto Layout section that has a little bit of styling applied to it.
You can see that the title shows up from the get go, but to be able to see the paragraph or the description text, I have to hover over each of the cards.
Now if I'm developing this section myself, or if my client has to make some changes to the content, I want to make sure that this code doesn't apply while I'm working on the site.
So instead of having to go back and forth into the Custom CSS Window to disable the code, or even tell my client to do that, I'm going to modify the selector so that the code doesn't apply automatically at this point.
So knowing that the class of .sqs-edit-mode-active shows up only in this situation, what I can do is tell the browser to NOT apply the code if that class is present.
03:38 – Using the :not() Selector to Exclude the Active Edit Mode
Let me show you what that looks like inside the code.
We're basically going to be relying on something called the :not() pseudo-class, which I sometimes refer to as the :not() selector or the exclusion selector.
You can see this :not() pseudo-class as pretty much a filter. It helps target things on our sites when things don't have a specific class or ID or other attribute applied to them.
It can be used in many different situations, but right now we're going to use it to differentiate between the active edit mode and every other situation.
So this code that I have in here is what's currently applying the hover mode to my Auto Layout cards.
Now based on what we saw previously, this selector .sqs-edit-mode-active would target the <body> tag when the .sqs-edit-mode-active is present. So whatever we add in here is going to apply only in that specific situation.
However, what we're trying to do is the complete opposite. We want the code to apply when this class is NOT present.
So in order to filter out this class or exclude this class, we're going to add in here the :not() selector.
So now this is going to read as when the body does not have the class of .sqs-edit-mode-active, any code that we have between these brackets is going to apply, and in our case, or at least in this specific example, that is going to be this whole chunk of code.
So what I'm gonna do is I'm going to wrap the entire code, these two snippets, in between those brackets.
So now anything that is sitting within these brackets is only going to apply when the body does not have the class of .sqs-edit-mode-active, which means that I'm outside of the active Edit Mode.
05:35 – Testing the Code on the Live Site vs Edit Mode
So let's see what that looks like here on the Live site.
So if I refresh my Live site here, you can see that the customization is still applying. I still have that hover mode where the paragraph or description text only shows up if I hover over each card.
Then here inside the regular backend, let's call it here, you can see that the customization keeps applying.
If I stretch this out, the customization continues to apply because that class is not present, therefore the code is allowed to work.
But then if I click on the edit button, you can see how the code stops working because that class of .sqs-edit-mode-active got added to the <body> tag and therefore disabled our code automatically.
06:23 – What’s Coming in Parts 2 & 3
As I'm editing this video right now, I'm deciding that I'm going to be splitting this into three parts so that we can have one example per part, just to keep things as concise as possible.
So in this first part, we addressed how we can stop the code from working while we're actively modifying content on the page so that it doesn't bother us while we're trying to do stuff and move stuff around.
In Part 2, we're going to look at the second example where we're going to stop the code from applying altogether throughout the backend. So basically, if you have the side panel open or if you're editing the content, the code is not going to apply.
And then in Part 3, we're going to see the third example where we're going to do the complete opposite. We're going to force the code to work only while we're in the backend of Squarespace.
This trick is pretty helpful for very specific situations, especially if you're working with something like Code Blocks that have tabbed sections in them or a widget that doesn't have a script.
TL;DR
Squarespace 7.1 automatically adds the classes
.sqs-edit-modeand.sqs-edit-mode-activeto the<body>tag when you're working in the backend.The
.sqs-edit-mode-activeclass only appears when you’re actively editing the page (with the editor open). It does not appear on the Live Site.So, if you want your custom code to stop running while editing, you can use the
:not()pseudo-class to exclude.sqs-edit-mode-activefrom your selector.That means your CSS will continue to run on the Live Site and in the overall backend view, but automatically disable itself when you click “Edit.”
Instead of turning code “on and off” manually via the Custom CSS window, you’re letting the browser handle it for you.
In this tutorial, we use as an example an Auto Layout section customization but, the trick can be used on any other modification you want!
That’s it for Part 1!
Stay tuned for the second example, if you want to see how to stop the code from applying at all times while in the backend of Squarespace.
Until then,
B.
Full code
Custom CSS Window
/*STOPPING CODE FROM WORKING WHILE EDITING THE CONTENT IN SQUARESPACE 7.1*/
body:not(.sqs-edit-mode-active) {
//your snippets here
}
