Twentytwelve child css changes not working

  • Resolved AndrewBWilson

    (@andrewbwilson)


    12 years, 1 month ago

    Hi everyone. Apologies first, I’m new at this so sorry if I’ve made a really dumb mistake. I’d be delighted if I have because then it’s easy to fix.

    I’m trying to use a child theme of twentytwelve to make some small tweaks.

    I’ve followed the instructions in the codex step by step, and have made a child theme. I know it’s there and working becuase when I take out the @import url line, twentytwelve layout disappears.

    But, when I then put in the code from the codex to change the site title to green (as a test) .site-title a { etc etc nothing happens.

    I spent about four hours yesterday googling for solutions to this. Most of what i found circled round making a header.php file in the child directory and then replacing “echo get_template_directory_uri()” with “?php echo get_stylesheet_directory_uri()”

    (for example here: https://stackoverflow.com/questions/4462258/wordpress-child-theme-css-not-reflecting-on-site )

    So I made a header.php in two ways, by cutting and pasting the header code from a support thread, and by copying the header file from twentytwelve into the child theme

    I know the header.php is working because I can change the order of the code in the file and successfully change the layout to put the navigation menu below the header image (which is one of the tweaks I want to make).

    So I then search for get_template_directory_uri() in the header.php file, replace it with get_stylesheet_directory_uri() and…

    css changes still don’t work.

    What I also noticed was that the code surrounding get_template_directory_uri() looks different in each of the headers or forum threads I’ve looked at.

    The only real advance on that that I’ve found is in this thread,
    https://www.ads-software.com/support/topic/cant-get-twentytwelve-child-theme-to-work?replies=27

    which at the bottom says:

    “the right way is to work with the functions.php file:

    wp_ dequeue_ style( ‘twentytwelve-style’ );
    wp_ deregister_ style( ‘twentytwelve-style’ );
    wp_ register_ style( ‘twentytwelve_style’, get_template_directory_uri() . ‘/style.css’ );
    wp_ enqueue_ style( ‘twentytwelve_style’ );

    must be put where it should. codex :)”

    If I put a functions.php file in my child theme, but what do I cut and paste into it?

    Only other thing to add is that I’m trying to make the same tweaks on two twentytwelve installations on two different servers from two different hosting companies.

    Many thanks in advance
    Andrew

Viewing 10 replies - 1 through 10 (of 10 total)

  • A child theme should work for CSS changes without any changes to the header or functions files. And as you say, the child theme is working if you can make changes to the header.php file in the child and they show up. So then it’s more likely a CSS error or other kind of problem. Can you post a link to your site so someone can see what’s going on.

    Also make sure that you’ve cleared any and all caches on your site, server and browser.

    Thread Starter AndrewBWilson

    (@andrewbwilson)

    Hi there, many thanks for your reply. The site I’m doing most of the learning on is https://www.foldup.org

    Looks like the CSS in the child theme is just getting overridden by this CSS in the parent:

    .site-header h1 a, .site-header h2 a {
    color: #515151;
    display: inline-block;
    text-decoration: none;
}

    So your child seems to be fine.

    Are you using Firebug (or similar other browser tool) to work with CSS? If not, highly recommended :).

    FWIW, this looks like a problem in the Codex child theme example – I’m going to double check on it on a test site… and if need be, fix that so the example change actually works.

    Thread Starter AndrewBWilson

    (@andrewbwilson)

    many thanks again. I’ve had a look at whatever I can see using chrome developer tools. Is Firebug better?

    The problem either way is I don’t really know what I’m looking at so I can’t understand and fix it myself.

    Steps I’ve done thus far. Start from wordpress default theme, follow step-by-step guide in the codex on child themes to the letter (I hope), something has gone wrong but what?

    cleared any and all caches on your site, server and browser.

    I’ve cleared the browser cache, but not site and server which I need to google how to do. The fact that it’s the same issue on two different site hosted by different companies makes me think that isn’t the problem though?

    No, it’s working fine. The reason that example change in the CSS isn’t working is that some other more specific CSS is overriding it. Try changing the CSS in your child theme to this:

    h1.site-title a {
    color: #009900;
}

    This wasn’t your fault – the Codex example doesn’t work ?? . Boo! Sorry you spent so much time on it.

    Thread Starter AndrewBWilson

    (@andrewbwilson)

    Fingers crossed for me it is in the codex child theme example. I did try putting a different code snippet into the style.css after the import just to check that, but it didn’t work either.

    And yes, personally, I like Firebug better – but I know other people who like Chrome. Try both and see which works best for you.

    Thread Starter AndrewBWilson

    (@andrewbwilson)

    WPyogi thank you so much, sorted!

    It’s not been time wasted at all though, it made me dig around and try and understand, and as a non-developer I’ve now got a better grasp than I did 24 hrs ago.

    Well, I was hoping you’d see it that way :). Not everyone does. But I see from your site that you’re probably of that tech/geek mindset – so good, glad you’re now off and running. (Nice project you have going too.)

    If it’s of help, there’s lots of good CSS info on various sites, including this one:

    https://www.w3schools.com/css/

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Twentytwelve child css changes not working’ is closed to new replies.