XF 2.3 Block theme

[Ricsca]

How can I set the theme to be boxed, meaning the center of the page (with the nodes) is all white and the background on the sides is a different color?

 

[Ricsca]

Ho trovato questo post ma non ho capito dove inserire html{background: red;}

XF 2.2 Thread 'change background'

Dec 13, 2020

Hello
How do I change the background of entire site? Not the page background but the light gray stock xf background.

Thank you

Finn

• Dixie McCall
• Replies: 17
• Forum: Styling and customization questions

 

[zenvibe]

Add this to your extra.less — it's the standard way to do a boxed layout:

html {
    background: #2c3e50;  /* your side background color */
}

.p-pageWrapper {
    max-width: 1200px;
    margin: 0 auto;
    background: @xf-contentBg;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

That's the core of it. The max-width constrains the content, margin: 0 auto centers it, and the page background shows on the sides. You can also set the page background color from ACP > Style Properties > General > "Page background" instead of hardcoding it in CSS.
Adjust the max-width value to whatever width you want. You might also want to add some top/bottom padding on .p-pageWrapper if you want spacing above/below the boxed area.