Jump to content

How do I change the fonts on just one page?

Recommended Posts

  • 3 weeks later...
  • Replies 12
  • Views 61.3k
  • Created
  • Last Reply

You just have to write a more specific CSS rule using the specific page class that is generated on the body tag. Just depends which page you want to use and how you want to target/specify the rule.

For example, if you want to bold the font on the Collection List page, you could do:


.collection-type-blog.view-list h1 {font-weight: bold;} 

Or italicize on the blog item page:


.collection-type-blog.view-item h1 {font-style: italic;}

Link to comment

Login to your Sqaurespace site and select the page you want to edit. Then select that page’s settings and choose Advanced settings. In the Header injection, if you’re wishing to change the text, you add:


<style>
p {
 font-size: 30px;
 color: red;
}
h1 {
 font-size: 40px;
 color: #fff;
}
</style>

You’d benefit more if you provided a link to your site and asked a specific question like: How do I make the font of the third paragraph a size of 22 with a color of purple, underlined, and bold?

Link to comment
  • 8 months later...

I finally figured out how to change header font colour on a specific page in Bedford.Huge thanks to the community for all the breadcrumbs. Hopefully this prevents someone else from going insane.

  1. Find your Collection ID for the page you want to change the header font colour for (Find collection ID in Squarespace 7)
  2. Go to your Custom CSS Editor
  3. Add these 5 lines of CSS to be sure it captures all text in the top section. Remember to change the Collection ID (546…) to your own:
    
    
    #collection-546acd18e4b07469c8b9ee9f .desc-wrapper h1 { color: black !important; }#collection-546acd18e4b07469c8b9ee9f .desc-wrapper h2 { color: black !important; }#collection-546acd18e4b07469c8b9ee9f .desc-wrapper h3 { color: black !important; }#collection-546acd18e4b07469c8b9ee9f .desc-wrapper p { color: black !important; }#collection-546acd18e4b07469c8b9ee9f .desc-wrapper strong { color: black !important; }

    If you don’t use desc-wrapper then I believe it will change all of the elements (h1, h2, h3, p, strong) on the whole page. Whereas we just want to change it in the header.

To see it in action: http://matt-mclean-ikjo.squarespace.com/blog

Link to comment

@mdmclean88, I’ve tidied up your answer a little bit and formatted the CSS so it appears as code.

There’s no technical limits on trial sites either, so I removed that bit at the end.

One question for you, do you mean for all of those elements (h1, h2, h3, p and strong) to have the same style (black in this case)?

If you do, that code can be simplified further through the power of Less:


#collection-546acd18e4b07469c8b9ee9f .desc-wrapper {
 h1, h2, h3, p, { color: black !important; }
}

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment

You’re welcome, the only thing I should add is that currently Squarespace’s version of Less is at 1.3.3 and the official Less project is at 2.0.

I’m not sure how much this affects us though, the official documentation is a bit thin on the ground when it comes to what’s changed.

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 5 months later...
  • 7 months later...
  • 9 months later...

Hello Peter Rox of The Future - I have added above code in the custom css:

collection-546acd18e4b07469c8b9ee9f .desc-wrapper {

h1, h2, h3, p, strong { color: black !important; } }

I have changed the ID number with the one of my page.

What additional code do I have to add and where to change the font colour on a section of an index page?

thanks a lot!

Link to comment
  • 2 weeks later...
  • 6 months later...

Archived

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.