Jump to content

Make blog homepage one color, blog posts another color

Recommended Posts

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!

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

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. 

Edited by derricksrandomviews
Link to comment

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)

Screenshot 2024-02-08 at 10.41.37 AM.png

Link to comment
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?

image.png.e56a356cc82bb12e743689c0b372a980.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.