Make blog homepage one color, blog posts another color

Hello hello!

I know there is a similar thread on the topic of making a blog homepage one color and a blog post another. I thiiiink I tried all of the suggested fixes there but nothing seems to be working.

I assumed that choosing a color palette for the homepage would not affect the color palette I select for a blog post, but it seems like the two are inextricably linked?

Here are the different code snippets I've tried adding via custom CSS and code injection to make my blog posts white and my homepage -- at least the blog feature section -- yellow.

Note, I don't know much about code and have most recently relied on chatgpt to help me...

Code injection:

HEADER:

<style>
/* Custom CSS to set white background for individual blog posts */
.collection-type-blog.view-item #page {
    background-color: #ffffff; /* Set background color to white */
}
</style>
 

Also tried:

FOOTER

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (document.querySelector('.collection-type-blog.view-item')) {
        document.body.classList.add('blog-post-page');
    }
});
</script>

 with this CSS code added too

: .blog-post-page #page {
    background-color: #ffffff; /* Set background color to white */
}

Custom CSS I tried...

body.collection-type-blog.view-item #page {
    background-color: #ffffff; /* Set background color to white */
}
and: 

#collection-XXXXXXXXXXXXXXXXXXXXXX #page {
    background-color: #ffffff; /* Set background color to white */
}
(replaced XX... with blog id and that didn't seem to work either)

Am I missing something? Any ideas? Thank you in advance!

I do know how to change the color of one post and leave the home page and all other posts alone. You will need the ID for the post you wish to change, that ID replaces the one in this snippet, and you can change the color. To acquire the page id use this Chrome extension: Squarespace block/page ID finder.

#post-5fbc6c1172f8b574a0e3959c {   background-color: red;   

  }

You can post the above code multiple times using the specific id for each blog post. 

Hi Derrick - thank you so much!

Couple of follow-up questions: 

I want all posts to be white; does this mean I'd need to add that code for every post? And where do I place that code snippet? In CSS? 

Also: when using the chrome extension it shows multiple IDs on a single post. Which should I use? See screenshot of what I'm seeing re:  # of IDs... (there are more down the page)

We can use 1 code to target all blog posts

Can you share link to a blog post?

Hey tuanphan! Yes -- does this link work?

https://onion-banjo-h56w.squarespace.com/blog/10-proven-reasons-to-build-a-brand-positioning-strategy

(Sorry for delay in responding.)

On 2/13/2024 at 10:17 PM, Ashley_Peoplethebrand said:

Hey tuanphan! Yes -- does this link work?

https://onion-banjo-h56w.squarespace.com/blog/10-proven-reasons-to-build-a-brand-positioning-strategy

(Sorry for delay in responding.)

What is password?

Hi Tuanphan,

I'm having the same issue, I'd like to set the main blog grid/collection page's color theme to a different theme than the individual posts. Could you help me out with the code? Either to target the main collection page or all blog posts (but not both)? Thanks so much! Here's the trial site url https://afyoga.squarespace.com/blog and password: af

Thank you so much!

Actually, a little followup: I think I finally figured it out! 😅 Here's what worked for me: