Optimization

Overview

Tips and tricks to optimize your theme.

Disable Merged CSS and JS

To disable the script merging feature please add the below filter to functions.php file.

add_filter('avf_merge_assets', function() {
	return 'none';
});

Problem with CSS file merging

The CSS merging feature may not work as intended or the background images may not show properly if there is an issue with the way the CSS file is encoded or because of some CSS syntax error in the style sheet. To resolve the CSS file merging issue, please perform the below steps:

  • Clear the cached files on your server and local browser.
  • Validate your custom CSS styles for possible syntax errors.
    Note: Usually CSS warnings are not errors but a false positive so you can just ignore the warnings displayed by the validator.
  • Delete any empty text boxes or non-printable characters that usually appears at the top of your style sheet. To highlight the empty text boxes, press the shortcut keys “Ctrl + A” and select all the text in your style sheet.
  • If your CSS code contains Unicode characters it is necessary to set the encoding of the style sheet to Unicode UTF-8. To tell the browser to encode the file in the correct format, specify @charset “UTF-8”; at the top of your custom CSS.
  • Go to Enfold > Theme Options and save the options to force re-generate the minified files.
    NOTE: You need to make any simple change in the settings to enable the save button.
  • If your theme was recently updated via theme options, please be sure that the update process was completed without any error message at the end.
  • Try updating the theme via FTP, After updating the theme make any changes in the theme options and save the options to force re-generate the merged files.

Full width Quick CSS text area

Quick CSS is a great way to add your custom styles. In case you use it often and your list is growing and want more space to manage the code please add the below function to your functions.php. If your list of modifications is growing we recommend installing a child theme and using the style.css to add your styles which can be accessed from Appearance > Editor

function admin_head_mod() {
echo '
<style type="text/css">.avia_sidebar_active .avia_control {width: 100%!important;}
.avia_sidebar_active .avia_description {width: 100%!important;float: left!important;padding: 0 0 10px 0!important;}</style>';
}
add_action('admin_head', 'admin_head_mod');