Solved

Background color of all content area

Posted on 2016-07-19
8
83 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 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

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. …
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
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…

763 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