This post may contain affiliate links. We may receive a commission for purchases made through these links (at no cost to you, of course! 🙂)

Squarespace is super customizable, but is missing a few basic features that I find a lot of people are often looking for. Today we’re taking about changing the background color of one page only.

We’re specifically talking about Squarespace 7.0 today as in Squarespace 7.1 you can use the built-in color themes under Design > Style Settings > Colors, and you don’t have to use any custom code.

And even more specifically, I’m going to give you the copy + paste codes for the Brine Squarespace 7.0 template. These application of these codes will work in any Squarespace 7.0 template, but the code might vary slightly depending on which 7.0 template you’re using. So if the code isn’t working for you, I recommend consulting Dr. Google, or reaching out to the Squarespace Forum.

You might be a get a bit scared off when I say the words “coding”, but don’t let that drive you away, this is actually really easy! Basically just copy + paste 🤗

Sometime’s it’s fun to change up the background colors of your pages! Plain ole’ white can sometime’s get a bit boring, right?

You can change the Background Color of ALL of your pages for Squarespae 7.0 in the Design > Style Settings > MAIN

But changing all of your pages background colors might be a bit much, or maybe you want a variety of colors across pages.

And of course, if you’re using an Index Page, you can easily change the background color by adding coloured images into the banner area.

But if you’re using a regular Page, the method isn’t the same.

Luckily, there’s an easy way to change the background colors by adding a simple snippet of CSS code (and of course, I’m going to give it to ya!)

Please note, this specific code is for Brine based templates. This code may not work with a different family of templates.

Step 1 - Open your Page Settings

First up, you’re going to need any regular Page, so choose one you want to change the background color on.

Then, open up the Page Settings by clicking on the little cog:

This will open up your Page Settings Panel.

Opt-ins

Step 2 - Paste in the Background Code

Click on Advanced in the sidebar and paste in the following code:

<style>
.Main {background-color: #f7eee9 !important;
}
</style>

You can change the color hex code (#f7eee9) to whatever you want!

If you don’t have a specific color hex code already, you can generate one here!

Then hit Save in the top left hand corner to save your changes.

Step 3 - Change the color of the header background

So far so good! You can see that I have successfully changed the color of my page:

You might now notice that you still have white (or a color) behind your Header area. With the Brine template, you are either using a Header-Bottom or a Header-Top, which is based on what you have set in your Site Styles. But to keep it simple, if not sure if you’re using a Header-Bottom or a Header-Top, just try both codes and see which one works!

Add this to you code if you’re using a Header Bottom:

<style>
.Main {background-color: #f7eee9 !important;
}
.Header--bottom {background-color: #f7eee9 !important;
}
</style>

or if you’re using a Header Top:

<style>
.Main {background-color: #f7eee9 !important;
}
.Header--top {background-color: #f7eee9 !important;
}
</style>

Note that the first half of those codes is from Step 2, so all you need to add in is the Header part, and leave the rest. See a picture of the finished code below: