Solved

Background color of all content area

Posted on 2016-07-19
8
55 Views
Last Modified: 2016-07-20
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!
0
Comment
Question by:Dzynit
  • 3
  • 3
  • 2
8 Comments
 
LVL 22

Expert Comment

by:Snarf0001
ID: 41720042
Hey, it is working.  Issue is on line 9644, where you have:

.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.
0
 
LVL 14

Author Comment

by:Dzynit
ID: 41720063
Is that the parent style sheet you found that? If so, I have to override it in the child stylesheet.
0
 
LVL 22

Expert Comment

by:Snarf0001
ID: 41720096
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?
0
 
LVL 14

Author Comment

by:Dzynit
ID: 41720115
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.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 21

Expert Comment

by:Kim Walker
ID: 41720187
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;
}

Open in new window

0
 
LVL 14

Author Comment

by:Dzynit
ID: 41720205
Tried:
.page.et_pb_pagebuilder_layout #main-content {
    background-color: #000!important;
}

Open in new window

Still didn't work - remember, I have to override the parent, I can't edit it.
0
 
LVL 22

Accepted Solution

by:
Snarf0001 earned 500 total points
ID: 41721008
That wouldn't have been a problem, you had specified !important, so that would still override the higher specificity of the .page selector.

And it was in the main stylesheet, if you override the background color of the sub-element in your stylesheet it should work.

Try:

#main-content .et_pb_section { background-color:transparent; }

That's more specific than the current class that's on there, it should hide the white on the child, and let whatever background you put back on #main (with !important) flow through.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41721215
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.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Read about why website design really matters in today's demanding market.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now