Tagged: , , , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 8, 2020 at 6:41 am #1210926
    asiabchk

    Hello there,

    Enfold’s built-in Files Merge and Compression functions (Enfold – Performance) is a excellent addon to boost page loading speed, especially for mostly static websites.

    Refer to the title, I believe that the Enfold’s child theme css file (which is enqueued from parent style) is better to have the highest priority (i.e. cascade in the lowest position) to allow custom modification or enhancement of the theme being reflected properly.

    For example, about the font type setting in Enfold: If your website has content other than English, the offerred font family in the drowdown may not serve your language, then you need to inject css to specify some fonts. However, Avia element: Special Heading has its only css in which its font family. If the function “merge css” in Enfold is enabled, the avia-merged-styles.css always load with the highest priority and overwrite your style in child theme style sheet.

    A quick work around is turn this function off and use other optimization plug-in to merge and compress. I just feel upset because such a great function is degraded.

    Thanks for your amazing work on Enfold.

    May 15, 2020 at 9:40 am #1213197
    Ismael

    Hey asiabchk,

    Thank you for the inquiry.

    If the function “merge css” in Enfold is enabled, the avia-merged-styles.css always load with the highest priority and overwrite your style in child theme style sheet.

    This is not possible because the compression includes the child theme’s style.css file in the merged file, so the custom style will not get overwritten. If you want to exclude a certain css or js file from the compression, you can use the following filter.

    // https://github.com/KriesiMedia/enfold-library/blob/master/actions%20and%20filters/Performance/avf_exclude_assets.php

    Best regards,
    Ismael

    May 15, 2020 at 11:54 am #1213248
    asiabchk

    Hello Ismael,

    Thank for your clarification.

    Could you take a look at my site (link in private content)? In DevTools, the following CSS files are all loaded individually:
    /wp-content/themes/enfold/style.css?ver=X.X.X
    /wp-content/themes/enfold-child/style.css?ver=X.X.X
    /wp-content/uploads/dynamic_avia/avia-merged-styles-YYYYY.css

    From my understanding, the avia-merged-styles should have included the theme’s CSS and child theme’s CSS. Would you tell where I have misconfigurated my WP or Enfold Theme?

    Thank you.

    May 18, 2020 at 8:49 am #1213941
    Ismael

    Hi,

    Thank you for the update.

    Did you install a cache plugin? It’s possible the compression script there excludes those stylesheets. If you can provide the WP and FTP login details, we’ll try to inspect it further.

    Best regards,
    Ismael

    May 18, 2020 at 8:57 am #1213942
    asiabchk

    Hi Ismael,

    Thanks for you insight. Yes, WP Rocket is deployed. I will consult their support team first. Stay tuned. Thank you.

    May 18, 2020 at 9:17 am #1213948
    asiabchk

    Hi Ismael,

    I’ve created a testing WP site which is using Enfold theme, without any caching and optimization plugin, on the same hosting server. The site has both CSS and JS merging and compression enabled in the theme’s option. However, the child theme and theme’s style.css are both loaded along with the avia-merged-styles.css

    I think it is a problem laying about how my child theme is set up. In the child theme, the following code is included in the theme’s functions.php:

    // Enqueue parent theme and universal child theme CSS
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ));
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

    Is there something wrong in the above code?

    If possible, you may login to to the WP (in private content).

    Thank you so much for help.

    May 18, 2020 at 11:36 am #1213988
    Guenni007

    For Enfold you do not need to implement the child in this way:
    https://kriesi.at/documentation/enfold/child-theme/

    As long as the child style.css has this on top:

    /*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

    everything works with this child style.css.
    because parent-theme style.css is empty too. The styles of Enfold are loaded ( conditionally ) via functions.php.

    May 18, 2020 at 4:49 pm #1214071
    asiabchk

    Thanks @Guenni007, you are correct. Problem solved.

    May 19, 2020 at 6:15 am #1214191
    Rikard

    Hi,

    Great, I’m glad that @guenni007 could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.