Background color change with CSS, GPP+Elementor

[Alec]

This is a very elementary question.

When I try to change the background color for a certain page from the default dark to white, the usual command

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

has no effect. Instead, I need to write these entrances for it:

.page-id-xxxx .container {
background-color: #fff;
}

and then

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

the last one is to get read of the fields (margins) on the left and right sides of the container that remain dark.
I am using GPP + Elementor. Does Elementor affect default GP behavior?

The same thing happens when I try to change color in the customizer, the page/post background color is divided into two:
1. body (this controls the margins
2. content (inside the content)

I am using the theme’s default GP’s layout (not Elementor canvas or Elementor’s full-width)

[David]

Hi there,

main reasons:

1. If the container is set to full width like it is on the Home Page, then the content covers the body.

2. The background color has been set in Elementor:
https://docs.elementor.com/article/193-document-settings

If you can link me to the page with the issues i can take a look

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

[Alec]

I am using the default theme’s layout. Your thought about the container and body was helpful for me to understand their functioning. So while ‘playing’ with new test page (no Elementor), I realize now in order to change the backgr. color, I need to address 2 things – body and container. Although these are very basics but, I needed to understand…

I am using your strategy for GP + Elementor from the very beginning: https://generatepress.com/forums/topic/guidelines-to-use-elementor-with-generatepress/#post-870937

that is very helpful, I like to use GP’s the most, Elementor only for inside content. I hope one day to drop Elementor and use only GPP (only a matter of mastering it).

I change color globally via customizer (mostly for posts) and then go to Elementor.

I’ll make a layout element with the full container to use with E.

Thank you, David, for your useful tips.

[David]

You’re welcome
Glad you found the tips useful

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

[Author]

Posts