Different colored pages

Hi there,

You would need to use CSS and target specific pages.

For example, this would do for the Music Ministry page:

body.page-id-244 {
    background-color: #fff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps ??

Dear Leo
Many thanks. that’s really helpful.
I downloaded Simple CSS and it works fine.
It’s at https://brightmorningstar.org/christmas-cantata/

How would I add text color to that code. I tried this

body.page-id-830
{
    color: #000;
    background-color: #fff;
}

And I tried half a dozen other variants without success.
Any idea?

• This reply was modified 4 years, 9 months ago by mnatseah624.

Hi there,

you also have this CSS which is setting the text color for the content:

body.one-container .container {
    background-color: transparent;
    color: #ffffff;
}

So you would need to add a separate rule for the text like so:

body.page-id-830 .container {
    color: #000 !important;
}

• This reply was modified 4 years, 9 months ago by David.
• This reply was modified 4 years, 9 months ago by David.

Dear @diggeddy (@leohsiang)
Thanks, David. I’m afraid that’s not working.
I also tried

body.page-id-830 .one-container .container {
    color: #000;
}

Any other ideas?

I made a slight change here to give it some important!

Dear @diggeddy
Many many thanks. That works well. And the !important tag has solved several of my issues.
May I beg of you one more thing, pls?…
I can’t change the color of the black header
This is the code I’m trying

body.page-id-830.site-header {
    background-color: #fff !important;
}

Any ideas?

You’re missing a space here:

body.page-id-830.site-header

it needs to be:

body.page-id-830 .site-header

OK. I didn’t realize that space was important.
I live and learn. ??
Thanks and God bless

body is the HTML element and page-id-830 is a class that is attached to it.
So it has no space to separate them

Spaces between classes state they are separate elements.

So your CSS says target the site-header element that can be found in the body element of page-id-830 ??

Glad to be of help.

Thanks for the explanation @diggeddy

You’re welcome