Update 1/31/2018:
I finally got it worked out… at least for now, with help from a support ticket at Avada. The Dynamic js/css settings need to be set to compile the js, and set the css to “file”. In the child theme, change your functions php file to this:
function theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'fusion-dynamic-css' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
Hoping this is a lasting solution!
Update 11/2017:
This no no longer working on some sites in Avada 5.2.3. One thing they’ve recommended in the forums is to override their styles with an ID; usually #wrapper will work.
If you’re like me and find that extra tag annoying, or not always working to your satisfaction, you can load your style sheet in the header as a link. Leave the function same as below – because now your child style simply won’t load. View your source and copy a style sheet link, editing to your site’s specs.
Insert this in your header js options in the Advanced Code Fields/tracking tab to load just before the closing header.
Why not just use their custom.css? Because it vomits style code all over every page, which has to be read by the browser before it will display. Milliseconds… but every one counts.
Update 10/2017:
This plugin I previously recommended is no longer updated. It did so many amazingly cool things – but now I’ve seen that it is causing problems with the more recent versions of WordPress.
But all is not lost! There is still a way to have your Child theme style sheet load after the Avada and fusion style sheets.
Go into your Avada child theme under Appearance, Editor. Navigate to functions.php. Be sure to have another method to access this file (ftp or cpanel) in case you make a mistake- it will take down your site.
Change the array where it says
array( 'avada-stylesheet' ) );
change it to
array( 'fusion-dynamic-css' ) );
Save file. That’s it!
Update 09/23/2023
A reply below indicated that if you want to see styles using the ‘Live’ builder, you’ll need to add the style sheet again to your function file:
“To fix the Live-Builder issue, you need to enqueue the same stylesheet again (under a different name/handle, CSS filename can stay the same) and use: array( ‘avada-stylesheet’) as a dependency.
“Example:
wp_enqueue_style( ‘childtheme-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘fusion-dynamic-css’) );
wp_enqueue_style( ‘childtheme-style-fusionbuilder’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘avada-stylesheet’) );
“And no, the stylesheets don’t get loaded twice, as Avada seems to be using separate handles on the front and back end. It works perfectly for me.”
I haven’t tried it personally but will take Filip’s word for it! Thanks Filip!
I’ve noticed in the forums, there are a lot of questions regarding the style sheet of the child theme not affecting the output. Their response is to use the theme options custom css. I don’t like to use it that much because it spits out the css on the page rather than keeping it in a file.
If you look at the source code, you can see that your child theme style.css is very high up on the page before several other style sheets. But there is a neat cure for this. Re-Order.
https://wordpress.org/plugins/re-order-css-and-js-loading-order/
It’s a little unintuitive at first. Where it says
Reset Scripts and Stylesheets
Do this first after activation – May require up to 10 seconds
Go ahead and click, ignoring the buttons above for scripts. You will be presented with a list of all your styles in the order they are loaded, and all you have to do is find the child style sheet and drag it to the bottom of the list. The hit ‘save new order’ in the blue button.
You might have to do it again after installing other plugins that have their own style sheets.
Yeah, their theme is shite. This is ridiculous. Last time I’m using it.
I find it very useful for building a decent looking site quickly. This is really my main beef with it – at least it doesn’t use Bakery Visual Composer – talk about shite!
Nice fix — thanks.
THANK YOU! been trying to figure out for hours why my child theme isnt working!
Okay, this is good info- as I’m trying to adjust a simple font size within the person element of Avada and getting no result. Have placed a ticket to support but reckon that will be fruitless.
They’ll tell you to put css in their own theme options css file.
Many thanks master!
THANK YOU THANK YOU!! I have been asking and ASKING about this in Avada and nobody seems to recognize the inline styles overriding child theme CSS as an issue! Thought I was crazy for a few minutes… have I said THANK YOU yet?!
What’s crazy is that even with this, you view your source code and it STILL doesn’t load the child style sheet sometimes… when that happens, I include a hard link to the css file in the theme options where you can add scripts and whatnot before /head.
I found, with one of clients, that Avada doesn’t always load the ‘fusion-dynamic-css’ style as you navigate from page to page. Because of this, any css dependent on it doesn’t load.
Our unfortunate) workaround was:
1. Disable CSS compiling in Avada theme Options > Performance This will load Avada’s compiled css inline on the wp_head hook. (Priority 999; See Fusion_Dynamic_CSS_Inline() class)
2. Enqueue your child css on wp_head at a higher priority so it loads last.
Hi Darrin,
Glad you found a method that works. I notice sometimes i have to refresh a page to get the style sheet to do its magic. How does one enqueue the child css higher on wp_head?
Thank you so much!!!!
I did find that I don’t need to use priority 1000 anymore, but other than that your solution was perfect!
Seems to change all the time.. glad it worked for you!
i wanna some css with style.css, so i do this post, and do many another things, and it doesn’t work. instead of that, i went to [theme editor], and to [built-in css editor]. and type some css. It works fine. I still like type in style.css, and I am not good at English, but write this. i hope it helps.
Hi there, the thing I don’t like about the custom css editor is that it spits out the style code on every page rather than keeping it tidy in a file, which is not good for page loading.
You have to edit your functions file for the child style sheet to load last.
Thank you, you are shining star! The child theme stylesheet for Avada now loads last so edits can easy be rendered via the child theme! Yeah!
thanks you saved me.
Thank you!!!!!
I don’t know, but it isn’t a fix at all… for logged out useres in frontend: yes. For me, logged in and live editing: nope.
Why? Well: With that method, the custom stylesheet is only enqueued if the fusion-dynamic-css exists. But in edit live state, there is no fusion-dynamic-css. Therefor custom styles are not loading.
Or do I miss sth.?
But a good solution for logged out frontend only!
The live edit state doesn’t show the styles and I don’t use that method of editing myself. Thanks for pointing this out, I guess it depends on personal preferences because most people viewing your site will be logged out. If you have a solution for showing styles while editing in live mode, please let me know, clients might like it.
Also keep in mind that I wrote about this a few years before live edit was even a thing! 🙂
Had the same problem.
To fix the Live-Builder issue, you need to enqueue the same stylesheet again (under a different name/handle, CSS filename can stay the same) and use: array( ‘avada-stylesheet’) as a dependency.
Example:
wp_enqueue_style( ‘childtheme-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘fusion-dynamic-css’) );
wp_enqueue_style( ‘childtheme-style-fusionbuilder’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘avada-stylesheet’) );
And no, the stylesheets don’t get loaded twice, as Avada seems to be using separate handles on the front and back end. It works perfectly for me.
@rochelle: Thank you for your insight, it’s been a great help. Please feel free to add my solution to your post if you wish.
Will do, thanks for your insight as well.
OMG, thank you so much, I have been fighting caching issues all day and this fixed my issues. You are a saint <3