How do I change the background Color of one of my blog posts without effecting the site overall?

Hi I am wondering if there is way to change the background color of a specific blog post without needing to change the website color overall. Any recommendations would help thank you. 

57 minutes ago, ser511 said:

Hi I am wondering if there is way to change the background color of a specific blog post without needing to change the website color overall. Any recommendations would help thank you. 

You can inject the custom css into indidual page so it wont affect site wide

From Pages edit -> Click on Gear icon -> Advanced -> Injection

You can share link to blog post, we can help easier.

https://deer-crane-j88h.squarespace.com/blog/pt-2-reading-project

Here is the link. I changed the background of the blog color but I guess it also effects the posts as well

Add the following to Design > Custom CSS.

#post-5fbc6c1172f8b574a0e3959c {

  background-color: red;
  
  }

This is for a v7.0 site using a Brine family template.

You can of course change the color to suit.

Let us know how it goes.

So it worked showing my posts now that the background is white but the color also goes to the blog page see pic below. Is there any way to make it transparent/ or not effect the thumbnail

On 12/19/2020 at 1:53 AM, ser511 said:

So it worked showing my posts now that the background is white but the color also goes to the blog page see pic below. Is there any way to make it transparent/ or not effect the thumbnail

Can you share link to page in screenshot? We can check easier.

On 12/18/2020 at 6:39 AM, creedon said:

Add the following to Design > Custom CSS.

#post-5fbc6c1172f8b574a0e3959c {

  background-color: red;
  
  }

This is for a v7.0 site using a Brine family template.

You can of course change the color to suit.

Let us know how it goes.

Hi @creedon

Is there a code to change the background for blog posts for v7.0 Foundry template? I've tried all the others and they don't work. 

page: https://www.wordsbyisabel.com/full-blog/2022/2/6/2022-the-year-of-finishing

I just want to change it to white! :)

1 hour ago, isb said:

Is there a code to change the background for blog posts for v7.0 Foundry template? I've tried all the others and they don't work.

Each post has a unique id. So other people's ids won't work on your site.

Here is the CSS you need.

#item-620037b38651640505b9a494 {

  background-color : white;
  
  }

Let us know how it goes.

Hello, I have been following this thread as I need to do the same thing. It is beyond me why Squarespace hasn´t set up a preset to be able to make your blog stuff white behind, it seems very - well - normal that people would want it.

I was able to get the background white - sort of - But the edges around have stayed the orange color.

Any advice on how to make the side - edges white as well?

Here is the post I am working on : https://www.wholelifesolutions.biz/blog/waffles-noodles-and-why-its-actually-a-good-thing-he-doesnt-give-a-damn-about-the-color-of-the-linens

I have used the code given above (adjusted) to create this:

#post-5fbc6c1172f8b574a0e3959c {

  background-color: red;

6 hours ago, SeventhSense said:

I was able to get the background white - sort of - But the edges around have stayed the orange color.

Any advice on how to make the side - edges white as well?

Add the following to Design > Custom CSS.

.collection-type-blog .Main {

  background-color : white;
  
  }

This is for v7.0 using the Brine template family.

Let us know how it goes.

That works! 

Thanks :-)!

On 2/25/2022 at 7:47 PM, creedon said:

.collection-type-blog .Main {

  background-color : white;
  
  }

On 2/10/2022 at 3:34 PM, isb said:

Hi @creedon

Is there a code to change the background for blog posts for v7.0 Foundry template? I've tried all the others and they don't work. 

page: https://www.wordsbyisabel.com/full-blog/2022/2/6/2022-the-year-of-finishing

I just want to change it to white! 🙂

 

Having the same issue. Would also like the entire page background of a blog post to be white.

I am using version 7.0 – Brine family (Sofia Rey template), would you happen to have a code I could use?

https://www.traceyjohnson.work/graphic-design-portfolio

19 hours ago, tracey said:

Would also like the entire page background of a blog post to be white.

Your first stop is to go to the page where you want to change the background color.

Then go to Design > Site Styles. Then you hover over the bit you want to change the color of and click. If Site Styles contain a tweaks for the clicked element they will be shown on the left.

Let us know how it goes.

Hi @ Creedon, thanks for your reply, appreciate it, but this method creates a site wide change, whereas I'm looking to target the Blog Post page only. My aim is to have the blog landing pages with full colour backgrounds:

https://www.traceyjohnson.work/graphic-design-portfolio
https://www.traceyjohnson.work/photography-portfolio

And internal blog post pages to remain white:

https://www.traceyjohnson.work/retouching-portfolio/racq

With my template, using the Design > Site Styles method I am limited as colour changes are site wide rather than page by page. As a work around I've entered custom code into the Blog Settings > Advanced > Page Header Code Injection section to be able to change the Header, Intro & Main background colours, which is great for the Blog main page, but it colours the internal pages:

https://www.traceyjohnson.work/graphic-design-portfolio/milque

I'm trying to find a way to get these internal blog pages to remain white, or find another custom code to change them to white.

Attached is the custom code I've used.

1 hour ago, tracey said:

I'm looking to target the Blog Post page only.

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page. Please see per-page code injection.

<style>

  .collection-type-blog.view-item .Header--top,
  .collection-type-blog.view-item .Intro,
  .collection-type-blog.view-item .Main
  
    {
    
      background-color : white !important;
      
      }
      
  </style>

Let us know how it goes.

Success, that's it! Thanks so much @creedon 🙏 This has been doing my head in for a week! 😂

Hi! Looking to change the background of all the blog posts on my page to white.

And then I will need to change the font colour to the dark colour.

Your help is appreciated. 

akfitnessandhealth.com

Thank you in advance

On 12/26/2022 at 7:28 PM, Azz said:

Looking to change the background of all the blog posts on my page to white.

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page. Please see per-page code injection.

<style>

  body.collection-type-blog.view-item {
  
    color : black;
    
    }
    
  body.collection-type-blog.view-item .Main {
  
    background-color : white;
    
    }
    
  </style>

Quote

And then I will need to change the font colour to the dark colour.

You can change some of the blog font colors in Design > Site Styles.

Let us know how it goes.

Was able to change the background color (yay) but strangely Blog font colour doesn't appear in the Design<site Styles. 

I have seen it there before but strange that it's not there so I can't edit ANY functions to do with Blog. Any ideas are welcome. Thank you so much. 

34 minutes ago, Azz said:

strangely Blog font colour doesn't appear in the Design<site Styles.

My bad. There are settings for other Blog font elements, except for the main text.

I have updated my code post.

Let us know how it goes.

Thank you. Ok so it worked however, in my design settings there is nowhere I can edit any blog elements so the headers were still white. 

I had seen blog elements in the site design before but there is nothing there anymore. 

Any tips are welcome. Thank you!

5 hours ago, Azz said:

Ok so it worked however, in my design settings there is nowhere I can edit any blog elements so the headers were still white. 

I wish. I don't have those options. 

I used to. But no longer. There is nothing blog related in the design>site styles 

Any ideas are welcome and appreciated. I don't mind giving you my log in

3 hours ago, Azz said:

I used to. But no longer. There is nothing blog related in the design>site styles

Odd.

Quote

I don't mind giving you my log in

You don't need to give me your login but you can send me a Contributor Invite with Administrator privileges.

I will DM you my contact info.

Oh and if for some reason we can't get those options to show up, we can certainly use some CSS. But I think it's good to figure out why something isn't working as expected and use built-in features where possible.