• I hope somebody can help!

    I have installed the TwentyTwelve child theme on my dev. website to begin redeveloping it & it’s working: https://dev.dreamasreality.com

    I have made a few changes already, but for some reason, when trying to change the background via the stylesheet (to make it transparent) – the inherited style is not being overridden.

    It’s staying with the default:

    body.custom-background {
    background-color: #e6e6e6;
    }

    Even when I have written into the stylesheet:

    body.custom-background {
    background-color: transparent;
    }

    Does anybody have a clue as to why it isn’t becoming transparent?

    Note: when I ‘inspect element’ and manually edit the code there – it works, just not ‘for real’ when I update the style.css.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Tracy Levesque

    (@liljimmi)

    ?????? YIKES, Inc. Co-Owner

    Hi Marzypann.

    You have an in-line style in your page that is overriding your stylesheet.

    <style type="text/css" id="custom-background-css">
    body.custom-background { background-color: #e6e6e6; }
    </style>

    Do you know what is generating that? Is it in the header.php code in your child theme, or do you have a plugin that is adding that code?
    Either way, if you remove it, you should be fine.

    Also, Twentytwelve allows you to manage your background color in the admin under Appearance > Background. That is another way you can manage the background color.

    Do you know what is generating that?

    Yes, actually that’s injected by WP custom background support ??

    So just head over to Appearance > Background and configure it there.

    To override this in child theme, just use a bigger hammer which is a higher CSS specificity, like this for example

    html body,
    html body.custom-background {
    	background-color: red;
    }

    The format above will always win it over, and always work with or without WP injected CSS for its custom background support.

    This one below is specific for TwentyTwelve, because this theme adds its own custom class when background color is not set.

    html body,
    html body.custom-background,
    html body.custom-background-empty {
    	background-color: red;
    }
    Thread Starter Marzypann

    (@marzypann)

    Thank you SO much for the helpful suggestion, Tracy Levesque & for the solution to this problem, paulwpxp! You’re a diamond! ??

    Tracy Levesque

    (@liljimmi)

    ?????? YIKES, Inc. Co-Owner

    No problem!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Child Theme Background Not Overriding Parent Theme?’ is closed to new replies.