Site background color in the Icon.css – (Not exactly Beta related)

Beta
#1

Short version:
When you have the Icon stack selected and use Fullwidth layouts, the background color you set in Theme Options > Layout and Design is effectively covered by a white value set by the stack’s CSS. (Which appears to be true in prior releases too)

Longer version:
I never noticed this before because I preferr the look of the Integrity stack’s elements & layouts, so that’s what I’ve used on past builds. However, since the stack choice is somewhat irrelevant in this latest release, I just left it as the default (Icon) on a new site I was setting up.

So, when I went in to the Layout and Design settings and set a new background color, it was really throwing me off that the site was still showing as white.

Apparently icon.css sets this for both Fullwidth and Boxed layouts in the Icon Stack:

.site, .x-site {
    margin: 0 auto;
    background-color:#fff
}

Which effectively covers whatever background color you select in Layout and Design when you have a Fullwidth page.

I’m assuming this is because the Boxed layouts need a background color separate from the overall browser’s background color. And since it’s worked this way for a while, it’s probably not worth addressing right now.

However, whenever you tackle global styling with whatever you have planned for the Stack overhaul, it might be worth giving explicit control over how the x-site and body background colors are set. This was really confusing for a few minutes until I dove into the page’s CSS.

(I’m guessing I could probably set up a new Layout, explicitly set the colors on that, and assign it to all fullwidth pages… but that seems like a lot of work to address this particular quirk)

#2

Hey, @devinelston!

So that’s a nuance of Icon’s design. All of the stacks have the “site” background and then a “content” background area. For Integrity, the site background is the area that is normally a light gray and the content area is the part that is normally white and elevated with the box shadow. With Icon, there is a slight nuance in that the content background typically covers the whole screen. The site background can really only be seen in Icon in boxed mode. My install is currently all over the place with assignments and stuff, but you can kind of see this displayed here. I’ve switched to Icon and turned the site background to orange and the overall layout to boxed, allowing you to see the sides:

Screen Shot 2020-11-13 at 4.46.04 PM
Screen Shot 2020-11-13 at 4.46.04 PM2880×1542 253 KB

That all being said, moving forward with the next release after this one, we will effectively be moving away from the classic idea of “Stacks” and while those old ones will always be available, things going forward will essentially be done completely natively. Stacks will be collections of Layout templates, Headers, and Footers, along with custom pages. These old paradigms will be going away with things being able to be built out completely in the Builders.

Hopefully that helps!

#3

Thanks @kory, I did a poor job clearly explaining that I had figured it out – but was just sharing the feedback so you could incorporate it into your thinking about however you handle the stacks overhaul.

#4

Gotcha! Appreciate the feedback there. Definitely the direction we’ll be going. When X was first conceptualized, we started with the idea of Stacks being complete opinionated designs with very different customization options in each one. The main benefit is that you could quickly start from a finished design.

The Theme Options reboot will introduce far more granularity and the ability to basically create your own stack. Then we can still offer finished designs to start from via Design Cloud, but you’ll be able to change much more than the current stacks offer.

1 Like