Child theme .css files are not overriding their parent .css files

  • Hi everyone,

    In the last month I have been creating my very first website. Before this I had no coding knowledge so everyhting I learnt was new to me.

    My problem over the last week is that my child theme .css files (and php. file but that is a different matter) are not overriding their parent .css files. I have been trying to search for a solution all week but have had no success so far.

    This is the code I put into the child functions.php file

    ————————————————————————

    (1)

    <?php

function my_theme_enqueue_styles()

{

$parent_style = 'adforest-style'; // This is 'adforest-style' for the AdForest theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/css/modern.css' );

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/modern.css', array( $parent_style ), wp_get_theme() >get('1.0.0') );

}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

?>

    ————————————————————————

    (2)

    <?php

function my_theme_enqueue_styles()

{

$parent_style = 'adforest-style'; // This is 'adforest-style' for the AdForest theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/css/modern.css' );

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/modern.css', array( $parent_style ), wp_get_theme() >get('1.0.0') );

}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 1 );

?>

    ————————————————————————

    (3)

    <?php

function my_theme_enqueue_styles()

{

$parent_style = 'adforest-style'; // This is 'adforest-style' for the AdForest theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/css/modern.css' );

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/modern.css', array( $parent_style ), wp_get_theme() >get('1.0.0') );

}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', PHP_INT_MAX );

?>

    ———————————————————————————-

    (4) (Used in the modern.css child file)

    @import url("../css/modern.css");

    ——————————————————————————-

    Any help is greatly appreciated from me ??

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello parthunteraustralia,

    I think you need to replace wp_get_theme() >get('1.0.0') with wp_get_theme()->get('Version'). Please try this code and let me know is it working for you or not.

    Thread Starter parthunteraustralia

    (@parthunteraustralia)

    @abhijitrakas
    Unfortunatly it does not change.

    This is the code I have in the functions.php of the child theme currently:

    <?php
function my_theme_enqueue_styles() {

    $parent_style = 'adforest-style'; // This is 'adforest-style' for the AdForest theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/css/modern.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/modern.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

    This is my site, with the code above. (I do not know how to view which order the .css are loaded)
    https://parthunter.com.au/

    I have just check your site and Your CSS file loading properly. First it loads

    https://parthunter.com.au/wp-content/themes/adforest/css/modern.css?ver=4.9.5

    this CSS file and after that

    https://parthunter.com.au/wp-content/themes/adforest-child/modern.css?ver=1.0.0

    this file loading. It means CSS file loading properly. Now you need to check your CSS rules.

    Thread Starter parthunteraustralia

    (@parthunteraustralia)

    @abhijitrakas

    Thats great to know. Can I ask how you can view that?

    Also sorry to sound like a total beginner, but how would I find the CSS rules?

    @parthunteraustralia

    Can I ask how you can view that? <- I have just checked site page source, for that you need to go to your site, right click anywhere on page and you will get View Page Source option click on that and whole site source you will see in new browser tab. Check you styles file there.

    how would I find the CSS rules? <- The CSS which you wrote in child theme CSS file which will override main theme CSS. As you are new for this I recommend you to ask your designer to do CSS changes in child theme CSS file.

    Thread Starter parthunteraustralia

    (@parthunteraustralia)

    Thanks for the info.

    I know what I’ve changed and it’s still showing parent theme css.

    What I’ll do is I’ll make my child modern.css blank. Then only change the header colour.

    I’ll let you know how it goes within the next hour.

    Thanks

    Thread Starter parthunteraustralia

    (@parthunteraustralia)

    Hi @abhijitrakas

    I looked at the page source (view-source:https://parthunter.com.au/), and yes on line 138 it seems to re-load the parent css (modern.css). How can I continue to solve this issue?

    Thanks

    @parthunteraustralia

    you may want to start from here:
    https://codex.www.ads-software.com/Child_Themes
    https://codex.www.ads-software.com/Theme_Development#Theme_Stylesheet

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Child theme .css files are not overriding their parent .css files’ is closed to new replies.