A Fix for the Ineffective Avada Child Theme Style Sheet

Update 11/2017:

This no longer works in Avada 5.2.3. So bummed. 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.

<link rel=’stylesheetid=’child-style-csshref=’https://www.megabite.com/wordpress/wp-content/themes/Avada-Child-Theme/style.css?ver=4.8.3′ type=’text/cssmedia=’all‘ />

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!


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.

Re-Order – Change 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 | 2017-11-22T22:42:55+00:00 April 15th, 2017|wordpress, Avada|

Leave A Comment