Support » Themes and Templates » Can't get child theme to use parent theme style

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

Viewing 15 replies - 1 through 15 (of 36 total)
  • 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

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

    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

    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.

    esmi

    (@esmi)

    Forum Moderator

    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

    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.

    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

    esmi

    (@esmi)

    Forum Moderator

    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?

    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

    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.

    esmi

    (@esmi)

    Forum Moderator

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

    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.

    Chip Bennett

    (@chipbennett)

    Theme Review Admin

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

    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');

Viewing 15 replies - 1 through 15 (of 36 total)
  • The topic ‘Can't get child theme to use parent theme style’ is closed to new replies.