[Hummingbird Pro] Hummingbird minification prevents theme customiser changes to take effect

Hi there,
Trying a ticket as live chat doesn't work - just disappears!
Anyway, after making changes in Theme customiser, no changes to font colour, link colour, font size or custom css is shown in front end. If I choose "See this page unminified" changes are shown.
I have cleared full site cache, page cache, tried different browsers, private browser sessions logged out. I can only see changes when viewing unminified version of each page.
Any ideas?
Regards, Fred

  • Ash
    • WordPress Hacker

    Hello Fred

    When you make some changes, this is related to css. So, would you please go to Dashboard > HummingBird > Asset Optimization > And clear asset cache from there? Also, check the file list again to see if any file is excluded.

    I would also like to know which theme you are using.

    And, would you please enable support access so that I can check if needed? Please follow this article to enable support access: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Have a nice day!

    Cheers,
    Ash

  • Fred
    • WPMU DEV Initiate

    Hi Ash,
    Thanks for the swift response. Have cleared the Asset cache now and the changes have appeared! Although this is a different system on my works network instead of home so that *might* have something to do with it. I thought I had cleared all caches (page, site, browser, etc) but must have missed that one. It was 2am when I was working on this!
    I am using a custom child theme of Envo Business with some of their premium plugins. Have enabled admin access just in case you still want to check out the site.
    Regards,
    Fred

  • Fred
    • WPMU DEV Initiate

    Hmm, have just gone to a different page and the old styling has come back. Even on the page previously showing the newer settings has reverted to the old settings. The pages still show correctly when unminified. Will try to figure out which CSS stylesheets need ignoring later, after I get home. Strangely enough, the boss frowns on sorting out personal projects at work!

  • Nithin
    • Support Wizard

    Hi Fred,

    I gave a closer look and could notice the issue as you have mentioned. This seems more due to the theme's stylesheet is loading after the inline custom CSS once the Asset Optimization is enabled, and hence the changes in the colour, and fonts.

    Could I know where the following custom CSS is added in the dashboard side:

    .site-title a, .site-title a:hover, .transparent-header #site-navigation.shrink .site-title a, .transparent-header #site-navigation.shrink .site-title a:hover, .transparent-header.openNav .site-title a, .transparent-header.openNav .site-title a:hover {
    	font-family:Roboto, Helvetica, Arial, sans-serif;
    	font-weight:700;
    	font-style:normal;
    	letter-spacing:0px;
    	color:#000;
    
    }
    p.site-description, .transparent-header #site-navigation.shrink p.site-description, .transparent-header.openNav #site-navigation p.site-description{font-family:Roboto, Helvetica, Arial, sans-serif;font-weight:400;font-style:normal;letter-spacing:0px;color:#2d2d2d;}#site-navigation, #site-navigation .dropdown-menu, #site-navigation.shrink, .transparent-header #site-navigation.shrink, .transparent-header.openNav #site-navigation {
    	background-color:#fff;
    
    }

    Just double checking whether such CSS is added manually from your side, or whether it's automatically added via the Page Builder you are using. I tried moving the related files via Hummingbirds Asset Optimization but still could notice the same issue.

    I'm also bringing this into our developer's attention to see what could further be optimized in such context too. Will keep you posted once I get further feedback asap.

    Kind Regards,
    Nithin

  • Fred
    • WPMU DEV Initiate

    Hi Nithin,
    I've just had a quick look and have the same question - where is that being loaded and/or set?!
    I'll dig around, but it's not something I have manually entered. I haven't finalised the design yet, the colour scheme currently set by me is more of a "let's make it different so I can tell if it's working".
    Will let you know what I find out.
    Regards,
    Fred

  • Nithin
    • Support Wizard

    Hi Fred,

    Sorry for the delay in getting back to you. Since you have confirmed the CSS wasn't added manually, it's getting generated, and added from the theme side. On further troubleshooting, it seems like the theme is registering the inline assets under an ID, instead of loading as a file, and hence causing this anomaly.

    Could you please upload this patch, and check whether you still notice anomalies regarding this? You'll have to upload the file under:
    /wp-content/plugins/wp-hummingbird/core/modules/class-module-minify.php

    Once applied the patch, please clear the cache, and click the "Re-check files" button in the Asset optimization page, and see whether it resolves this issue.

    Please do let us know how that goes so that we could give a closer look if needed. Have a nice day ahead.

    Kind Regards,
    Nithin

  • Fred
    • WPMU DEV Initiate

    Hi Nithin,
    I've done some digging and have worked out that the theme developer has used the Kirki Customizer Framework for the customizer settings. Not sure if this helps you with the potential fix. I have thought that if you decide it is outside of your remit for support, I can extract the customizer settings into a separate css file and load it normally via the child theme. This should, in theory, allow Hummingbird to minify correctly.
    Regards,
    Fred

  • Adam Czajczyk
    • Support Gorilla

    Hello Fred

    I hope you're well and don't mind me jumping in!

    It seems you might be right about Kirki. While I don't have any themes based on it, the framework plugin itself is freely available and I took a look at it - it looks like some sort of "additional compatibility layer" could help. However, I'll still need to consult that with our developers.

    I've already reported the case to them but please note that it might take some time for them to get that fully diagnosed and the solution might also require us working with Kirki Framework developers (if they'll be willing to) if it turns out that changes would have to be done on both ends.

    So while we'll be looking into this, it might indeed be a good thing (and faster, at least for now) to actually try that "extraction" that you suggested. It could also give us additional clues on Kirki's behavior. It would be great if you could give it a go and let us know about results.

    Best regards,
    Adam

  • Fred
    • WPMU DEV Initiate

    Hi Adam,

    Jump on in, I have no objections.

    I have made & saved changes in the customizer, viewed the source of the unminified homepage and copied out the style tag Kirki adds. I have saved it to a customised.css file in a child theme and modified the child's footer.php to include it at the bottom, after realising I had accidentally edited the parent footer.php (still getting used to VSCode). The changes stick! I just have to remember to repeat the above when making any customizer changes.

    That's not a problem or a fault of Hummingbird - you have to be careful over which plugins you support as it could end up bloating HB too much. At least we have a work-around which works and should be of help to others who use a theme which uses Kirki.

    It is currently using a hardcoded path, but I'll update it using the correct wp method soon.

    Regards,
    Fred

  • Fred
    • WPMU DEV Initiate

    Hi there,
    I have made the above a bit more "WordPress" by adding the following to my child theme's functions.php:

    function customised_styles() {
    	wp_enqueue_style( 'customised-style', get_stylesheet_directory_uri() . '/customised.css'); //CSS from Kirki Customiser plugin not available when Hummingbird minifies pages
    }
    add_action( 'wp_enqueue_scripts', 'customised_styles', 11 );

    and removing the hard-coded line in the footer. FYI, the 11 in the final line ensures the custom styles are loaded after the parent and child theme styles.
    Hope this helps anyone in the same situation until WPMUDev come up with a more elegant solution.
    Regards,
    Fred

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.