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

Dave Hawkins

As a top tier Squarespace Expert and founder of Made by Dave, I bring over 8 years of Squarespace experience and 200+ bespoke website launches. Our process combines consultancy, design, project management and development for a collaborative and efficient experience with clients like you. Whether you need a new website or updates for your existing site, we'll help you get up and running.

https://madebydave.org
Previous
Previous

How to change the ‘File Upload’ text in forms - Squarespace 7.1

Next
Next

How to change “Back to all events” and/or “View Event” text - Squarespace 7.1