Solved

Background color of all content area

Posted on 2016-07-19
8
73 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

832 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