Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
LJ1

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

Question

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!

Edited by TreyT

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 2

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

Edited by JonathanGennick
Added screenshot

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

@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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...