0

I've a small anomaly ('problem' is not a permitted word ;-)) with setting the background colour in nested divs which is driving me potty. I manage the site at www.teachtoo.org which is Wordpress-driven. I'm trying to set (using the very handy Jetpack CSS editor) the background colour of the 'bar' with the page title, and I've only been partly successful as can be seen.

The page title appears in the following HTML:

<div class="page-title-wide">
<div class="page-title-wrap">
<h2 class="left-title entry-title">Home</h2>
</div>
</div>

I've tried the following (ungainly, I know) CSS to overwrite the theme styles and set the background colour:

    /* Set background colour of 'bar' with page title to purple } */
   .page-title-wide {
        background-color: #645274;
    }

.page-title-wrap {
    background-color: #645274;
}

The second selector's obviously changing the colour, but not the first. The first selector works in that, if I put something like " font-size: 300%;", something happens.

This is one of these 'issues' which you can stare at for ages and not see the cause, hence my posting here. Can anyone suggest why the background-color isn't being set in the .page-title-wide div?

As with any CMS site, there are scads of stylesheets loaded so it's not easy to dissect then all as it would be were there just the one sheet.

I've read the thread at Nested divs Background-color but the solution there doesn't work with my 'issue'.

3
  • 3
    Your web browser has development tools built into it that tells exactly which rule is being applied, which CSS file it comes from, even the line number in the CSS file that would easily diagnose this problem
    – Brad C
    May 15, 2015 at 14:28
  • Hmmm. codepen.io/anon/pen/YXqoBQ I added padding to the child element and a different colour so you code see both working
    – lharby
    May 15, 2015 at 14:31
  • If the parent and child have the same colour (and there is no border or suchlike) you wont be able to distinguish them.
    – lharby
    May 15, 2015 at 14:32

3 Answers 3

3

In your case there is an additional rule somewhere else which is overriding your statement.

Line 91 of your CSS file

/*  ======================================================= *                   
 *                    Page Styles                           *
 * ======================================================== */

.page-title-wide {
    /* background-color: #5370B2; */
    background-image: linear-gradient(to right, #093CB5, #5370B2 50%, #093CB5);
    color: #F9F9F9;
}
0
0

Ok, sorry, I missed something crucial: the theme was loading a background image with a blue gradient. I set background-image:none and that fixed it. Sorry :(

0

Those styles you are applying need to be declared "after" the default theme styles. The browser will use the last declared CSS style it reads.

In some cases where your styles are being written before the default stylesheet, you can use the following, but it is not recommended

background-color: #645274 !important; 

You should inspect the element and see where the current style is being applied from and declare your style after that

Not the answer you're looking for? Browse other questions tagged or ask your own question.