How to Target Sections By Color Theme

What does this code do?

This post will explain what selector to use to target sections based on their colour theme.

Note: This code is not used on its own but added to other code to apply that code to specific sections based on a colour theme.

But first…

Before you use the classnames below it is important for you to understand how selectors work. If you haven’t yet, please watch Tutorial 1: What is HTML, Javascript, and CSS? in the Start Here Guide which will go over what CSS is and it’s basic structure.

To target different elements or groups of elements in CSS you need to choose the proper selector. When you choose a colour theme in Squarespace it adds a class to the section. So, to target sections by their colour theme we will use a class selector.

The order you place selectors in is very important, so you cannot just paste the class selector anywhere in your code.

For example, if I have the following HTML…

<div class = "white">
  <p>Hello, World!</p>
</div>

…. and I want to target the p element, I could use the selector “.white p” . I would put .white first because the p element is inside of the .white element. The code would look for the .white element and then find the p element inside of the .white element.

I would not use “p .white” because the .white element is not inside of the p element. The code would look for the p element and then try to find the .white element inside of the p element and it wouldn’t be able to find anything.

In Squarespace 7.1 the HTML for sections looks like this…

If you want to target a whole page we use #COLLECTIONID.

If we want to target a specific section on the page we would use #COLLECTIONID #page .page-section:nth-of-type(1) which says “I want the first page-section in the #page section on #COLLECTIONID page. The code would find the collection id and then search for the #page element. It would then find the first element that has the .page-section class and apply the code there.

…. and so on.

Class Selectors

Before using the selector make sure that all the sections you want to target have the right colour theme selected. Take note, that if you have not selected the colour theme, than the code will not work!

Lightest 1 = .white

Lightest 2 = .white-bold

Light 1 = .light

Light 2 = .light-bold

Bright 1 = .bright-inverse

Bright 2 = .bright

Dark 1 = .dark

Dark 2 = .dark-bold

Darkest 1 = .black

Darkest 2 = .black-bold

To target a section by its color them, choose the classname from the list above and add it to your code instead of “.page-section”.

For example, if I was using the following code to change the color of links to red…

a {
color: red;
}

and I wanted to apply this only to links in sections using the Lightest 1 theme, I would add .white to my code.

.white a {
color: red;
}

If I was using the following code to change the color of links to red on a specific page…

#COLLECTIONID a {
color: red;
}

and I wanted to apply the code only to links in sections using the Lightest 1 theme on a specific page, I would add .white to my code after the collection id because the page section element is inside of the collection id element (see photo above).

#COLLECTIONID .white a {
color: red;
}

If I add the .white before the collection id, the code would search for the .white element and then search for the collection id inside of the white element. Since it is not inside of the .white element, the code wouldn’t find anything to change.

How To Use It

1. Add the colour theme’s class name to your code in the correct order.