A Fix for the Ineffective Avada Child Theme Style Sheet

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.

<link rel='stylesheet' id='child-style-css' href='https://YOUR PATH HERE/wp-content/themes/Avada-Child-Theme/style.css' type='text/css' media='all' />

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!


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.

 

By | 2018-02-01T07:04:20+00:00 April 15th, 2017|wordpress, Avada|

6 Comments

  1. Jonathan February 7, 2018 at 10:22 pm - Reply

    Yeah, their theme is shite. This is ridiculous. Last time I’m using it.

    • rochelle February 8, 2018 at 5:27 am - Reply

      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!

  2. Sean Rasmussen March 8, 2018 at 1:11 pm - Reply

    Nice fix — thanks.

  3. Kathy April 26, 2018 at 5:06 pm - Reply

    THANK YOU! been trying to figure out for hours why my child theme isnt working!

  4. James May 10, 2018 at 1:09 am - Reply

    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.

    • rochelle May 10, 2018 at 2:38 am - Reply

      They’ll tell you to put css in their own theme options css file.

Leave A Comment