Make changes to a specific banner in the Brine template family

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?

Then it's time to take advantage of CSS.

 

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: 

 Identifying the id of a specific index page in the Brine template

 

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 { }
 Selecting one specific banner index in CSS

 

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;
}
 Changing the style of a header only on one index section

 

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 (the I is uppercase).

 Finding the class for the content container of an index section in Brine

 

That means we can use:

#something .Index-page-content {
  background: #000;
}
 Changing the color of the title inside one specific index section in Brine

 

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.
 Adding a background color to the text inside a banner image in Brine

 

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
Brine template banner overlay CSS.png

 

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);
}
Changing overlay color banner in Brine.png

 

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);
}
Change the color of one banner overlay in Brine.png

 

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

 Finding the ID of an index page section in Brine

 

So, in this case the code would read:

#first {
  background: lightyellow;
}
 Adding a background color to an index section in Brine

 

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
 Adding a banner image to a regular page in Squarespace

 

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

 Using Inspect Element to know how to select the intro banner of a regular page in Squarespace

 

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.

So if for example you want to change the color of the title over your banner image, your code will look something like this:

<style>
  .Intro h1 {
    color: lightgreen;
  }
</style>
 Changing the color of a heading on a banner image in a regular page in Squarespace

 

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;
}
 Target a specific regular page in Squarespace with CSS

 

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;
}
 Adding a background color to a title on a regular page banner in Squarespace
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?

 An example of messing up your Squarespace site with code
 

To keep in mind

  • If your code isn't working, try using the !important rule in your declaration to override the current style. For example:
#something h1 {
  color: red !important;
}

 

Hope you found this helpful!

 

Until next time,
B.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way