Background color of all content area
Can I get some fresh eyes on this please? I want to be able to set the background color of the content area - including full width of the screen of course. (not the header or footer)
This should work, but is not taking effect:
div#main-content { background-color: #000!important; }
They'll want a very light grey, not black, but I'm using black to try to get it to work.
http://new.atra-flex.com/why-atra-flex/grid-coupling-comparison/
Any help is appreciated!
This should work, but is not taking effect:
div#main-content { background-color: #000!important; }
They'll want a very light grey, not black, but I'm using black to try to get it to work.
http://new.atra-flex.com/why-atra-flex/grid-coupling-comparison/
Any help is appreciated!
ASKER
Is that the parent style sheet you found that? If so, I have to override it in the child stylesheet.
It was in style.css.
Important note that I forgot to mention... I didn't actually see the "div#main-content " class you referred to anywhere in the page. I had to add it manually to Chrome tools to find the issue.
Not sure if the site you posted is up to date?
Important note that I forgot to mention... I didn't actually see the "div#main-content " class you referred to anywhere in the page. I had to add it manually to Chrome tools to find the issue.
Not sure if the site you posted is up to date?
ASKER
Which style.css? I use firefox. At the top of the stylesheet where I need to add is Divi child atra flex. And I didn't leave in the div#main-content because even though it should work, it didn't.
I have to over-ride what ever in the parent won't let me change it. I can only put the css in the child or it will be overwritten on upgrade.
I have to over-ride what ever in the parent won't let me change it. I can only put the css in the child or it will be overwritten on upgrade.
I'm seeing a different conflict, but I see a div#main-content. The conflict is coming from Divi/style.css on line 3093. This style selector is more specific so it's taking precedence.
.page.et_pb_pagebuilder_layout #main-content {
background-color: transparent;
}ASKER
Tried:
.page.et_pb_pagebuilder_layout #main-content {
background-color: #000!important;
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
My mistake. I was so busy looking for #main-content I didn't notice there are two other elements on top of it. Now I see what Snarf0001 saw in his initial comment. The style definition on line 9644 of Divi/style.css. You'll have to change that div (.et_pb_section) background-color from white to transparent for the #main-content div to be visible. You could also change div.et_pb_section to the desired background color, but since that's a class definition, it could change the background of other elements, too, which could be a problem.
.et_pb_section setting the background color to white.
That one is a child of the #main-content, so hiding the black color you want.