Child theme CSS overrides

[robinwo]

Hi all,

I created a child theme, with its own style.css in which I import the parent CSS (the good way: http://codex.wordpress.org/Child_Themes).

When my site is loaded, the skin CSS overrides all my child CSS styling. The only way to prevent this is tagging everything in my child CSS as !important, not the best solution.

In framework.php I see that the hook for loading skin CSS requires the child CSS to be loaded first. This way the skin will always override the child CSS.

Any idea how I can make the child CSS load AFTER loading the skin CSS – without touching the code of the AppDev theme (as that’s what child themes are for)? Trying to just cancel the hook that calls the MO_Framework enqueue_styles() functions did not work.

Thanks!

Robin

[Raghavendra]

Hey – thanks for bringing this to my attention. I understand the issue and now I am not sure we can rely on standard way of creating the child theme to help override all the styles in the parent theme (the issue also exists with the child theme that gets shipped with appdev bundle). This is because the WP assumes you have all your styles in style.css file. Making the other CSS files to load earlier than style.css can easily break the layout since they assume to be building on top of what is defined in style.css.

For example, skin.css file needs to be sure that someone does not enter some default color value in style.css file which will override its styling and responsive.css needs to take precedence over style.css when the device width changes, otherwise it will have no effect.

The best way to solve this problem is to have this defined in the child theme functions.php file –

add_action('wp_print_styles', 'add_child_custom_styles');

function add_child_custom_styles() {
    wp_register_style('style-child-custom', get_stylesheet_directory_uri(). '/child-custom.css', array('style-skin-css'), false, 'all');
    wp_enqueue_style('style-child-custom');
}

You will need to create a child-custom.css file in the child theme to make this work. If you now enter your CSS in the child-custom.css, things should work fine. The child style.css can still be used to override the some of the basic styling defined in style.css file. Hope this helps.

[robinwo]

Great, thanks!

Might be good to also fix this in a theme update, meet the the WP standards! 🙂

[Raghavendra]

Hope we can resolve this in a good way – there are many reporting this for themes with multiple stylesheets in WordPress.org forums. Looks like the one suggested above is our best bet for now unless we try to move a single style.css model (that unfortunately would require significant refactoring of the theme framework and has its own minuses). Thanks

[simhem74]

I does not work for me!?

My child functions.php looks like this: `<?php

add_action(‘wp_loaded’, ‘child_create_objects’, 11);

function child_create_objects() {

}

add_action(‘wp_print_styles’, ‘add_child_custom_styles’);

function add_child_custom_styles() {
wp_register_style(‘style-child-custom’, get_stylesheet_directory_uri(). ‘/child-custom.css’, array(‘style-skin-css’), false, ‘all’);
wp_enqueue_style(‘style-child-custom’);
}

?>`

Do I need to add @import url(“../extinct/custom/custom.css”) to the child-custom.css also?

[simhem74]

Sorry, ignore my above post (#5104). Everything suggested regarding the child theme functions.php file and the child-custom.css in this thread works for me.

[Author]

Posts