Avada › Forums › Community Forum › Styling in child theme’s “style.css” file not working
Tagged: custom css, css, child theme, style.css
-
AuthorPosts
-
I am using the Avada Child theme. I come from a hand-coded HTML/CSS background, so am used to placing all CSS code in a “style.css” file. When I try to do so (\\wp-content\themes\Avada-Child-Theme\style.css), no styles are applied. Nothing happens. When I apply the same styles through Theme Options –> Customize CSS, it works fine.
That being the case, what is the point of even having the style.css file?
I am having the exact same issue! Although my question is different :-). My question is: How can I fix this issue so the styles.css file in my Avada Child Theme is recognized and takes precedence over parent styles.css? Or how can I get an external file (not a .php program within WordPress) to make use of the Avada Custom CSS? I can’t get that to work but want it to. Thanks.
Hi Guys,
Here’s a quick test I run on a fresh install to make sure my child theme is good. Note: this is just a quick sanity test.
/* Let's turn our site into a day glo disco scene. */ body { /* Need to override all of these. */ font-family: 'Courier New', Courier, monospace !important; font-size: 1.5rem !important; color: violet !important; font-weight: normal !important; background-color: #111111 !important; } h1, h2, h3 { font-weight: 600; } h1, h1.entry-title { /* Override for testing. */ font-size: 4rem !important; color: darkgreen !important; } h2 { font-size: 3rem; color: darkorange; } h3 { font-size: 2rem; color: darkslateblue; } a { color: lightseagreen !important; } div { /* Looks like don't need to override. */ border: 2px solid lightgreen; background-color: khaki; } p { /* Looks like don't need to override. */ background-color: red; color: blue; }
If this test doesn’t work, make sure your child theme is active. Then, check that your
functions.php
has this at minimum.function theme_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'avada-stylesheet' ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
Also, always use your dev tools to inspect the element in question. You can see source CSS file referenced for every element using the inspector. It’s a beautiful thing.
Good luck!
P.s., @davelovely, you can use standard methods for including local or external CSS. But for WordPress you should always register and enqueue for good practise.
https://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way–cms-20402
Thanks @marklchaves!
Thanks @markichaves. So I do have the suggested code in my functions.php file. Interestingly using the inspect element dev tool I see that the child theme style.css file is being found. But it is not getting priority. The avada-stylesheet is taking precedents. So I used !important in my child theme style.css and guess what. It uses that. But I should not have to (and I don’t want to) use !important. That causes many unintended consequences.
Do you have any ideas how I can fix this problem?
Thanks again!
The fix by adding the above code to functions file isn’t working for me. I do have child theme active. I also tried by removing my previous scripts loading code as well and leaving only the one specified above with no results either.
Here’s what’s in my function file:
<?php function avada_child_scripts() { if ( ! is_admin() && ! in_array( $GLOBALS['pagenow'], array( 'wp-login.php', 'wp-register.php' ) ) ) { $theme_info = wp_get_theme(); wp_enqueue_style( 'avada-child-stylesheet', get_template_directory_uri() . '/style.css', array(), $theme_info->get( 'Version' ) ); } } add_action('wp_enqueue_scripts', 'avada_child_scripts'); function theme_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'avada-stylesheet' ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); add_filter('gettext', 'translate_text'); add_filter('ngettext', 'translate_text'); function translate_text($translated) { $translated = str_ireplace( 'Related Projects', 'Similar Dogs ', $translated ); $translated = str_ireplace( 'Project Details', 'Breed Traits', $translated ); return $translated; }
If anyone solves this I’ll be forever grateful. I had to delete the child style.css and just copy it all into the “custom CSS” filed in the Avada options which has drastically slowed my site. This all started being a problem with the latest avada upgrade. Has anyone filed a support ticket? Thank you!
Guess what! Avada posted the solution here:
https://theme-fusion.com/support/submit-a-ticket/It has to do with updating a few lines in the Child’s functions.php file and was an easy fix!
Hello Everyone
Just a note, this has also been fixed in our default theme that comes with the complete document package, if you simply download and install it, you should be able to use the new child theme and add your styles further there.
Thanks
-Ammar
Please post the actual fix, instead of linking to create a support ticket!
Here you go:
function theme_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', [] ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 20 );
Hi Guys,
I’ve just come across this now, are you saying any custom styling that has the following child style sheet reference will not work?
Old Child function.php action:
function theme_enqueue_styles() {
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘avada-stylesheet’ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );New Child function.php action:
function theme_enqueue_styles() {
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, [] );
}
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );Regards,
PaulI was having the same issue and updated my functions.php in my child theme with the suggested action.
function theme_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', [] ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
It is now working. Thanks for the fix!
Hello all,
I hope you are well?
I have now implemented everything as described above, tried every possibility, it still does not work. My style.css in the child theme folder is not working. What am I doing wrong, it is also a clean Avada installation. Thanks for a reply in advance.
Best regards, Alexander -
AuthorPosts
- You must be logged in to reply to this topic.