How to Target Specific Color Theme Sections with CSS - Squarespace 7.1

Mar 14

One of my favorite features of Squarespace 7.1 templates is the ability to add and customize individual page sections. Unlike Squarespace 7.0 templates which do not let you add separate page sections, this feature gives your layout much more flexibility in terms of color themes, width, and height.

That being said, sometimes you need to write CSS that only targets elements in page sections of a certain color theme. In this blog post, I will show you how to use color theme-specific CSS rules that will level up your Squarespace 7.1 site.

CSS selectors for Squarespace color themes

Squarespace 7.1 templates allow the user to select 5 different colors for your website’s palette; 2 lighter theme colors (usually white and another light color), 2 darker theme colors (usually black and another dark color), and a bright color that acts as accents to your background sections. From these 5 colors, Squarespace automatically generates 10 color themes as follows:

Lightest 1
Lightest 2
Light 1
Light 2
Bright 1
Bright 2
Dark 1
Dark 2
Darkest 1
Darkest 2

You might have noticed these themes when editing the color of a page section on your 7.1 site. Whenever you give a page section a color theme, the page section is assigned a CSS class name that matches the color theme. You can view a comprehensive list of these color mappings in the image below.

Color map of Squarespace color themes with matching CSS selectors. — Comprehensive map of CSS selectors with matching color themes

Here is a ready-made CSS template that includes each color theme’s CSS class selector. Copy the entire thing or choose which selectors you need for your site.

/* LIGHTEST 1 */
.page-section.white /* Put selectors here */ { /* CSS goes here */ }

/* LIGHTEST 2 */
.page-section.white-bold /* Put selectors here */ { /* CSS goes here */ }

/* LIGHT 1 */
.page-section.light /* Put selectors here */ { /* CSS goes here */ }

/* LIGHT 2 */
.page-section.light-bold /* Put selectors here */ { /* CSS goes here */ }

/* BRIGHT 1 */
.page-section.bright-inverse /* Put selectors here */ { /* CSS goes here */ }

/* BRIGHT 2 */
.page-section.bright /* Put selectors here */ { /* CSS goes here */ }

/* DARK 1 */
.page-section.dark /* Put selectors here */ { /* CSS goes here */ }

/* DARK 2 */
.page-section.dark-bold /* Put selectors here */ { /* CSS goes here */ }

/* DARKEST 1 */
.page-section.black /* Put selectors here */ { /* CSS goes here */ }

/* DARKEST 2 */
.page-section.black-bold /* Put selectors here */ { /* CSS goes here */ }

Examples of how to use color theme-specific CSS

Now that you know which CSS classes correspond to what color themes, we will learn how to use these CSS selectors to achieve some common styles.

Change link color on hover

One of the most common applications of using color-theme specific CSS is to have different link hover colors. The following code snippet will make hovered links in the “Lightest 1” theme blue, and hovered links in the “Darkest 1” theme orange.

.white a:hover {
  color: blue !important;
}

.black a:hover {
  color: orange !important;
}

Change button background color on hover

The following code snippet will change the background color of all block button elements in “Dark 2” color sections when hovered over.

.dark-bold .sqs-block-button-element:hover {
    background: black !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transition: all .3s;
}

Access 1,500+ other squarespace CSS selectors and code snippets

If you want a complete CSS selector guide that has in-depth tutorials and code snippets for the Squarespace 7.1 platform, check out The Squarespace 7.1 CSS Selector Cheat Sheet Guide, which includes 1,500+ CSS selectors and in-depth explanations, as well as 100+ CSS code snippets for each Squarespace element in the 7.1 platform.

How the Guide is Organized

As you can see in the below image, this is more than just a cheat sheet. This complete guide includes CSS selector explanations for each Squarespace element that are neatly categorized into their own pages.

Once you select an element to examine, you will be presented with the different CSS selectors relevant to the element as well as explanations about how to use the selector(s).

More complex Squarespace elements - like the mobile and desktop header elements in the below image - include a segmented table so that you won’t be overwhelmed with the explanations.

CSS Guide & Cheatsheet