WordPress.org

1. bhsfastpitch
   Member
   Posted 1 year 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 1 year 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
   Member
   Posted 1 year 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
   Member
   Posted 1 year 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 1 year 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
   The Sweeper
   Posted 1 year 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 1 year 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
   The Sweeper
   Posted 1 year 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
   Member
   Posted 1 year 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
    Member
    Posted 1 year 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 7 months 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.