WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Can't get child theme to use parent theme style (37 posts)

  1. john kimon
    Member
    Posted 2 years ago #

    Just started on WordPress and am now on using child themes to customise a parent theme. I've followed the coding rules and used the code below, but while using the last seven lines of code does what it's supposed to do – wipe out the parent style; when I go back and add the first line of code – @import url ('../twentyten/style.css'); – to get the child theme to use the parent theme style, nothing happens, there is no import of parent theme style. Any ideas? All folders have been correctly added in the right places. I'm on a Mac and I'm using Komodo as my text editor.

    Thanks in advance.

    @import url ('../twentyten/style.css');
    /*
    Theme Name: Child of TwentyTen
    Theme URI: http//www.?.com
    Description: This is my first child theme
    Author: john kimon
    Template: twentyten
    /*

  2. peredur
    Member
    Posted 2 years ago #

    The comments must be the first thing in the file.

    Put the @import statement after your comment.

    Also, you close the comment with '*/' and not '/*'

    Cheers

    PAE

  3. john kimon
    Member
    Posted 2 years ago #

    Thanks; but, unfortunately, it didn't work. Any other ideas? Anyone else?

  4. peredur
    Member
    Posted 2 years ago #

    Try getting rid of everything but the required comments. So your style.css file should just contain:

    /*
    Theme Name:     Twenty Ten Child
    Template:       twentyten
    */
    @import('../twentyten/style.css');

    Make sure you have absolutely nothing before the opening comment (/*).

    You may have to switch temporarily to another theme and then back to this one for the changes to happen.

    Remember to clear your browser cache as well to make sure the browser is picking up the latest versions of everything.

    HTH

    PAE

  5. john kimon
    Member
    Posted 2 years ago #

    Nope. Tried all that and still the same problem: while I can get child theme to wipe out the parent theme when I put in the first bit of code, when I put in the second bit of code – @import url ('../twentyten/style.css'); – asking the child theme style to take on the parent theme style, absolutely nothing happens.

    Any help would be much appreciated.

  6. esmi
    Forum Moderator
    Posted 2 years ago #

  7. peredur
    Member
    Posted 2 years ago #

    Well, it sounds to me that the twentyten style sheet is not being found.

    Is your relative path to the twentyten style sheet correct? It should be but I'm clutching at straws here. The relative path should be relative to the active style sheet. You should have a file structure something like:

    wp-content/
        |
        +-- themes/
                |
                +-- twentyten/
                |      |
                |      +-- style.css
                |
                +-- twentytenchild/
                        |
                        +-- style.css

    The file names and directory names should correspond to what you have in their relationships and case. The name of the child theme directory isn't important.

    Without having a link to your site this is really difficult.

    Cheers

    PAE

  8. john kimon
    Member
    Posted 2 years ago #

    Okay. I've downloaded the twenty eleven child theme and will instal that; but I don't think that will solve my basic problem.

    Yes, peredur, the paths are as you describe. I've tried with twenty ten, twenty eleven and with Shaan themes; and I can't get the child theme to bring in the parent theme for customisation – even if the css style folders exist in both the parent and child theme folders.

    I can't show you a website because I'm trying all this out the local host way.

  9. peredur
    Member
    Posted 2 years ago #

    I'm not sure what you mean by saying, "Bring in the parent theme for customisation". Maybe I'm misunderstanding what you're saying because I can't see what you can see; but you don't alter the parent theme style sheet in a child theme. You simply add rules to the child's style sheet.

    And I certainly don't know what you mean by 'css style folders'. Basically there's just one folder per theme: the theme folder (although you can use sub-folders for some things, but that's a different matter). Maybe you're just referring to the fact that each theme has a style.css file in its folder.

    Cheers

    PAE

  10. esmi
    Forum Moderator
    Posted 2 years ago #

    I can't get the child theme to bring in the parent theme for customisation

    Suggested translation: the parent's stylesheet isn't being imported into the child theme. Is that it?

    Can you post a site url so that we can look at the site using the child theme?

    EDIT: Scratch that site url! I've just re-read your earlier post.

    Do you use Firefox and the Web developer Toolbar?

  11. john kimon
    Member
    Posted 2 years ago #

    Thanks for your patience.

    This is what I've done – and I've done it according to the lynda.com training video.

    1. I've created a child theme by going into wp-content – themes – created a child theme folder.
    2. Then I've opened up Komode, written the following code:

    /*
    Theme Name: Child of TwentyTen
    Theme URI: http//www.?.com
    Description: This is my first child theme
    Author: john kimon
    Template: twentyten
    */

    3. Gone back into local host, found in themes my twenty ten child theme and activated it. This had the effect of wiping out the parent theme style – which is what it's supposed to do.
    4. I then went back to Komode, added the following code:
    @import url ('../twentyten/style.css');

    saved it.
    5. I went back to my browser, reloaded the page, and instead of it importing the parent theme styles for me to customise, no styles are imported and I'm left with exactly the same looking page as when I wiped out the parent theme style, i.e. a large photo/header underneath which is something like this, all unstyled.

    Recent Posts

    Hello world!
    Recent Comments

    Mr WordPress on Hello world!
    Archives

    January 2012
    Categories

    Uncategorized
    Meta

    Site Admin

  12. john kimon
    Member
    Posted 2 years ago #

    Esmi: I've tried it in both Safari and Firefox – Safari mostly – and neither worked. Don't know what the web developer toolbar is, I'm afraid.

  13. esmi
    Forum Moderator
    Posted 2 years ago #

    It's an add-on for Firefox.
    http://chrispederick.com/work/web-developer/

  14. john kimon
    Member
    Posted 2 years ago #

    I've installed the web developer tool on Firefox. How does it help me and my problem? Thanks for all the advice so far – even if none of it's worked and I'm pretty frustrated.

  15. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #

    Can you post a pastebin of the full content of your child Theme style.css?

  16. ClaytonJames
    Member
    Posted 2 years ago #

    Removing the space between "url" and "(" in your code was enough to make it work for me. With the space, no work. Without, worked fine.

    This worked perfectly for me:

    /*
    Theme Name: Child of TwentyTen
    Theme URI: http//www.?.com
    Description: This is my first child theme
    Author: john kimon
    Template: twentyten
    */
    @import url('../twentyten/style.css');
  17. john kimon
    Member
    Posted 2 years ago #

    Okay, Chip: all that's in my child theme CSS style file, is this:

    @import url ('..shaan/style.css');

    /*
    Theme Name: Child of Shaan
    Theme URI: http://www.?.com
    Description: My first child theme
    Author: johnkimon
    Template: shaan
    */

    I've tried it with the first line after the comment code but it makes no difference. I've tried it with the shaan, twentyten and twentyeleven themes and on Firefox and in Safari. Still nothing. I will try in the morning ClaytonJames' suggestion. Really grateful for everyone's help. I'm determined to prevail.

  18. John, it's the import line. When I copied yours verbatim I got the same thing you've gotten.

    You have this (assuming the formatting wasn't munged in the paste)

    @import url ('..shaan/style.css');

    Which has a space after the url and is missing the / after the ..

    After I corrected it the child theme works for me.

    /*
    Theme Name: Child of Shaan
    Description: My first child theme
    Author: johnkimon
    Template: shaan
    */
    
    @import url('../shaan/style.css');

    You can download this from pastebin.com using the download link on top. Save the style.css.txt less the .txt extension.

    Edit: Also with all the child theme's I've seen, the @import and CSS customization comes after the comment header. Not sure if that matters but you may want to try it that way too.

    Edit Edit: Doh! That's what Clayton already said.

  19. john kimon
    Member
    Posted 2 years ago #

    Thanks Jan and Clayton: you were right. It was the import line. I changed it by removing the space between the url and the bracket and added / after .. and, hey presto! Brilliant. Thanks again for all your help. I'm a novice on wordpress and was going to chuck it all in, but you saved the day. Much appreciated.

  20. ClaytonJames
    Member
    Posted 2 years ago #

    Must have just been a weird copy-paste issue. Glad you got it going!

  21. john kimon
    Member
    Posted 2 years ago #

    Yes, I'm trying to build my custom theme now. Thanks again.

  22. myshkin1
    Member
    Posted 2 years ago #

    my child theme erased the content from the parent theme!! PLEASE HELP!

  23. peredur
    Member
    Posted 2 years ago #

    This should be in a new topic.

    Please post a link to your site so we can see the child theme style sheet (amongst other things).

    Does everything work OK when you return to your previous theme?

    Apart from the style.css file, what other files do you have in your child theme's directory?

    Cheers

    PAE

  24. @myshkin1, Please post your own topic with your own details.

  25. scotlyn3@juno.com
    Member
    Posted 1 year ago #

    Hi,

    My child theme (Blaskan)does not look like my parent theme. I think it may be because I made changes to the parent theme before making the child theme. I've tried to correct it by deleting my parent theme and reinstalling it so that I can make a child theme from the new, unaltered Blaskan parent theme. But it reinstalled the theme with my changes intact (even despite the message stating that I may lose any customization since Blaskan has been updated). How can I get my child theme to look like my parent theme; or at least how can I re-install it without it keeping my changes? Thanks anyone.

  26. peredur
    Member
    Posted 1 year ago #

    My strategy would be:

    1. Change to a default theme like twentytwelve
    2. Remove the Blaskan theme from the wp-contents/themes directory
    3. Make a local copy of your child theme
    4. Remove your child theme from the wp-content/themes directory
    5. Go to Dashboard -> Themes -> Install and search for the blaskan theme
    6. Install the theme from the search results
    7. Activate the blaskan theme just to prove all is well
    8. Upload your copy of your child theme
    9. Activate your child theme

    That should do it.

    HTH

    PAE

  27. peredur
    Member
    Posted 1 year ago #

    Sorry - posted twice in error

    PAE

  28. scotlyn3@juno.com
    Member
    Posted 1 year ago #

    Thanks so much. The only thing is, is that when I installed the Blaskan theme again, it kept my changes. I want to get an unaltered version of Blaskan 'cause I'm assuming that I should then have little difficulty making my child theme look like the parent theme.

  29. peredur
    Member
    Posted 1 year ago #

    That's why I'm saying to download a fresh copy via the "Install New" theme page.

    Cheers

    PAE

  30. ian277
    Member
    Posted 1 year ago #

    Hi all, I've had this same issue as well and I just can't get my twentytwelve child theme to look like it's default twentytwelve parent.

    Here's what I've got uploaded to my cyberduck child theme folder -

    /*
    Theme Name: Twenty Twelve Child
    Description: Child theme for the Twenty Twevle
    Author: Ian
    Template: twentytwelve
    Version: 0.1.0
    */

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

    It has the menu but nothing else (see below)-

    Menu

    Skip to content
    Home
    About
    Blog
    Epsiodes
    Gallery
    Mission
    Podcast
    No posts to display

    Ready to publish your first post? Get started here.

    Participants

    Participants
    Proudly powered by WordPress

    Any advice would help, I've done everything in the comments above already.

    Thanks

Topic Closed

This topic has been closed to new replies.

About this Topic