Five: How do I create background color behind page title text?

The banner image on one of my pages makes the page title text hard to read, even if I change the font and font color. I'd rather not change the banner image itself. Is there a way to put a background color behind the page title text so that it pops from the photo, making it easier to read? The font is white so I'd like the background color to be black. I only want this on a couple of page titles, not the whole site.

I guess what I'm looking for is something that approximates the text highlight feature in Microsoft Word.

I'm using the FIVE template.

I'm new at this, so thanks in advance!

It should be possible to do. Would you post one of your page URLs?

Yes! Thank you! I am still building the site so hopefully you can see this.

https://abroadagogo.squarespace.com/expenses/

Try this. Go to your Custom CSS Editor and add the following rule:

h1#page-title {
        display: inline;
        background-color: #ff00ff;
        padding-left: 10px;
        padding-right: 10px;
   }

See if the above gives a purple background on the page you pointed me toward. It should do that.

If you right-click on your page title and select Inspect Element, you will see a pane open at the bottom of your browser page. Look closely, and you will see that the page title is an h1 tag with an ID value of "page-title". That's how I got the h1#page-title part.

Scroll up in that inspector pane. Find the body tag. It's a long one. Look toward the end of that tag. you'll find an id="collection-blahblahblah" value. That is the source of #collection-550b etc. You'll have to look up the specific collection value for each page, and write a rule like the above for each page.

Test everything closely. This turned out to be a little bit tougher than I had expected.

Screenshot below showing my results.

Jonathan,

THANK YOU SO MUCH! This is so helpful and it worked! You just saved me potentially hours of heartache. I definitely made the right choice going with Squarespace instead of Wordpress.

Hi Jonathan, I just clicked the +1 for Lj1 - good job man ! :D

Hi Jonathan,

Just a quick follow up question to a related issue here- I'd like to apply a background colour just like this but I want it to automatically apply to all pages that have a page title and I want it to appear for the page tagline that appears on the homepage as well.

Could you provide further custom code that could assist with this? I attempted myself but was not yet successful.

Site Link: https://kw-inline.squarespace.com/config#/|/what-is-inline-hockey/

Thank you very much!

@KBishop, it looks like you found what you need to put a color background on the page title. I see the blue background on your home page.

For the description, you might try:

#page-description p {background-color: #ff00ff;}

Give that a go and see whether you like the result.

Yes I figured out how to add it to one page using the collection tag, but I was hoping you could help me with a general code to ensure this bg colour is added behind the page title on every page.

The tagline code worked, thank you!

Hi Jonathan,

I'm trying to do the same thing on the CLAY template and your solution for Five is the closest I have come to a fix. I used your code and was able to add the highlight but the boxed text floated L. I am not able to force it center aligned.

Any time to take a look?Thanks in advance?

hi, would this work in Brine? I need more specific directions than you've provided if that's possible. I understand where to put the css, but don't get the rest of the directions.