Site logo

Archived topic

Body/ Background color/ Page specific

5 replies · Started by Jan on May 22, 2021

Viewing posts 1–6 of 6

Hi there,

two things:

1. The CSS should be this:

body.page-id-3542 {
    background-color: #8F9E78;
}

So no space between body and .page-id-3542 as the latter class is attached to the body.

However you won't see it because of the page container so its pretty pointless adding it :) Instead:

2. The page is set to full width - so the #page container color needs changing - to do that you could do this:

body.page-id-3542 #page {
    background-color: #8F9E78;
}

Personally i would simply edit that page and change the background colors of the Container Blocks.

You also have the site header and footer - does that need its color changed ?

Hi David,

thanks for shedding some light into this.

I removed...
- the space between body and .page,
- the background color of the first container block and
- the full-width setting of the container.

...but the background color is still not visible.

Do you think this is because of the background picture shines through at the lower part of the page?

Thanks,
Jan

PS: BTW - Your suggestion regarding coloring each container block (instead) makes perfect sense.

Hi Jan,

It's because in this page, all the containers are full width and have their own white background, so the green body background color can't come through to the front.
https://www.screencast.com/t/3hWpmJXDHqfo

This page is built with Generateblocks, so you can directly edit this page, and change the background color for the very outside container. Just like David mentioned :)

No CSS will be needed.

Hi Ying,

will do exactly that.

Many thanks for sharing this hint.

Regards,
Jan

No problem :)

This archived topic is closed to new replies.