Change background on Member Areas Join Now / Access Denied Page

How to change the background of a membership join – access denied screen on Squarespace-5

In todays video tutorial I’m going over how to change the background on the member join now / access denied page on Squarespace with a little bit of CSS. But don’t worry, even though we’re adding a bit of code, it’s still pretty simple & you can copy and paste the code below.

If you use Squarespace for a membership, you’ve probably noticed that the ability. to customize the ‘join now’ page is pretty limited. You can change the copy but that’s about it. Luckily, I figured out how to code this in so you can change the background color or add an image. Plus change the font color with a bit of code! Hopefully this helps you customize your website a bit further and make your member area even better!

Affiliate Disclaimer: Please note this post contains affiliate links. If you go through them to make a purchase, I will make a commission at no cost to you. Thanks for your support!

Code Disclaimer: Please note that code can break upon updates or other errors can occur. If you are choosing to add this code, you are responsible for doing so & for any errors that may occur. Thank you.

Watch the video for how to change the background on the member join now / access denied page:

copy & Past Code below

For Background Color:

//access denied page
.system-page {
background-color: #2E3A2E !important;

}

For Background Image:

//access denied page
.system-page {
background-image: url(image goes here) !important;

}

For Font Colors: (mine were set. to h2 & p but you may need to double check)

.system-page
{h2,p { color: white !important;}}

Here are the steps to change the background on the member join now / access denied page:

1. Choose between color background or image.

2. Go to Design > Custom CSS

3. Copy and past code into Custom CSS section

4. FOR IMAGE** the Custom CSS section (scroll down a little) select Manage Custom Files

5. FOR IMAGE** Upload your desired image here by either uploading or drag and dropping.

6. FOR IMAGE**Scroll back up to where you pasted your code and click between the parentheses ( )

7. FOR IMAGE** Then click the image file you just uploaded under Manage Custom Files. It should automatically copy and paste the link in between the parentheses.

8. Click save

9. Check out your page and see your new image/color

IMPORTANT: As of now, the image or color you add here will also be added to your checkout / cart page if you have. a shop. Make sure it works for both!