How to add a custom background colour to one section only - Squarespace 7.1

There might come a time where you want to add a customised colour to a section that doesn’t appear in your colour themes.

To do this, you need to target the exact section on the page, and then add the custom colour you want to the code.

---

Watch the video on YouTube

---

Step 1: Locate the Section ID

To find the Section ID, use the following link and add the Squarespace ID Finder to Chrome

Step 2: Find the Hex Colour

To do this this, we typically

---

Step 3: Edit code to add custom section ID and colour

• Use the Squarespace ID Finder to locate the section ID

• Take the ID and replace the numbers / letters within the quote marks

• Replace the hex colour eg: #4B5EE7 and insert your own colour.

Code for Business Plan or Higher

<!-- Custom Section Background Colour-->

<style>

[data-section-id="651f1fbec63236426cc2ea97"] .section-background {
	background: #4B5EE7 !important;
}

</style>

Instructional Steps

Add this code to the following place…

• Page Settings

  • Advanced

    • Page Code Injection

Copy and Paste the below, and edit the hex colour eg: #4B5EE7

---

For Personal Plan

/* Custom Section Colour */

[data-section-id="651f1fbec63236426cc2ea97"] .section-background {
	background: #4B5EE7 !important;
}

Instructional Steps…

Add the following code to…

• Custom CSS

Copy and Paste the below, and edit the hex colour eg: #4B5EE7