Main.css file overrides the child theme's Style.css
I have installed and activated a child theme but the css (main.css) from the original theme overrides the child theme css (style.css) instead of the other way around. This is the code in my functions.php file. It is straight from WP Codex.
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
When I inspect the element I'm trying to change the size or color, etc., the change from 'style.css' is crossed out and the styles from 'main.css' continue to prevail. Does the above php load the stylesheets in the proper order? Any ideas? Thank you.
Comments (1)
Anonymous wrote:
I'm having the same problem -- has anyone come up with a solution to this?
kevinvess wrote:
You shouldn't need to enqueue the parent theme CSS – it should already load without that. Try this instead – it worked for me:
function child_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', null, '1.0');
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles', 1000 );
Anonymous wrote:
Thanks for the tips Kevin. I'll check on the specificity. I'm trying to change some of the colors (text and background) and I'm using the selectors from main.css.
I notice that my child styles sheet is loading BEFORE the uua theme stylesheet, which might be causing some of the issue. I'm using the same enqueue function that I've used on many other sites, but maybe that's wrong?
<link rel='stylesheet' id='child-style-css' href='http://site.a2u2.org/wp-content/themes/a2u2/style.css?ver=4.8' type='text/css' media='all' /><link rel='stylesheet' id='uuatheme_css-css' href='http://site.a2u2.org/wp-content/themes/uua-congregation/assets/css/main....' type='text/css' media='all' />
Kevin Vess wrote:
You just need to set the $priority to a higher number to ensure a later execution so your child theme is loaded after the parent theme. See how I used 1000 – that's probably higher than it needs to be, but it works.
jgold723 wrote:
Hmmm, that didn't work for me. Parent theme CSS is still overriding my child theme css.
Kevin Vess wrote:
@jgold723 Without seeing specifically how you wrote your child-theme CSS or what styles you're specifically trying to override, I'm wondering if maybe your child-theme styles do not have a higher specificity than the ones your trying to override.
Also– if you view source, you can check to make sure the with your child-theme CSS is loading after the parent main.css. If it is being listed/loaded afterward, then I suspect the issue lies with how you've written your child-theme CSS to override the parent styles.
And– make sure your clear your browsers cache or use an incognito/private window to ensure your changes have taken effect. Depending on your hosting, you may also need to clear your servers cache too.
jeffwalberg wrote:
Thanks Kevin - adding the "1000" worked perfectly for me. But I also have the parent style.css loading in the child functions.php, same as Lori. I can't find a style.css anywhere in the parent theme, so I think it's necessary to keep it this way....though the parent style.css doesn't currently contain any definitions.
Kevin wrote:
@jeffwalberg The UUA Theme keeps all its styles in /assets/css/main.css
jeffwalberg wrote:
Yeah, I know - realize now that you must have purposefully not used style.css in the parent, and that it's only being included because of the code I added. I'll get rid of the parent style.css call.
I think it would be helpful to add a little info in the child theme section of the documentation so that people enqueue style.css correctly. If they go directly to the codex they will keep running into this issue.
Margy Levine Young wrote:
Jeff, if you send me some text, I'd be happy to add it to the instructions.