Making a child theme work…

  • Resolved Norm Sash

    (@normsash)


    14 years ago

    I’m trying to configure a child theme. I’m currently using the parent theme “caribou”, although I have also tried “thematic” and “twenty-ten”. I create a directory at “/themes” called “childtheme” (e.g) and place a “style.css” in it as the only file. This file has the following configuration:

    /*
    Theme Name: Oral hCG Diet theme (child)
    Description: Child theme applying oralhcgdiet specifics
    Author: Norm Sash
    Author URI: http: //normsash.com
    Template: thematic
    Version: 0.1.0
    */

    @import “../caribou/css3.css”;
    @import “../caribou/ie.css”;
    @import “../caribou/navigation.css”;
    @import “../caribou/style.css”;
    @import “../caribou/comments.css”;

    I configured an @import on all of the css sheets because I tried just the /style.css and that didn’t work so I though maybe I have to pull in all the .css files. That doesn’t seem to work either.

    When I activate the child theme I get no errors and the admin/themes screen seems to recognize the child theme OK (sans no thumbnail of the theme.) But when I goto the site the formating is all off, and I get no sidebars, widgets, etc. Shouldn’t all of these items be picked up from the parent theme “caribou”. What am I doing wrong in my configuration?

    The site that I’m working on is https://oralhcgdiet.com and I have currently left it with the childtheme active in case someone needs to see what it looks like.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Alwyn Botha

    (@123milliseconds)

    You are on right track; nearly there

    Your child gets loaded first

    https://oralhcgdiet.com/wp-content/themes/myoralhcgdietchild/style.css

    then the imports; OVERRIDING the child

    child must be last;

    or child css must be after the imports

    Bill Erickson

    (@billerickson)

    In your CSS you have “Template: thematic”, but you’re pulling in all the caribou css files. Change the parent theme to caribou and that should solve some or all of your problems.

    Thread Starter Norm Sash

    (@normsash)

    Thanks for the response. Maybe I’m not getting this, but I don’t think it is just the css imports that are causing this. I did an experiment looking at just one item in the site – the blog title. I loaded an instance of the blog using the Caribou theme, and then an instance of the blog using a child based on the Caribou theme. Then I inspected the properties in each for the blog title.

    Caribou had the following ID hiearchy assigned:
    <div id=”header”> <div id=”logo”> <h1>

    Child of Caribou had the following ID hiearchy assigned:
    <div id=”header”> <div id=”branding”> <div id=”blog-title”>

    So somehow the IDs are not being assigned properly to the div’s when using the child theme (in which case the css would just simply not be able to apply rules.)

    In reading the instructions it sounded like all I needed to do was put in custom css rules in the child folder but that all other things (eg script, php, etc) would automatically come out of the parent folder (caribou).

    What am I doing wrong?

    Thread Starter Norm Sash

    (@normsash)

    opps… thanks billerickson. In all my experimenting I missed changing the theme back to caribou in the child header. I just did that and will look at things… so far, things look much better!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Making a child theme work…’ is closed to new replies.