Site Background Color, Page Background Color, Header and Footer Full Width

Hello!

I am searching for a way to make the site background one color (grey) and the page background another color (white or light grey) while keeping the header and footer (menu, etc.) fullwidth.

(I haven’t found any theme demos that show a similar background/page variation so this brings me here to ask the question.)

I was hoping this edit could be accomplished simply through the theme settings, but it doesn’t appear possible. (and maybe this is because I am not familiar with how to edit the theme settings)

Is there a way to do this through the theme settings? If so, how is this accomplished (properly)?
If not, is there a way to achieve this look through a custom CSS style? If so, could you please share the proper CSS styles to edit?

Thanks much!
(Hope I explained this fully, if not, let me know and I will show you a screenshot) 😉

Just wanted to add…when I try the boxed version in the theme settings, it boxes the header, menu and footer and this is not what I want.

Here is an example screenshot…
https://jumpshare.com/v/Etyyh2vqZgu9zlhETfDL

Thanks!

HI

When you set a background color or background image the theme switch n boxed layout and all page will have 1068px.
To set a different background color for pages you can use this css in theme panel > custom code > custom css:

body ,page{
background-color: green!important;
}

Hope this helps!
Thanks!