Optimization

Overview

Tips and tricks to optimize your theme.

CSS and JS Merging

Built-in script merging feature can be Enable or Disable from the Enfold theme options > Performance > File Compression. Here look for the heading titles “CSS file merging and compression” and “JavaScript file merging and compression“.

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');

How to hide Enfold theme options like “Demo Import” or “Theme Update” tabs.

To hide the “Import Demo” and “Theme Update” tab in the theme options please add the below code to your functions.php file.

add_action('admin_head', 'hide_theme_options_tab');

function hide_theme_options_tab() {
  echo '<style>

  /* Hide Update tab */
 	.avia_subpage_container#avia_update,
	.avia_section_header.goto_update,

  /* Hide Demo Import  tab */
 	.avia_section_header.goto_demo,
	.avia_subpage_container#avia_demo 

	{
    	display:none !important;
    }
  
  </style>';
}

The CSS class name refrence to all the theme optiosn tabs are mentioned below and it can be used to add custom CSS styles:


/* avia tab */
.avia_section_header.goto_avia,
.avia_subpage_container#avia_avia {

}

/* layout tab */
.avia_section_header.goto_layout,
.avia_subpage_container#avia_layout {

}

/* styling tab */
.avia_section_header.goto_styling,
.avia_subpage_container#avia_styling {

}

/* customizer tab */
.avia_section_header.goto_customizer,
.avia_subpage_container#avia_customizer {

}

/* menu tab */
.avia_section_header.goto_menu,
.avia_subpage_container#avia_menu {

}

/* header tab */
.avia_section_header.goto_header,
.avia_subpage_container#avia_header {

}

/* sidebars tab */
.avia_section_header.goto_sidebars,
.avia_subpage_container#avia_sidebars {

}

/* footer tab */
.avia_section_header.goto_footer,
.avia_subpage_container#avia_footer {

}

/* builder tab */
.avia_section_header.goto_builder,
.avia_subpage_container#avia_builder {

}

/* blog tab */
.avia_section_header.goto_blog,
.avia_subpage_container#avia_blog {

}

/* social tab */
.avia_section_header.goto_social,
.avia_subpage_container#avia_social {

}

/* performance tab */
.avia_section_header.goto_performance,
.avia_subpage_container#avia_performance {

}

/* cookie tab */
.avia_section_header.goto_cookie,
.avia_subpage_container#avia_cookie {

}

/* newsletter tab */
.avia_section_header.goto_newsletter,
.avia_subpage_container#avia_newsletter {

}

/* google tab */
.avia_section_header.goto_google,
.avia_subpage_container#avia_google {

}

/* demo tab */
.avia_section_header.goto_demo,
.avia_subpage_container#avia_demo {

}

/* upload tab */
.avia_section_header.goto_upload,
.avia_subpage_container#avia_upload {

}

/* update tab */
.avia_section_header.goto_update,
.avia_subpage_container#avia_update {


}