Child theme style.css not overriding parent

  • Resolved jonathandsimmons

    (@jonathandsimmons)


    13 years, 9 months ago

    So we have a custom theme we’ve built and used for a while now. Given that there are times we use multiple stylesheets we have a dummy style.css located at theme/style.css (as a wordpress theme requires a stylesheetat root of the theme to function) however our pages import and reference a stylesheet in a folder located at theme/styles/main.css.

    So that is the background info.

    Now I’m trying to create a chile theme from my above theme. File structure is:
    /theme
    /child-theme
    /child-theme/style.css

    child theme has the following
    /*
    Theme Name: Theme-child
    Description: Child theme for the theme
    Template: theme
    */

    @import url(“../theme/styles/main.css”);

    body{
    #ccc
    }

    I’m aware that in theme-child the style.css folder must be a root and must be named style.css.

    This didn’t strike me as a problem as I planned to use the @import url(“../theme/styles/main.css”); to grab my parent stylesheet.

    However this is not working. When i activate the child theme my body color is left unchanged.

    Now before you jump the gun and tell me the stylesheet for the parent theme cannot be in a folder and must be at root let me tell you I’ve tried moving it out. Which looked like this.

    /theme/
    /theme/main.css
    /theme-child/
    /theme-child/style.css

    For those of you wondering I also renamed my parent theme stylesheet back to style.css and adjusted my @import path in the child-theme style.css accordingly.

    With all that being said the child theme is funtional. I can activate it and the page loads fine. The issue still stand though that the child theme’s style.css is not overriding the parents. For instance to my understanding if I had a child theme that had a style.css with the following:

    /*
    Theme Name: Theme-child
    Description: Child theme for the theme
    Template: theme
    */

    the child theme should load with no style as I’ve not yet used @import to bring in the parent stylesheet.

    yet when I try this even still the child theme load the parent’s style.css

    I’ve confirmed in the wordpress theme editor that the child stylesheet located at them-child/style.css is there and being used as the stylesheet for the activated child-theme.

    I find this odd it’s like the child-theme see it’s style.cc file enough to be an active usable theme, but it is not loading the style overrides contain with said file.

    Can anyone please shine a light on what I might be doing wrong? I’ve tried every possible scenario I can think of and this doesn’t make any sense to me.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter jonathandsimmons

    (@jonathandsimmons)

    I was able to resolve my own problem. Here is what I found for any others that run into this issue.

    In the header I was using the following code to call my stylesheet:

    <link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/style.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″>

    To further explain the issue. <?php bloginfo(‘template_url’); ?> outputs the TEMPLATE URL see (see the function reference here https://codex.www.ads-software.com/Function_Reference/bloginfo).

    why does that matter? Well with child themes the template_url is the URL of the parent theme. That is the whole point, the parent theme holds the template and the child simply changes the style.

    By using <?php bloginfo(‘template_url’); ?> I was telling the child themes to view the parent css rather than having them look at their own.

    So to fix this I did the following
    (bear in mind I store my css with a different name is a styles folder)

    1.) First I fixed the link in my header.php by changing it to:
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>/style.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″>

    2.) Second in our dummy style.css located at theme/style.css I put this

    /*
    Theme Name: Theme
    Theme URI: https://example.com/
    Description: Example Theme Dev
    Author: Example Theme Dev
    Author URI: https://example.com
    Tags:

    */

    @import url(‘/styles/main.css’);

    3.) Finally in the child themes we did put the following
    /*
    Theme Name: Theme
    Theme URI: https://example.com/
    Description: Example Theme Dev
    Author: Example Theme Dev
    Author URI: https://example.com
    Tags:

    */

    @import url(‘theme/style.css’);

    The above did the following:
    1.) Pointed the parent theme to it’s dummy style.css
    2.) Sent the parent theme through the dummy style.css file to our real main.css in our styles folder. (i.e. theme/styles/main.css)
    3.) Told the child theme to import the dummy style.css and subsequently to import the main.css file from the parent theme. This gave my child theme the default styling from the parent.

    The above means my parent theme could find it’s css and the child theme was able to find the parent css and yet still let me override it as I was trying to previously.

    Hope this helps someone out there.

    Alwyn Botha

    (@123milliseconds)

    Please mark thread as resolved so that

    – others with similar problem can see it as resolved and will read this thread for help if they have similar problem

    – people providing help see it as resolved and will not waste time reading this post.

    Thanks for this detailed explanations, it was a great help.

    Wermfud

    (@wermfud)

    I’m glad it’s not marked resolved, pretty much all the above was done (except the main.css renaming) and I’m still having the problem on SOME CSS rules, but not all. And yes, I’ve tried !important.

    Thread Starter jonathandsimmons

    (@jonathandsimmons)

    Hmm, when I initially posted this I thought I had a css issue. If you ready through my both my post you’ll find I realized it was actually a style sheet link reference.

    I’d love to try and help you figure out your problem. Could you give me a little more detail about your circumstances?

    Wermfud

    (@wermfud)

    Ah Ha! I found I had deleted a comma in my child stylesheet! That was all.

    Same issue ??
    Tried everything above. Went as far to try the different directory structure system but to no avail-cleared caches etc etc.
    Have now everted back to the default file structure but have kept the amended header.php with stylesheet uri (stylesheet url breaks everything!) instead of template url.

    You would think it would work now…but no!
    For the life of me I cannot see what my particular issue is so if anyone else has any bright ideas I am all ears…

    Thanks in advance

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Child theme style.css not overriding parent’ is closed to new replies.