WordPress.org

1. ywickham
   Member
   Posted 3 months ago #

   I created a child theme that works as intended. However, I was just trying to make a change and found that the style I added to my child theme was getting overwritten by the same style in a stylesheet imported by my parent theme.

   For those who are visual:

   Parent theme -

   /*
Theme Name: xxx
Description: xxx
Author: xxx
Version: xxx
Author URI: xxx
*/
@import url( 'css/screen.css' );
@import url('css/skin.php');

   Child theme -

   /*
Theme Name: xxx
Description: xxx
Author: xxx
Version: xxx
Author URI: xxx
Template: xxx
*/
@import url("../xxx/style.css");
My styles here...

   So, my question is, if I'm importing the parent stylesheet from my child theme, shouldn't the files my parent theme imports load before my child theme declarations go into affect?

   Any help sorting out this issue would be grand.

   Thanks!

2. alchymyth
   The Sweeper
   Posted 3 months ago #

   shouldn't the files my parent theme imports load before my child theme declarations go into affect?
   

   no - depends on the theme;

   Twenty Eleven for instance loads the dark.css stylesheet after style.css of the child and parent theme.

3. Chip Bennett
   Member
   Posted 3 months ago #

   What does the document head markup look like for your Theme? What stylesheet links are being added (all of them), and where, relative to each other?

4. ywickham
   Member
   Posted 3 months ago #

   @alchymyth - Thanks. Is there a clear way for me to determine what loads first or do I just have to poke around?

   @Chip - This is my header markup:

   [code moderated - please follow the forum guidelines for posting code]

   As you can see, the imported styles are not getting called separately and I've verified the IE related CSS files are not importing them either.

   I should point out the file that is overwriting my child theme CSS is the skins.php file. Looking at it, it is calling the wp-load.php file from the WP install for whatever reason. However, even if it is processing some PHP, that's server side and should get done before the page is served, not affecting the order the files are read by the browser. Or am I mistaken there?

   Anyhow, any ideas guys?

   Thanks!

5. Chip Bennett
   Member
   Posted 3 months ago #

   Then the next probable cause is not using sufficient specificity to override the Parent Theme's style declaration.

   (p.s. any code greater than about 10 lines must be put in a pastebin, and linked, rather than put in the post directly.)

6. ywickham
   Member
   Posted 3 months ago #

   I thought I was using enough specificity. I actually inspected the code and saw the declarations used to affect the element I wanted to changed, so I used those exact same classes, but since skins.php is listed after the style.css in the inspector, it's showing my class from style.css crossed out.

   I suppose I just answered my own question.

   So, since anything set in skins.php is going to overwrite my styles and I really don't want to touch my parent theme, what is the recommendation for moving forward with modifying this style... maybe adding a new stylesheet as the very last element in my head area to see if it loads or ensure it loads last? Other recommendations?

   Thanks!

   Btw, I'm not sure what you mean by "pastebin". Are you saying I may be putting CSS in my WP post directly? Excuse my ignorance - just trying to understand. ;) Thx!

7. Chip Bennett
   Member
   Posted 3 months ago #

   I didn't see a "skins.css" in your document head markup above. Where/how is it being added?

   If it's hard-coded into header.php, then you'll have to create a new header.php in your Child Theme.

   If it's being enqueued, then you simply have to dequeue it.

8. ywickham
   Member
   Posted 3 months ago #

   It's "skin.php" that is overwriting and it is imported in the parent CSS file. (The code is in my first post.)

9. Chip Bennett
   Member
   Posted 3 months ago #

   Red flag: why is a CSS file importing a PHP file?

10. ywickham
    Member
    Posted 3 months ago #

    I can't speak as to why the coders wrote that in the parent theme, but all the PHP file is doing is setting CSS. It looks like it is pulling options from their theme panel, but as I've never coded a theme that requires a panel, I couldn't say with certainty.

11. Chip Bennett
    Member
    Posted 3 months ago #

    It looks like it is pulling options from their theme panel

    But, it is impossible for that to work, when called inside a .css file, via @import. The browser can't parse the PHP.

12. ywickham
    Member
    Posted 3 months ago #

    It's not a CSS file, it's a PHP file that is getting processed *before* the CSS file even does its import. By the time the CSS file imports the PHP file, it's already done it's processing and has the CSS output ready. I'm still just not understanding why it is getting priority over the styles I set in my child theme stylesheet after the file gets loaded.

13. Chip Bennett
    Member
    Posted 3 months ago #

    By the time the CSS file imports the PHP file, it's already done it's processing and has the CSS output ready.

    No; unfortunately, it doesn't work that way. That skin.php may be getting parsed elsewhere, but that has nothing to do with style.css importing it.

    It would be really awesome if you could tell us what Theme you're working with, so that we could look at the actual code.

14. ywickham
    Member
    Posted 3 months ago #

    Sure. The Travel Theme: http://thetraveltheme.com/

15. Chip Bennett
    Member
    Posted 3 months ago #

    Yech. I recommend a different Theme. That one is injecting spammy SEO links in the footer.

16. ywickham
    Member
    Posted 3 months ago #

    Yes, I had seen that and already removed the spam using the child theme.

    My original question, however, is no longer an issue even though I never really got to the bottom of how this particular theme handles the loading of the stylesheets, so I am just marking this resolved.

    Thank you for your help Chip.

Reply

You must log in to post.