Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Background color of all content area

Posted on 2016-07-19
8
Medium Priority
?
138 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 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

564 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