Child CSS Not Overriding Parent Stylesheet/s

  • I am new to WordPress, so please bear with me if this is a rudimentary question – I’ve been scratching my head for a few hours and I am not getting something about the relationship between Child and Parent sheets. Please help!

    I started out attempting to follow a tutorial which details setting up a child style.css file to change the header background color. I got everything set-up as the tutorial instructed, but the alterations specified in the child CSS file were being ignored when the page loaded.

    Tutorial theme used: (https://www.presscoders.com/designfolio-free-download/)

    I knew that the child CSS page was in the correct spot, as I was able to select it via the WordPress Admin section of the site and load it. I’m also sure that the Import URL address at the top of the child CSS file was correct, as if I removed it, all of the CSS styling was lost when I reloaded the page. So it was correctly referencing the parent “style.css” file.

    Additionally, as part of the tutorial involves using Google Chrome Dev Tools to inspect the page elements, I was able to see that after adding alterations to the child CSS page, they were in fact showing up in the Dev Tool inspector. However, they were struckthrough, as is visible in this screenshot: https://s18.postimage.org/y2u94e0wp/copy.jpg. When I made the screenshot, I also noticed that the stylesheet being referenced to supply the #header-container attribute value was NOT the parent main “style.css” file but rather a totally different “default.css” file buried further down in the parent theme includes folder, one that specifically handles colors for the theme.

    Realizing that the attribute I was trying to change was not in the parent style.css file, I tried changing one that WAS – altered the header-container padding at the top of the page – and lo and behold the change worked!

    So how do I handle this situation? The page attributes are spread across multiple CSS files in this theme, and I’m assuming my header-container color change did not work because the color “default.css” file was not imported in the child style.css file. Does this mean that each css file needs to be imported separately in the child style.css file? Please help clear up my confusion.

Viewing 5 replies - 16 through 20 (of 20 total)

  • I, too, was following the same tutorial listed in this post. I was frustrated to discover that the CSS was being overridden even though I followed the tutorial instructions. I was able to resolve the issue for this particular setup by editing the parent theme header file head tag thusly:

    <head>
<meta charset="utf-8" />

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<?php PC_Hooks::pc_head_top(); /* Framework hook wrapper */ ?>

<meta name="viewport" content="width=device-width">

<?php wp_head(); ?>

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
</head>

    In short, I moved the <?php wp_head(); ?> ahead of the stylesheet reference. This then allowed the includes folder to be called before the stylesheet. Now I don’t have to worry about using !important any time I want to change a color with this theme.

    Thanks WPyogi for determining the order issue! And thanks Fishpaws for posting this in the first place…I was glad I was not the only one with this issue!

    Indeed, thanks to all. I just used this method with the mystile theme & it worked!!

    …it may be that the default.css file is being loaded/read after your child theme file.

    I’m experiencing that problem. The code I’m trying to use in my child theme’s style.css is:

    img {
     margin: 15px !important;
     border: solid black 1px !important
}

    How would you guys recommend fixing the problem? I’m using !important now as a temporary fix, but understand that it’s not good coding practice.

    Also, I am trying to avoid solutions that modify any files in the original theme because if I do that, all of my changes will be lost during a theme update–correct?

    Thanks for all the help in this thread!

    I’d recommend starting your own thread and including a link to your site – as it’s not possible to help with CSS without seeing your site.

    And yes, you should be using a child theme for any changes.

    Thanks for this thread! Moving <?php wp_head(); ?> ahead of the stylesheet definitely did the trick.

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘Child CSS Not Overriding Parent Stylesheet/s’ is closed to new replies.