WordPress.org

1. john kimon
   Member
   Posted 4 months 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 4 months 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 4 months ago #

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

4. peredur
   Member
   Posted 4 months 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 4 months 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
   Theme Diva & Forum Moderator
   Posted 4 months ago #

   Download a basic Twenty Eleven child theme

7. peredur
   Member
   Posted 4 months 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 4 months 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 4 months 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
    Theme Diva & Forum Moderator
    Posted 4 months 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 4 months 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 4 months 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
    Theme Diva & Forum Moderator
    Posted 4 months ago #

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

14. john kimon
    Member
    Posted 4 months 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
    Member
    Posted 4 months ago #

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

16. ClaytonJames
    Member
    Posted 4 months 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 4 months 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. Jan Dembowski
    Volunteer Mod. & Brute Squad
    Posted 4 months ago #

    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 4 months 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 4 months ago #

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

21. john kimon
    Member
    Posted 4 months ago #

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

Reply

You must log in to post.