Reply To: Child theme CSS overrides

#3578
Raghavendra
Moderator

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.