Change background colour on blog list view only

I was hoping someone could help me with a query on an in-progress site – we want the blog list view to have a white background colour but the blog posts within it to have a dark background colour. I didn't realise that the colour theme of the individual post is inherited on the index page list view.

I've tried targeting the section ID to force it in the CSS:

section[data-section-id="6581b8d6f5f72a7c7fee315d"]
.section-background {
  background: white!important;
}

Which seemed like it would work but then it pulls that background through to the blog posts themselves which is not what we want.

Does anyone have any fixes for this? Only the first test post is styled up currently (https://pug-violet-wsbr.squarespace.com/work/sample-item-social) but this will be the general look and feel with the dark background. And the list view on the /work page should have a white background so it blends into the rest of the page.

Is this possible? Briefly made the site live to see if anyone can help.

Blog list view, you mean this? And change all sections, or change 65...315d id section only?

https://pug-violet-wsbr.squarespace.com/work/

On 12/23/2023 at 2:30 AM, tuanphan said:

Blog list view, you mean this? And change all sections, or change 65...315d id section only?

https://pug-violet-wsbr.squarespace.com/work/

Sorry for the delayed response, just coming back to the project after the new year.

Yes just that one section (65...315d) changed to a white background, ideally with the code not affecting any of the other sections on that page. We also need it not to pull the white background colour through to the individual blog post pages (which is where my first solution fell down).

Any suggestions would be massively appreciated! Thank you

52 minutes ago, tuanphan said:

You can add this code to Website Tools (under Not Linked) > Custom CSS

body.view-list [data-section-id="6581b8d6f5f72a7c7fee315d"] .section-background {
    background-color: white !important;
}

 

That's worked perfectly, thanks so much for your help!

On 1/8/2024 at 9:04 AM, tuanphan said:

You can add this code to Website Tools (under Not Linked) > Custom CSS

body.view-list [data-section-id="6581b8d6f5f72a7c7fee315d"] .section-background {
    background-color: white !important;
}

 

Hi @tuanphan I just noticed that the fix works for desktop but it's still showing as a dark background when you switch to mobile view. Is there anything I can do to make it consistent across devices? 

What is password?

On 1/13/2024 at 9:36 AM, tuanphan said:

What is password?

instruct

I see you added the code in desktop @media query code, so it runs on desktop only. Move code I sent to top or bottom of CSS box, and don't wrap code in any } or { symbols of your current code

Thank you so much! No idea how I missed that, clearly been looking at it for too long.

On 1/8/2024 at 12:04 PM, tuanphan said:

You can add this code to Website Tools (under Not Linked) > Custom CSS

body.view-list [data-section-id="6581b8d6f5f72a7c7fee315d"] .section-background {
    background-color: white !important;
}

 

Hi guys, I tried playing with above code to make my blog posts page background different from the blog collection background. 

Applying below code applies it to the footer as well which is unwanted, so I could use some help with only targeting the blog article and pagination. 

site: haleakalaconservancy.squarespace.com

pw: paliku

    body[class*="type-blog"].view-item .page-section:first-child .section-background {
    background: @sand !important;
}

Thanks in advance!

On 8/6/2024 at 5:09 AM, MariaFY said:

Hi guys, I tried playing with above code to make my blog posts page background different from the blog collection background. 

Applying below code applies it to the footer as well which is unwanted, so I could use some help with only targeting the blog article and pagination. 

site: haleakalaconservancy.squarespace.com

pw: paliku

    body[class*="type-blog"].view-item .page-section:first-child .section-background {
    background: @sand !important;
}

Thanks in advance!

I can't find blog page. Can you share link?

And blog article, you mean blog content + Pagination?

@tuanphan 

Sorry about that! You can find it here: https://haleakalaconservancy.squarespace.com/news

pw: paliku

Yes, I mean both article and pagination, looking to change the background on the blog post pages to a color in specified as @sand in my CSS panel, while keeping the background of the blog collection page white.

On 8/11/2024 at 3:04 AM, MariaFY said:

@tuanphan 

Sorry about that! You can find it here: https://haleakalaconservancy.squarespace.com/news

pw: paliku

Yes, I mean both article and pagination, looking to change the background on the blog post pages to a color in specified as @sand in my CSS panel, while keeping the background of the blog collection page white.

You can use this code to Website Tools > Custom CSS

body[class*="type-blog"].view-item .section-background, .item-pagination[data-collection-type^="blog"] {
    background-color: #f1f !important;
}

Replace #f1f with color what you want.

@tuanphan Thanks, this code works, however, it does change the color overlay on the footer as well. Any ideas on how to fix this? I tried :not(footer) but that doesn't do it.

On 8/21/2024 at 3:32 AM, MariaFY said:

@tuanphan Thanks, this code works, however, it does change the color overlay on the footer as well. Any ideas on how to fix this? I tried :not(footer) but that doesn't do it.

Change code to this

body[class*="type-blog"].view-item #page article .section-background, .item-pagination[data-collection-type^="blog"] {
    background-color: #f1f !important;
}

That worked, thanks a lot @tuanphan