Q re FSE settings in editor, background color mixup

Hi there,

I have set site background colors to a dark color (purple) so that header and footer extend with this color all the way to the top or bottom. The main body then in the page template is set to white background. Works well when displaying. When editing a specific page, the background *in*the*editor* will be purple (when displayed it will be white). This makes for hard editing! (Black text on dark purple.) How can I get the editor to use the template background for this part?

How you set the background as white for the site? Is that with CSS? If so, please ensure that you are adding the CSS to Site Editor > Styles. There you can click on the three-dot icon (kebab menu) and go to Additional CSS:

Full Size: https://d.pr/i/Yox1tm

Also in the editor, the main body text goes all the way to the left and right page boundary (zero margin) while during regular display it uses the page settings which are the default 1200 px max. Where is that setting? It works on another site but I just can’t find the setting; I have searched high and low.

If that only happens on one site, can you please clarify on differences that you had on this site? Have you added code or CSS to it?

Also, could you please share a screenshot of that?

Thanks for helping!

Regarding issue 1. I didn’t change any CSS. The site background is purple. The main body color is set to white, see https://bayave.com/wp-content/uploads/2024/02/Screenshot-from-2024-02-20-20-39-00.png

The reason for this setting is that if I don’t set the site background to purple but to white, I’ll get some white-colored space above the purple header and below the purple footer, which I don’t want: I want the purple header/footer to extend all the way to the top and the bottom. (I don’t think this is a good solution, but I spent hours finding a better one and couldn’t. This current solution is from the forums here.)

In the editor then the background is all purple, as the white color setting in a page template apparently does not touch the editor? Screenshot https://bayave.com/wp-content/uploads/2024/02/Screenshot-from-2024-02-20-20-45-49.png – you can even see the warning about poor color combination on the right.

Regarding issue 2. The same screenshot #2 above shows the issue of ignoring regular width but going all the way to the margins.

Thanks again!

Hi there, I see your point.

If I understood correctly, the background color and padding for the page content on the Site Editor and the regular post editor are different.

That looks like a bug, but I couldn’t find a specific open issue specifically for that.

Can you confirm if you still reproduce the issue with Gutenberg activated? It brings some fixes to the editor, so could already work as expected.

Thanks for the answer. I installed the Gutenberg plugin and created a new post. I can’t see whether this is the old editor or a new one? The problem persists, however.

Thanks, @dirkriehle! Do you mind getting the code of this page, and sharing it with me?

You can do that by going to the menu icon on the Site Editor, then selecting the “Code Editor” (or using ???M on macOS):

Full Size: https://d.pr/i/mQqu4n