How to get backgrounds to show on chrome

[Peter_Fae]

hey. i can’t see the backgrounds that I set in posts and pages in chrome.

after a little experimentation, it seems to be related to the page layout.

this is almost the look I want, yet without the sidebar. however, when I set it to fullwidth, I lose the background on safari and chrome. i’ve tried ‘container - header - footer’ yet am getting weird results.

first example - https://www.peterfae.com/2004-academy-year-i/
(this is on Safari, and how i’d like it to look, minus the sidebar. I’d like the color of the middle section semi-transparent and centered with the background of the stars)

Yet on Chrome, I lose the background and get whitespace except in the sidebar area.

???

how to make the post fullwidth (no sidebar), with the slightly greyed out container w/the content inside with the star background on all browsers?

[friech]

Hi Peter,

Thank you for writing in, please change your page template to Layout - Fullwidth and then add this to Theme Options > CSS.

.page-template-template-layout-full-width .x-container.main:not(.x-row):not(.x-grid)::before {
	background-color: transparent;
}

The remaining semi-transparent background is the background-color of the section, you can adjust that on your section’s configuration.

Hope it helps,
Cheers!

[Peter_Fae]

That’s awesome. Yet, I have users that aren’t tech-savvy enough to use Pro or Cornerstone properly, and I want to give them an option to use Gutenberg and define the semi-transparency of the section through a plugin in Gutenberg.

Plus, I don’t want every page to have that semi-transparent thing. In some cases, it’s fine to be just white.

How to do?
(thank you btw)

[friech]

Hi Peter,

We understand, In that case, they need to learn how to use the Gutenberg (https://developer.wordpress.org/block-editor/).

I only provided that custom CSS to remove the native white content background on Ethos content container.

@Peter_Fae

Plus, I don’t want every page to have that semi-transparent thing. In some cases, it’s fine to be just white.

Please add that custom CSS on the Page > CSS area instead, that way it will not apply to all pages, just the pages where you added that CSS.

Thanks,

[Peter_Fae]

Okay. First off, thank you. I’m getting better with CSS and all of that whilst doing the work of like 20 people

So … I’m wanting to understand the particulars of X-Theme and how it integrates. I got a 3rd party plugin which adds a CSS metabox to the page or post (I know you don’t cover that and aren’t asking for support on that), and tested how I can add that bit of CSS which relates to X-Theme so that when a page, as said, is in full-width mode, it shows the background by making the container transparent.

This is a new understanding of the container for me, and allows me (when using that CSS on a page) to use a Gutenberg block which creates a background, fulfilling my purposing in an artistic way whilst not having the CSS go sitewide (which would make the white background of the container transparent whenever I used a background)

So it looks like this, on both Safari and Chrome --> https://www.peterfae.com/test-custom-css/

Which is cool.

This brings up the concept though … so, I want to be able to have backgrounds to my pages and posts when they are in, for a page, full-width mode, and for a POST (this Is new) in the same manner.

Since posts don’t happen with ‘full-width’ (though I can get a plugin that gives those kinds of options to posts but i’d rather not have to), they do have a set to full width option which would accomplish the same thing.

If you look at this example -->

And We Remembered

Only the sidebar shows the background, which I NOW understand why as i’m understanding CSS better.

So i’m asking, what is the code to put a POST that i’ve set to full-width to do the same thing?

And (And I know this is basic CSS to all of You yet your answers are very meaningful to me as i’m learning on top of my 20-person workload ) …

Basically I want to have the container for the content surrounded by the background and possibly semi-transparent. On the page, and ideally on the post as well, i’m seeing how I can set the color in Gutenberg and do some design there, which is great.

Yet i’m wondering … is there a code to make the container white (or semi-transparent) the way i’ve done it in the page example above for page & post?

What I mean by that is … right now, the CSS provided (thank you) makes it transparent, so the background can be seen. Yet this doesn’t work for all pages so I got the Add CSS metabox. But how can we create a general container for fullwidth pages/posts that has a similar visual effect in CSS?

Does that make sense? So i’m asking -

1 - what CSS to achieve the same effect for posts in fullwidth mode that we did for pages
2 - what CSS to add to that which makes the container (which is multiple colors int the page example but i’m sure you see what i’m talking about with the background all around it) white or semi-transparent?

Thank you so very very much. This is HUGE for me, actually. I’ve done so much work on the architecture i’m finally getting to dial in the visuals on the Storytelling in a design way.

[ruenel]

Hello Peter,

Thank you for the clarifications.

This is the code for the fullwidth page:

.page-template-template-layout-full-width .x-container.main:not(.x-row):not(.x-grid)::before {
	background-color: transparent;
}

1.) If you want to apply a code for the posts, you use this:

.single-post .x-container.main:not(.x-row):not(.x-grid)::before {
	background-color: transparent;
}

2.) If you are using Gutenberg, you will have to set the background color for your blocks within the Gutenberg block.

• 

Hope this helps.

[Peter_Fae]

Ruenel awesome.

[ruenel]

Hi Peter,

It’s good to know that it works for you.
Please don’t hesitate to open another thread if you need anything else we can help you with.

Cheers.