WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Child theme can't override Patagonia (11 posts)

  1. bhsfastpitch
    Member
    Posted 3 years ago #

    Trying to make a child theme based on Patagonia theme.

    All I want to do is to override the RSS feed image and make it smaller.

    I have created a new folder, themes/BHSFP-theme, and created the following themes/BHSFP-them/style.css file. In the dashboard I have activated the BHSFP-theme without error. In addition, I have created hemes/BHSFP-them/images/rss_icon_40x40.png, which is referenced from the style.css below.

    /*
    Theme Name:     Bellevue High School Fastpitch
    Template:    patagonia
    Theme URI:      http: //bhsfastpitch.com/
    Author:         Steve McCarthy
    Author URI:     http: //bhsfastpitch.com/
    Version:        0.1.0
    */
    
    /* inherit parent, no statement but comments before @import */
    @import url("../patagonia/style.css");
    
    #feedrss {
    background: url(images/rss_icon_40x40.png) no-repeat;
    }

    So it is not working. Using wget, I downloaded the main page, and I expect to see the HTML code referencing the style sheet from the BHSFP-theme theme, but instead the style sheet URL is for the pategonia theme:
    <link rel="stylesheet" href="http://bhsfastpitch.com/bhs/wp-content/themes/<b>patagonia</b>/style.css" type="text/css" media="screen" />

    Any pointers appreciated.

  2. flamenco
    Member
    Posted 3 years ago #

    Hi,
    I enjoy making child themes, and it looks like it's set up fine. The only quick guess I have is the image path to the RSS icon. WordPress is really funny about paths, so you could try this:

    #feedrss {
     background: url("../BHSFP-theme/images/rss_icon_40x40.png") no-repeat;
    }

    If you activated your child theme, you should indeed see the new style.css being pulled in. If not, that's really odd. I looked at Patagonia's header.php, and I don't see anything funny about that. A mystery without being able to see under the hood.

    Good luck, Dave

  3. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Your CSS declaration doesn't have enough specificity.

    Your template (Patagonia) has the following declaration in style.css:

    #sidebar #feedrss {
    background: url(images/rss_icon.png) no-repeat;
    }

    But your child Theme has the following declaration:

    #feedrss {
     background: url("../BHSFP-theme/images/rss_icon_40x40.png") no-repeat;
    }

    Notice that the Parent Theme declaration has two ID selectors, while the Child Theme declaration has only one ID selector? In this case, the Child Theme CSS will never override the Parent Theme CSS, because the Parent Theme CSS has higher specificity.

    Try changing the Child Theme declaration to the following:

    #sidebar #feedrss {
     background: url("../BHSFP-theme/images/rss_icon_40x40.png") no-repeat;
    }

    (You may need to clear your browser cache to see the change.)

  4. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Sidenote:

    Also, you don't need to move your relative URL reference to above your Child Theme directory, since your style.css file will and must always be in your Theme's root directory.

    You should be able to change this:
    url("../BHSFP-theme/images/rss_icon_40x40.png")
    To this:
    url("images/rss_icon_40x40.png")
    With no problem.

  5. bhsfastpitch
    Member
    Posted 3 years ago #

    Chip, Dave,

    Thanks for the quick feedback, it is very much appreciated. I have tried both of your suggestions, but not having luck so far.

    I think my problem is more basic. If I just use a non-browser tool like wget to pull down the HTML (or observe what's being downloaded via Firebug), I expect to see the link for CSS to be
    <link rel="stylesheet" href="http://bhsfastpitch.com/bhs/wp-content/themes/BHSFP-theme/style.css" type="text/css" media="screen" /> but instead I see
    <link rel="stylesheet" href="http://bhsfastpitch.com/bhs/wp-content/themes/patagonia/style.css" type="text/css" media="screen" />
    Notice the /themes/patagonia vs. /themes/BHSFP-theme

    This is odd to me, because the administration page for Themes -> Manage Theme says:

    Current Theme
    
    BHSFP-theme by Anonymous
    
    The template files are located in /themes/BHSFP-theme. The stylesheet files are located in /themes/BHSFP-theme. BHSFP-theme uses templates from Patagonia. Changes made to the templates will affect both themes.

    (Since last posting I added an empty /themes/BHSFP-theme/functions.php, which seems to add /themes/BHSFP-theme to the search path, but still I see no difference.)

    Anyway, I think I have to solve the problem of the style.css file being served up from the parent theme and not the child theme, no?

    -Steve

  6. alchymyth
    Forum Moderator
    Posted 3 years ago #

    how is the <link rel="stylesheet" hr.... line programmed in header.php of your theme?

    i would assume it should be something like this line from twenty ten:

    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  7. bhsfastpitch
    Member
    Posted 3 years ago #

    Ding! Ding! We have a winner!

    Alchymyth, the parent theme had a header.php of:
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" />

    I can take it from here. Thanks a lot for the help.

  8. alchymyth
    Forum Moderator
    Posted 3 years ago #

    you are welcome;
    you were actually at it from the beginning - just never looked at the code.

    if it is all working, please mark this thread as 'resolved'.

    yes, 'template_directory' points to the parent theme, while 'stylesheet_directory' points to the child theme;

    might be useful to remember for adding images as well which are saved in the images folder of a child theme.

  9. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Note that even if you load your Child Theme stylesheet properly, you still won't be able to override the Parent Theme's declaration for the background, unless you increase your specificity.

    You might also want to consider adding header.php to your Child Theme, so that your change to the stylesheet link doesn't get overwritten when the Parent Theme is updated.

  10. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Oh, and another suggestion:

    Use:
    echo get_stylesheet_directory_uri()
    rather than
    bloginfo('stylesheet_directory')

    Likewise for template directory. Use this:
    echo get_template_directory_uri()
    rather than
    bloginfo('template_directory')

    These functions will be better forward-compatible for your Theme.

  11. Ray Doniel
    Member
    Posted 2 years ago #

    Hi, I'm using Phenomenon theme and when I activate the child theme everything goes smoothly but it loads the parent css only.
    My header.php had
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/reset.css" type="text/css" />
    when I change to echo get_template_directory_uri(), it loads only the parent theme stylesheet, when I use echo get_stylesheet_directory_uri() it uses only the theme structure styles, but nothing on the inside (menu, post style,..). Really weird.
    Any help please?

Topic Closed

This topic has been closed to new replies.

About this Topic