Custom Background Colour to Auto Layout Simple List

Site URL: https://goodgriefcare.squarespace.com/

Hi,

I am using the new auto layout (simple list) and wanted to know if there is a way to have a different background for each card. Right now the setting only let you choose one colour for the background. I couldn't find how to target each card individually in Chrome Inspect. This is for the home page.

url: https://goodgriefcare.squarespace.com/

pw: 4%*MSms4

Thank you so much.

On 9/28/2021 at 9:49 PM, michael2019 said:

Site URL: https://goodgriefcare.squarespace.com/

Hi,

I am using the new auto layout (simple list) and wanted to know if there is a way to have a different background for each card. Right now the setting only let you choose one colour for the background. I couldn't find how to target each card individually in Chrome Inspect. This is for the home page.

url: https://goodgriefcare.squarespace.com/

pw: 4%*MSms4

 

Thank you so much.

Try in Design > Custom Css

section[data-section-id="60f8da3d24c5f82eff4e1c5d"] li:first-child {
  background:red !important;
}

section[data-section-id="60f8da3d24c5f82eff4e1c5d"] li:nth-child(2) {
  background:blue !important;
}

section[data-section-id="60f8da3d24c5f82eff4e1c5d"] li:last-child {
  background:pink !important;
}

Change the background values/url images that meet your style.

Here is my configuration for each card

One more thing, you can get the right Id selector by using the Squarespace ID Finder Extension

Here is the steps that I follow to find your ID in your site https://recordit.co/Aj9vXw6rfY

Thank you so much. I use the same Squarespace ID Finder, it's great. I got stuck with li:first-child, li:nth-child (2), and li:last-child. This was really helpful.