WordPress.org

Ready to get started?Download WordPress

Forums

parent stylesheet not loading into child theme (25 posts)

  1. hungrylions
    Member
    Posted 1 year ago #

    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
    -------------------------------------------------------------- */

  2. Andrew
    Forum moderator
    Posted 1 year ago #

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

  3. hungrylions
    Member
    Posted 1 year ago #

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

  4. Andrew
    Forum moderator
    Posted 1 year ago #

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

  5. hungrylions
    Member
    Posted 1 year ago #

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

  6. Andrew
    Forum moderator
    Posted 1 year ago #

  7. hungrylions
    Member
    Posted 1 year ago #

    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.

  8. Andrew
    Forum moderator
    Posted 1 year ago #

    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.

  9. hungrylions
    Member
    Posted 1 year ago #

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

  10. Andrew
    Forum moderator
    Posted 1 year ago #

    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
    -------------------------------------------------------------- */
  11. hungrylions
    Member
    Posted 1 year ago #

    Do I make my changes to the parent stylesheet?

  12. Andrew
    Forum moderator
    Posted 1 year ago #

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

    /* =Theme customization starts here
    -------------------------------------------------------------- */
  13. hungrylions
    Member
    Posted 1 year ago #

    I copy and paste it in?

  14. Andrew
    Forum moderator
    Posted 1 year ago #

    Copy what?

  15. hungrylions
    Member
    Posted 1 year ago #

    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.

  16. Andrew
    Forum moderator
    Posted 1 year ago #

    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;
    }
  17. hungrylions
    Member
    Posted 1 year ago #

    I just tried it and...nothing. I know I have the right item because I tested it in Firebug first and it worked there.

    Here is the code I added:

    @import url("../tempera/style.css");

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

    #frontpage blockquote {
    font-size: 2em;
    }

    The original font size is 1.5em so I stuck with that unit.

    Thanks for your patience btw.

  18. Andrew
    Forum moderator
    Posted 1 year ago #

    This stylesheet:
    http://serendology.com/wp-content/themes/tempera/styles/style-frontpage.css?ver=3.8

    Is loading after your Child Theme stylesheet. And so it is overriding your Child Theme styles. You can just use more specific selectors, e.g:

    body #frontpage blockquote {
     font-size: 2em;
    }
  19. hungrylions
    Member
    Posted 1 year ago #

    I tried this and it worked, so thank you very much!

    Should I be concerned about the frontpage stylesheet?

  20. Andrew
    Forum moderator
    Posted 1 year ago #

    What are you thinking may be of concern?

  21. hungrylions
    Member
    Posted 1 year ago #

    I just thought the child theme stylesheet was supposed to load last, so not sure why the frontage is loading last.

  22. Andrew
    Forum moderator
    Posted 1 year ago #

    It sounds like a deliberate decision made by the theme author, hopefully the author can clear this up.

  23. hungrylions
    Member
    Posted 1 year ago #

    Okay. Thank you so much for all of your help!

  24. Andrew
    Forum moderator
    Posted 1 year ago #

    You may need to create a new thread in the theme's subforum for the author to see this: http://wordpress.org/support/theme/tempera#postform

    You can link back to this thread for reference.

  25. hungrylions
    Member
    Posted 1 year ago #

    Will do!

Topic Closed

This topic has been closed to new replies.

About this Topic