YORK Index background colors

I'm trying to have different indexes and their pages to have different background colors. Through my searches I've found that a lot of users were using something like such for a 'Photo', and 'Motion' index as an example:

#index-section-photo .index-item {
  background-color: #ffffff !important;
}

#index-section-motion .index-item {
  background-color: #222222 !important;
}

I didn't get any results in the Custom CSS panel. Any ideas on what I may be doing wrong?

@roygbivla Each page will have different ID (#collection-..c84).

body#collection-566f463ed8af1045cf922c84 #content {
   background-color: red;
}

How to find page ID: https://thirtyeightvisuals.com/blog/how-to-find-your-page-id-in-squarespace

Thank you for this. It is definitely an option but it applies the color only to the body, but is there a way to apply it throughout every page within the index? This code only applies it to the body of one specific page. It doesn't show up in the rest of the page. Just curious.

@roygbivla

body#collection-565cb9dae4b02fbb0a540ec2 .overflow-wrapper {
   background-color: red;
}

Great this will do. Thank you!

Hi @tuanphan 

Thank you for your time & CSS code.
I might be dumb, but I've tried multiple times with the guideline, and it's doesn't work for me 😭. (I have the code who appear on my website up the page).

Do you have suggestion on what I've done wrong? Let me know if you have some time and I can show you the CSS code I've applied. 

Many thanks and wishing you a lovely day.

C. 

On 2/4/2021 at 7:53 AM, Coliviapearson said:

Hi @tuanphan 

Thank you for your time & CSS code.
I might be dumb, but I've tried multiple times with the guideline, and it's doesn't work for me 😭. (I have the code who appear on my website up the page).

Do you have suggestion on what I've done wrong? Let me know if you have some time and I can show you the CSS code I've applied. 

Many thanks and wishing you a lovely day.

C. 

Can you share site url? We can check easier

Thank you @tuanphan for your answer ! Here's the page in question : http://catherine-pearson.com/info-contact

I've finally put this CSS that work half :
 

Quote

 

<style>

body#collection-5cbe3abee2c48385aa379a20 div#site {

    background: #ffd6e4;

}

</style>

 

What I don't understand: it works but not when you browse directly on the page, you have to manually refresh the page to see the background color appear. I hope my explanation make sense

Thank you!

On 2/11/2021 at 5:01 AM, Coliviapearson said:

Thank you @tuanphan for your answer ! Here's the page in question : http://catherine-pearson.com/info-contact

I've finally put this CSS that work half :
 

What I don't understand: it works but not when you browse directly on the page, you have to manually refresh the page to see the background color appear. I hope my explanation make sense

Thank you!

Design > Site Styles > Disable Ajax Loading