Change Footer Element Background on each page

Hi R,

On my website each page has a color assigned to it. Example home = yellow, inner page 1 = green and inner page 2 = red.

How did you assign the color to pages?

Hi there,

you could do this with a little CSS and the GP Color Pallet.
For example:

1. go to Customizer > Colors and add a new color , lets call it: main-color and set it to the color for your homepage eg. #ffff00.

For reference GP will print the following CSS on your site to register that color:

:root {
    --main-color: #ffff00;
}

2. Now assign this color to those elements on your site.
Which will currently apply to ALL pages of the site.

3. Now create additional colors in your pallet for the alternative colors eg.

main-alt-1 and with the color #00ff00
main-alt-2 and with the color #ff0000

The GP Dynamic CSS for these colors will now be like so:

:root {
    --main-color: #ffff00;
    --main-alt-1: #00ff00;
    --main-alt-2: ##ff0000;
}

Note that the CSS has the -- prefix, this is auto added by GP and should not be included in the color pallets name. so you enter main-colour and GP prints --main-color.

4. Now comes the custom CSS part where we will swap the value of --main-color with an alternative color depending on what page it is on.

First we need a way to select the specific page in our CSS and that we can use one of the WP body classes.
View the page and Right Click and Insepct the page to open the browser developers tools.
In the dev tools elements tab, look for the body tag where you will find the body classes. For reference and example see here:

https://app.screencast.com/YVoWDUdlJS8Lh

For this example we will use my page-id-178 class for our CSS selector like so to swap the --main-color value for the --main-alt-1 value:

.page-id-178 {
    --main-color: var(--main-alt-1);
}

If you need assistance with swapping colors for specific pages, share us some links to your site and we can assist with the specific CSS.