How To Change The Background Colour Of An Index Page in Squarespace 7.0

8 Mar

Wondering how to change the background colour of a specific index page in Squarespace? It’s easy!

As you can see, changing the background colour settings in DESIGN >> STYLE EDITOR applies the change to every page. Although this universal approach Squarespace has is GREAT on the whole, because it makes it simple to ensure consistency of heading styles etc across your whole site, it does have downsides – and this is one of them.

It's a really popular look right now to have an index page or longer page, in which various pages have different background colours; either to break the long scrolling page up or to call attention to a particular section. It's actually a perfect way to tie your brand colours into your site if you're DIY-ing and not able to produce lots of fancy graphics.

But how can you go about achieving this look, if Squarespace won't let you change each index page's background colour one-by-one?

I've made up an example site with four index pages, some dummy text and stock photos to demonstrate the super easy way of changing just one of the index pages' background colour. It involves a tiny snippet of CSS. That might sound a little intimidating to some, but if you've been thinking "Oh no, I can't do CSS!" this is the perfect way to 'dip your toe' into the coding water!!

Perhaps you've read a tutorial on changing index backgrounds before – I've seen a few doing the rounds – but the ones I have read at least, are providing a method that results in a couple of problems...

My dummy site's page header, with purple overlay.

Method One: Change background colour with an image and why NOT to do it.

This is the method I've seen doing the rounds. Basically, you create a large image that's just a solid block of colour and upload it using the 'banner' functionality. This does indeed make that image become the index page's background but, there are a few reasons this isn't such a great method:

You have to create the image – not so easy if you don't have access to a photo or image editing software.
Having a very large image on your site slows down its performance.
Google loves performance, so a slower site = not good news for SEO
Most importantly... you can't use a Banner Overlay Colour, if you want your background image to display as, well, the colour that you want.
It also applies the 'Header (Banner)' fonts and styles to your text, which may be considerably different from your regular pages' fonts and style, depending on how you've designed you site.
In summary: this method sucks.

Uploading a green filled image as a background to the Contact Me index page....

...turns the index page from a 'page' to a 'banner' and therefore results in the same purple overlay that I had wanted to use for my header. So, erm, not green at all. Just a less cute version of the purple above.

As you can see, uploading an image made up of my chosen green (#a5b3a2) does change the background of the Contact Me section... but it overlays it with the purple I wanted to use to overlay my Header (which, by the way can be set in DESIGN >> STYLE EDITOR). Even if you just had a light grey or white overlay, the effect wouldn't be quite as drastic but you still wouldn't achieve the exact colour you were looking for.

So, what’s the alternative method?

Method Two: Change the background colour with Simple CSS!

Two lines. That's it. It's honestly got to be the easy little bit of CSS there is.

First you're going to need to know the hexadecimal code for the colour you'd like. In my case, it's #a5b3a2.

You'll also need to find out the URL slug for the index page you want to change. This is a setting you probably haven't paid a great deal of attention to or maybe haven't even heard of but it'll take just a few seconds to find. Simply go to: PAGES >> INDEX PAGE YOU WANT TO CHANGE >> GEAR ICON >> (maybe scroll down a bit) URL SLUG

In my case, the URL slug for this index page is: contact-me. The URL slug is very often the same as the name of the page itself, especially if you haven't changed the title since creating it. In simple terms, the slug is how your website names pages. Squarespace terms it as "the exact address of a specific page or post on your site".

Now we have our hex code and our slug. We can head on over to DESIGN >> CUSTOM CSS

All you need to do now is copy+paste or type in the follow CSS:

.collection-type-index #URLSLUG

In my example, the code used would be:

.collection-type-index #contact-me

Just a tiny bit of CSS. Make sure you include all the symbols too.

Easy, right?? As you can see the Contact Me index page has the green colour we were aiming for... while the page above (and all the others) have stayed as they originally were. You can do this with a different colour for various index pages if you like. Just change the URL slug and the hex code and you're golden! Remember though, if you ever change the URL Slug for an index page (not likely), then you'll have to go in and change it in your CSS too.

You can watch the video below for a step-by-step walkthrough. Let me know how you get on in the comments!