WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Twelve child theme broken (24 posts)

  1. IBIT
    Member
    Posted 1 year ago #

    My first attempt to create a child theme is failing. Successfully created the folder and uploaded the file via FTP, but WP lists it as a broken theme. The reason: "Stylesheet is missing." I tried to copy the existing stylesheet created for the Twenty Twelve parent theme into the child theme's file, but that clearly isn't working.

    How can I make this work?

    Thanks.

    http://imblacknitravel.com

  2. keesiemeijer
    moderator
    Posted 1 year ago #

    Create a new stylesheet style.css with a text editor and put this at the top

    /*
    Theme Name:     Twenty Twelve Child
    Theme URI:      http://example.com/
    Description:    Child theme for the Twenty Twelve theme
    Author:         Your name here
    Author URI:     http://example.com/about/
    Template:       twentytwelve
    Version:        0.1.0
    */
    
    @import url("../twentytwelve/style.css");

    The values that are required are "Theme Name" and "Template". The @import rule brings in the parent’s stylesheet from Twenty Twelve, don't put any CSS rules above it.

    Upload this new style.css to your child theme and see if the missing stylesheet message goes away.

    http://codex.wordpress.org/Child_Themes#The_required_style.css_file

  3. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    http://vudu.me/2012child

    I have the most basic of child themes for 2012 here. It can be installed directly if you like, but it is useful to just extract and take a look at to see what is in there.

  4. keesiemeijer
    moderator
    Posted 1 year ago #

    @IBIT
    Download Rev. Voodoo's child theme.

  5. IBIT
    Member
    Posted 1 year ago #

    First, much respect and thanks to you both. Second, I actually find your answer easier to deal with than Rev. Voodoo's (I always was the counter-intuitive sort). I think I'm close to resolving this, with both your help. Anyway, below is what I uploaded to the twentytwelve-child folder I created. If someone can show/tell me the error(s), I think I can make this work. The stylesheet is derived from the CSS I first created for the template BEFORE trying to create the child theme:

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    /*
    Theme Name:Twenty Twelve Child
    Theme URI: http://wordpress.org/extend/themes/twentytwelve
    Description: IBIT customized Twenty Twelve template
    Author: Greg Gross
    Author URI: http://imblacknitravel.com/about/
    Template: twentytwelve
    Version: 0.1.0
    */
    
    @import url ("../twentytwelve/style.css");
    
    #site-title a {
        color: #009900;
    }
    
    /*
    Welcome to Custom CSS!
    
    CSS (Cascading Style Sheets) is a kind of code that tells the browser how
    to render a web page. You may delete these comments and get started with
    your customizations.
    
    By default, your stylesheet will be loaded after the theme stylesheets,
    which means that your rules can take precedence and override the theme CSS
    rules. Just write here what you want to change, you don't need to copy all
    your theme's stylesheet content.
    */
    .site {
    	background-color: #FEFAF4;
    }
    
    .site-header h1 {
    	font-family: Papyrus, Comic Sans MS, cursive;
    	font-size: 305%;
    }
    
    .site-header h1 a:hover {
    	text-decoration: underline;
    }
    
    a {
    	font-weight: bold;
    	color: #1919d2;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #000080;
    	text-decoration: underline;
    }
    
    /* Greg's Pages */
    .pageline {
    	font-family: Georgia, serif;
    	font-size: 117%;
    	font-weight: bold;
    	text-decoration: underline;
    	color: #3B4B21;
    }
    
    /* Greg's Custom CSS */
    .intro {
    	font-size: 115%;
    	font-family: Georgia, serif;
    	font-weight: bold;
    	color: #b22222;
    	line-height: 24px;
    }
    
    .cred {
    	font-size: 75%;
    	font-style: italic;
    }
    
    .fineprint {
    	font-family: serif;
    	font-size: 85%;
    	font-weight: bold;
    	color: #b22222;
    }
    
    .fineprint h1 {
    	font-size: 95%;
    	text-decoration: underline;
    }
    
    /* Greg's Digest CSS */
    .dtag {
    	font-size: 97%;
    	font-weight: bold;
    	font-family: Georgia, serif;
    	font-style: italic;
    	color: #4169E1;
    	font-weight: bold;
    	color: #00008b;
    	text-decoration: underline;
    }
    
    .dhed1 {
    	font-size: 110%;
    	font-weight: bold;
    	color: #B8860B;
    	text-decoration: underline;
    }
    
    .dhed2 {
    	font-size: 110%;
    	font-weight: bold;
    	color: #005a00;
    	text-decoration: underline;
    }
    
    /* Greg's Pages */
    .p-hed {
    	font-family: Georgia, serif;
    	font-size: 125%;
    	text-decoration: underline;
    	color: #3B4B21;
    }
  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try removing the space in the @import line between url and the parentheses. So instead of this:

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

    it should be this:

    @import url("../twentytwelve/style.css");
  7. IBIT
    Member
    Posted 1 year ago #

    @WPyogi...just did that. No joy. WP still says "Broken link...Stylesheet is missing." Clearly, I'm doing something wrong, but I don't know what. Is it that a child theme won't accept a pre-existing stylesheet? Should I delete the old version and upload a new one with the space deleted?

  8. IBIT
    Member
    Posted 1 year ago #

    Should I delete the old version and upload a new one with the space deleted?

  9. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    What are you using to make your style.css file?

    The only thing I can think of that I"ve seen happen before is that folks make style.css using notepad/notebook

    Which is not a problem by itself. But, they usually have extensions hidden on their machines, and do not check 'all files' when saving.

    So the file looks as though it is style.css when it's actually style.css.txt

    I just want to make sure something like that isn't happening for you

    Also, if you are getting the 'missing stylesheet' error, it doesn't matter what code you have in style.css right now, as the file isn't even being recognized as existing....

    A child theme will accept a preexisting stylesheet... any file named style.css works (as long as the header is in there, which you have). You should be able to freely edit it through the WP editor, through FTP, a file manager, etc.

    Also, the folder you have created your child theme in... what's it named? Does it have any spaces in the name or anything odd?

  10. IBIT
    Member
    Posted 1 year ago #

    That may be the answer, Rev. I created the file in Smultron, but didn't give it a .css extension. What kind of name should I give this file when I save it? I tried saving it just now as style.css, and when I uploaded it, FTP listed it as a stylesheet (something I should have noticed before). But WP still isn't seeing it.

    Both the folder and filename are twentytwelve-child, so I think that should be okay.

  11. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    Both the folder and filename are twentytwelve-child

    Which file?

    should have a folder named twentytwelve-child inside your themes folder

    Within twentytwelve-child should be style.css with the content you showed above

    Not sure what you mean by filename, to which file are you referring?

    Also, are the permissions appropriate on style.css? Just want to make sure it is readable by WP

  12. IBIT
    Member
    Posted 1 year ago #

    Still no joy. I uploaded the style.css file via FTP into wp-content/themes/twentytwelve-child. I had indeed made the mistake of failing originally to save it as a .css file, but have since fixed that. Still, WP says "Stylesheet is missing."

    When I look on the FTP directory of wp-content/themes/twentytwelve-child/style.css via GoDaddy, it lists the stylesheet name as twentytwelve:style.css. Could this cauise a problem?

  13. leejosepho
    Member
    Posted 1 year ago #

    Not sure I can help, but I will try.

    WP lists it as a broken theme.

    Does that mean you can see it in "Themes" at your default Twenty Twelve Dashboard but it is being reported as broken right there?

  14. IBIT
    Member
    Posted 1 year ago #

    Yes. In all, it lists three themes as being broken. For the first two, WP says "Template is missing," which I suspect means the themes in question have been taken down. It then lists my attempted child theme, twentytwelve-child, as a broken theme, saying "Stylesheet is missing." The struggle has been to find a way to make WP "see" the style.css file that was uploaded via FTP to the wp-content/themes/twentytwelve-child/css folder. So far, nothing has worked.

  15. leejosepho
    Member
    Posted 1 year ago #

    I got my own Twenty Twelve Child Theme started with nothing more than this:

    /*
    Theme Name: nny2012child
    Template:   twentytwelve
    */
    @import url("../twentytwelve/style.css");

    That file must be named style.css, and it must be placed inside its own folder:
    /www/wp-content/themes/nny2012child
    Change my "nny2012child" to your own Theme Name, of course, and in both places.

    I tried to copy the existing stylesheet created for the Twenty Twelve parent theme into the child theme's file, but that clearly isn't working.

    Here is how things work: The @import url("../twentytwelve/style.css"); in style.css calls for the original, then anything following that line begins modifying things. So, use something like the above to get started and go from there.

  16. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    wp-content/themes/twentytwelve-child/css folder

    There should be no css folder. If you have style.css in a folder, that would be the problem

    The style.css file should be in the twentytwelve-child folder

    wp-content(folder)->themes(folder)->twentytwelve-child(folder)->style.css(file)

  17. leejosepho
    Member
    Posted 1 year ago #

    me: That file must be named style.css, and it must be placed inside its own folder

    Rev. V.:There should be no css folder. If you have style.css in a folder, that would be the problem

    Yes, I had worded that poorly. style.css needs to be in the Child Theme folder.

  18. IBIT
    Member
    Posted 1 year ago #

    YOU DID IT, leejosepho! I followed your advice, made my own slight modification, and I have a working child theme now! Stripping down the header is what did it for me. There are a few things in it I need to clean up, but I couldn't care less about that.

    SINCERCEST GRATITUDE TO YOU ALL. WP IS THE BEST, and it's this community that makes it so!

  19. leejosepho
    Member
    Posted 1 year ago #

    Cool beans.

  20. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    Glad you got it, but wonder what the problem is from your original attempt? Everything looks good... unless, the only thing I could see to be picky about is:

    Theme Name:Twenty Twelve Child

    I wonder if it really is picky about the space after the colon? I may have to play around and test that theory

  21. IBIT
    Member
    Posted 1 year ago #

    I would be grateful if you did, Rev, because it drove me nuts. I need to learn what I did wrong before I try this in the future.

  22. leejosepho
    Member
    Posted 1 year ago #

    I tried to copy the existing stylesheet created for the Twenty Twelve parent theme into the child theme's file

    You can do that as long as you change the header for the style.css to what it must be for a Child Theme, and then WordPress reads your sheet first and checks it against the one in the Parent to be sure nothing gets missed on the way to the screen.

    I wonder if it really is picky about the space after the colon? I may have to play around and test that theory

    Could be, and I do know it just rejected one of mine (saying the Parent was missing) when I had TwentyTwelve where twentytwelve should have appeared as the name for its Template.

    @IBIT: I named my Child Theme nny2012child and activated it, and then cloned (download) it and made nny2012trial (and then uploaded that one) as the place I can make changes and test things without losing what I already have if something might go horribly wrong. But if you might decide to do something like that, remember that the two headers are different when copying one into the other! I made that mess for myself twice today.

  23. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    Wow boss... I got nothing!

    I just c/p your initial code above into a blank style.css file, threw that into a folder and zipped it. It installed perfectly onto my test site.

  24. Palettefoot
    Member
    Posted 9 months ago #

    @keesiemeijer: You're the Master in the house. Thank you, Brother!

Topic Closed

This topic has been closed to new replies.

About this Topic