Solved

Background color of all content area

Posted on 2016-07-19
8
103 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 23

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 23

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
Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

 
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
 
LVL 22

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 23

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 22

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

622 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