Support » Fixing WordPress » parent stylesheet not loading into child theme

  • I created a child theme for the Tempera theme using the WP codex instructions, however, the parent stylesheet did not load. I read some similar posts on the forum but was not able to find the solution. Any suggestions? My website is currently in maintenance mode, so not sure if you can see what I am talking about. The site is:
    http://serendology.com

    /*
    Theme Name: Tempera Child
    Theme URI: http://serendology.com/tempera-child/
    Description: Tempera Child Theme
    Template: tempera
    Version: 1.0.0
    */

    @import url(“../tempera/style.css”);

    /* =Theme customization starts here
    ————————————————————– */

Viewing 15 replies - 1 through 15 (of 24 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Ideally we’d need to see the site with the issue

    Thread Starter hungrylions

    (@hungrylions)

    Andrew, I just disabled the plugin…you should be able to see it now. Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your styles seem to be working for me, have you tried clearing your browser’s cache?

    Thread Starter hungrylions

    (@hungrylions)

    Just cleared the cache on both Safari and Firefox browsers and still nothing. Are you seeing the coding from the parent stylesheet?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Thread Starter hungrylions

    (@hungrylions)

    Forgive me because I am somewhat new to this, but it looks like you are viewing the code from the Tempera or parent stylesheet. I was of the impression that this code would be pulled into the Tempera-child stylesheet so that I could edit it.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s a bit technical;
    Although you are using the @import line in your CSS to bring in the parent stylesheet, that still counts as a call to another file. So what the screenshot shows is the call to the parent stylesheet, that occurs when you load the page.

    Thread Starter hungrylions

    (@hungrylions)

    So you are seeing this code on the tempera-child stylesheet?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I am seeing this code on the tempera-child stylesheet:

    /*
    Theme Name: Tempera Child
    Theme URI: http://serendology.com/tempera-child/
    Description: Tempera Child Theme
    Template: tempera
    Version: 1.0.0
    */
    
    @import url("../tempera/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */

    Thread Starter hungrylions

    (@hungrylions)

    Do I make my changes to the parent stylesheet?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    No, you add them to your Child Theme style.css file under this line:

    /* =Theme customization starts here
    -------------------------------------------------------------- */

    Thread Starter hungrylions

    (@hungrylions)

    I copy and paste it in?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Copy what?

    Thread Starter hungrylions

    (@hungrylions)

    I guess I’m getting confused because I previously used a Genesis theme and when I made changes to the child theme stylesheet, all of the code from the parent was there. I would use Firebug to locate the item and then proceed to make the edit.

    I just assumed that would be the case when I created the Tempera child theme. So now I’m not sure how I would make changes to the Child style sheet if I cannot see the code. That’s why I was asking if I should copy it from the parent and paste it in.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can still use Firebug the same way, try it out.

    If you want to make customisations you do so through your Child Theme. As you describe the Child Theme is pretty much empty. This is because the ‘@import‘ line is already copies all of the parent stylesheet so there’s no need to duplicate them again.

    To make CSS modifications in your Child Theme stylesheet you need to write new styles that override your parent theme styles.

    For example, to make your navigation font larger you would need to override the CSS outlined in red here: http://snag.gy/YOzgB.jpg . So you’d need to write new code in your Child Theme style.css file.
    For example,

    /*
    Theme Name: Tempera Child
    Theme URI: http://serendology.com/tempera-child/
    Description: Tempera Child Theme
    Template: tempera
    Version: 1.0.0
    */
    
    @import url("../tempera/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    #access ul li a {
     font-size: 24px;
    }

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘parent stylesheet not loading into child theme’ is closed to new replies.