How to change the colour of my footer on a specific page - Conditions?

How To
1

Hello,
I have a template footer and my client would like a different background colours only for a specific page. Is there a way to make a condition to add a different class for this specific page ? I would like to avoid duplicating footer only for a small thing like this.

Thank you for your time.

2

You can set up a toggle field and use attributes to let the client easily choose which pages should have the alternate footer color

1 Like
3

Hey @creativeart,

you probably have an outer wrapper element in your footer template (maybe a block or a section) which you apply the background color on, don’t you? On that element you can just use some custom CSS to adjust the background color for specific pages:

body:where(.page-id-10, .page-id-11, ...) %root% {
  background-color: red;
}

Just replace the 10 / 11 with the IDs of the pages you want the custom color to apply.

Best,

André

1 Like