Make changes to a specific banner in the Brine template family (7.0)

All CSS tricksCustomization tipsTarget specific area7.0

Feb. 27

It seems like one of the most common struggles DIYers and designers alike have when creating a site in Squarespace, is finding out how to make changes to a specific banner on a specific page in the site.

Not being able to do so, limits you to using same-colored background images to make sure your chosen text color is visible at all times or adding an overlay to your banner images to make sure the color of the picture doesn't interfere with the color of your content.

But what happens when neither is an option to achieve the design you're after?

I'll be showing you exactly how to select a specific banner in your Squarespace site, depending on the template family you're using, so you can alter its style.

Overall, there are two ways of selecting the items inside ONE banner: by targeting the specific index section of your page, or by targeting an entire page.

Today we'll be looking at how to make changes to a specific banner in the Brine template family.

Selecting a specific banner in an index page

Each index section in these templates has for an ID the URL slug you gave to that particular page.

URL slugs are unique, therefore when using the index page ID in your code you'll be targeting that section alone.

Let's say you gave your page a URL of /something like shown here:

That means that the ID of your index page will be #something and you can use the ID selector in your CSS window to target it:

#something { }

Now, let's say you want to change the color of your heading inside that section, then you'd need to add the element selector for the h1 (or h2, or h3) as well:

#something h1 { }

And add the corresponding declarations to make the changes you want:

#something h1 {
  color: #000;
}

Easy, right?

Now, what if you want to add a background to the text or content inside the index section, but keep the banner image (or color) showing around it?

Then, you'll need to use a selector for the container that's holding all the blocks inside that index section. In this case you can use the class .Index-page-content.

That means we can use:

#something .Index-page-content {
  background: #000;
}

Note: depending on the width and side padding you have for your content area, you might see a larger or smaller area covered with your background color.

And if what you want to do is modify the banner overlay color or opacity?

In this case you'll need to target the pseudo-element that's acting as the overlay of the banner, as you can see here, sitting right before the actual image:

Note: this approach is for banners without parallax

Since this pseudo-element belongs to the figure element that has a class of .Index-page-image, we can use the selector .Index-page-image:before just like they did (see right-hand panel)

Currently it has the background color set as transparent thanks to the rgba value rgba(0, 0, 0, 0).

To make it darker, we can keep the black color and simply modify the opacity (alpha value)

#something .Index-page-image:before {
  background-color: rgba(0, 0, 0, 0.6);
}

Or change the color of the overlay altogether, how about a light green?

#something .Index-page-image:before {
  background-color: rgba(152, 251, 152, 0.4);
}

Ok, so what if you want to add the background color to an entire index section or page of your site, that doesn't have a background image?

In that case, you need to target only the ID of your section and give it a background color.

Here I'm using the section below the main banner as an example. It has a URL slug of /first

So, in this case the code would read:

#first {
  background: lightyellow;
}

Selecting a specific banner in a regular page

Doing this is a tiny bit trickier since you can't rely on the URL slug of your page, but its still pretty easy so stay with me here.

In this case you would be targeting the banner image in your page's intro section.

Note: you won't see the Intro section in your regular pages unless you upload a thumbnail image as the banner

If we take a look inside Inspect Element, we'll see that those banners have a common class of .Intro, so we can use that to target them.

However, to make it page-specific you need to either add your CSS under your chosen page's settings, or look for the page's ID and use that in your custom CSS window.

Option #1: adding your custom code to a specific page

Inside your page's settings window, in the Advanced tab, add your CSS styles to the Header Injection area by wrapping your code in style tags

<style>
  .Intro h1 { 
    color: lightgreen;
  }
</style>

Option #2: Targeting your page id in the custom css window

I prefer this option since I try to keep my code in the same place to make edits faster.

To do this, you'll need to target the unique ID of the page where you want to make the changes and then the element you want to style.

Here's a quick tutorial on finding your page ID if you're unsure how to do it!

So if you want to do alter the color of let's say an h1, your snippet (page ID + element to style) would look like this:

#collection-5913739937c5816f2531d741 .Intro h1 {
  color: lightpink;
}

And in this case, if you want to add a background color just behind the content but not covering the whole banner (like we did before), you'll need to use the selector for Squarespace's rows .sqs-row

#collection-347349374973 .Intro .sqs-row {
  background: #898989;
}

Note: be cautious when modifying styles for classes like .sqs-row that belong to the layout of Squarespace templates. If you don't specify which container you're referring to, you might affect more items than expected.

Here's a quick example of what I mean by that.

If I use this last code snippet but SKIP the .Intro selector and only use the .sqs-row one, like this:

#collection-347349374973 .sqs-row {
  background: #898989;
}

I'm telling my browser that I want the background color to be added to any element on my page that has the .sqs-row which in this case applies to all rows of my page layout, not just the one located inside the Intro section.

So as a result, all rows on my page turn grey!

Fun, right?