Child theme CSS overrides

This topic is: resolved

Tagged: , , , ,

This topic contains 5 replies, has 3 voices, and was last updated by Simhem74 simhem74 5 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #3559
    Robinwo
    robinwo
    Member
    Post count: 3

    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

    #3578
    Raghavendra
    Raghavendra
    Moderator
    Post count: 4700

    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.

    #3588
    Robinwo
    robinwo
    Member
    Post count: 3

    Great, thanks!

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

    #3600
    Raghavendra
    Raghavendra
    Moderator
    Post count: 4700

    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

    #5104
    Simhem74
    simhem74
    Member
    Post count: 5

    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?

    #5105
    Simhem74
    simhem74
    Member
    Post count: 5

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Child theme CSS overrides’ is closed to new replies.