Background color is suddenly gone!

Hi Nick,

The live and staging site look the same from my end. Can you take a screenshot of the staging site from your end for reference?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Hi Fernando!

Thnx for helping.

Attached are the two screenshots. On the test page you can see a gray background while the live page has no or a white background.

Stagingsite: https://immarketingforum-my.sharepoint.com/:i:/g/personal/marcuz_hello-world_net/ERJgmCA77cxOkH7svNcixjsBmT3gLwtPnLX6KkeEDutOkw?e=XvW1Eh

Livesite: https://immarketingforum-my.sharepoint.com/:i:/g/personal/marcuz_hello-world_net/EfOqeBPlK09EoWnEkCu7iogBkjhJ96D_StOcyJb5UnHmiA?e=9OIbcI

Hi Nico,

Can you check if the Content Layout settings of both sites at customizer > layout > containers are matching?

Hi Ying!

Yes both sides are totally matching. I've checked it.

Here you can see both sites.

Livepage here (without background): https://www.hello-world.net/jakobswegreisen-shop/
Staging site here (with background): https://relaunch.hello-world.net/jakobswegreisen-shop/

The Elementor plugin is adding a white background color to the body of your live site.

If you disable the Elementor plugin, the colour should show correctly.

Good morning Ying!

Thank you for your feedback. Does that mean we can't run Elementor in parallel with GeneratePresse? We actually understood that GP is compatible with Elementor.

Comment see here:
https://generatepress.com/forums/topic/how-to-use-elementor-pro-with-generatepress/#:~:text=Yes%20GP%20is%20compatible%20with,of%20related%20user%2Dwritten% 20articles.

It's alright to run Elementor in parallel with GeneratePress. It just means that the code Elementor generates takes precedence over the code of GeneratePress. You'll need to remove the setting in Elementor that sets the white background color to the body, or, you can set your preferred color there.

Good Morning Fernando!

We located the problem. It's the Elementor popup. As soon as we deactivate the popup, the page is displayed correctly again.

See test page with active popup here: https://relaunch.hello-world.net/jakobswegreisen-shop/

Live page with deactivated popup see here: https://www.hello-world.net/jakobswegreisen-shop/

Even if we deactivate the background color of the Elementor popup, the display error does not go away.

However, the problem is that we desperately need the Elementor popups.

Can you help us to solve the problem?

Hi there,

Elementor is adding this CSS to your site:

.elementor-kit-55029 {
    --e-global-color-primary: #6EC1E4;
    --e-global-color-secondary: #54595F;
    --e-global-color-text: #7A7A7A;
    --e-global-color-accent: #61CE70;
    --e-global-typography-primary-font-family: "Roboto";
    --e-global-typography-primary-font-weight: 600;
    --e-global-typography-secondary-font-family: "Roboto Slab";
    --e-global-typography-secondary-font-weight: 400;
    --e-global-typography-text-font-family: "Roboto";
    --e-global-typography-text-font-weight: 400;
    --e-global-typography-accent-font-family: "Roboto";
    --e-global-typography-accent-font-weight: 500;
    background-color: #FFFFFF;
}

And that elementor-kit-55029 class is attached to the body tag, so its background-color: #FFFFFF; overrides the themes CSS. I assume that color is defined here in Elementor:

https://elementor.com/help/background-site-settings/

If not, your quickest and easiest fix would be to add this CSS to your site:

body {
    background-color: var(--base-2) !important;
}

This will stop Elementors CSS from overriding the body color.

Thank you David. That was indeed the problem.

Happy to be of help!

Have you seen my private message/question yet?

I see it now :)
And we do:

https://generatepress.com/ongoing-development/

Done... :)

Thank you for the helpful support over the years. Best regards to the entire team and all the best for 2023.