Site background

Resolved Lisa Clarke
(@polkadotcreations)

6 years, 3 months ago
Hello. I upgraded Storefront today, and it broke my child theme. In particular, it appears to ignore this line in my style sheet:
```
	.site {
		background: #FFFFFF;
	}
```
Instead of the content having a white background, it is transparent, which makes the body background show through.

I’ve restored a backup, so if you visit my site now, you’ll see how I want it to look.

Is there any reason why the theme update would ignore that CSS? Is there a better way for me to get the white content background I want?

Thanks in advance!
Lisa

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Job a11n
(@jobthomas)

Automattic Happiness Engineer

6 years, 2 months ago
Hi @polkadotcreations, that might be to a change in priority and/or selectors. If you right-click on your site, you can start looking for the right selector to target.

Link to image: http://cld.wthms.co/is7p9s

Could you try with .col-full instead of .site?
- This reply was modified 6 years, 2 months ago by Job a11n.
Thread Starter Lisa Clarke
(@polkadotcreations)

6 years, 2 months ago

Thanks for your reply, but .col-full is not sufficient. The white background needs to fill up the entire area that is covered by div#page.hfeed.site.

The new update ignores .site in my CSS, and I can’t find any other class or id that covers enough area.

I was hoping someone with knowledge of what has changed since the last version could tell me why .site no longer works, and what I could do to get around it.

I’ve upgraded the theme, and for now I am disabling my background image, but I’m not happy about the way it looks without it. I’d really like to get this figured out.

Thank you!
Thread Starter Lisa Clarke
(@polkadotcreations)

6 years, 2 months ago
More info:

I almost get what I want with .content, but the nav bar extends beyond the .site box (because the CSS to hide the overflow is being ignored as well) and with the bottom margin of the header in the way, I can’t get the white behind the content to extend far up enough. You can see what I mean here.

Edited to say, I solved the problem of the margin by removing the bottom margin from the header and replacing it with top padding on the content.
/* Fix the problem with the white background not showing above the content sometimes */
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header { margin-bottom: 0 } .home.blog #content, .home.page:not(.page-template-template-homepage) #content, .home.post-type-archive-product #content { padding-top: 4.235801032em; }

I’d still like to figure out how to deal with the mint green nav bar that extends too far, though.

Thanks.
- This reply was modified 6 years, 2 months ago by Lisa Clarke. Reason: typo
- This reply was modified 6 years, 2 months ago by Lisa Clarke.
Thread Starter Lisa Clarke
(@polkadotcreations)

6 years, 2 months ago
Finally I found the problem. This is new in 2.2.6:
```
.site {
    overflow-x: hidden;
    position: relative;
    display: initial;
}
```
Previously, it was simply:
```
.site {
    overflow-x: hidden;
}
```
I undid all of the kludgey CSS I did earlier today, and just added display: inherit; to my .site definition. Everything is back to normal now. Whew.

It would have been nice if that had been documented somewhere that was easy to find, as I’ve spent a lot of time on this!

I’m sharing the solution in the hopes it helps someone else 🙂