Jump to content

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

Recommended Posts

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!

Link to comment
  • Replies 10
  • Created
  • Last Reply

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.

alt text

Link to comment
  • 9 months later...

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!

Link to comment
  • 1 year later...

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?

Link to comment
  • 9 months later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.