hummingbird css overriding theme css

On inspection, it looks like a hummingbird css file is overriding theme css changes. I changed the css expiry time to just 1 hour (from rec 8 days) in hummingbird settings to see if this helps. Not sure. Any suggestions? Just want css changes made in theme module to take precedence.

Thanks,
Derek

  • Adam Czajczyk

    Hello Derek,

    I hope you're well today and thank you for your question!

    The change unfortunately may take effect in future because even if you changed CSS expiration time from "longer" to "shorter" that original cache must first expire. Are there any additional caching plugins such as e.g. W3 Total Cache or similar enabled on your site?

    If not, please try following:
    - disable Hummingbirds browser caching and minification
    - access your server via FTP
    - go to "/wp-content/uploads/wp-hummingbird-cache" folder
    - remove all the files from inside
    - make changes to your CSS
    - enable minification and browser caching (in that order) again.

    Now since the expiration time is set to 1 hour it hopefully should be "resetting" itself each hour in case of changes.

    Let me know please if that helped!

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Derek!

    First of all: don't ever be sorry for "not being able to solve this on your own". That's what we are here for you - to help you if you're not able to deal with the issue. That's our job and we really like it (I know I can say this on behalf on everyone working here) :slight_smile:

    As for the issue. I'd like to take a look at your setup in order to test this and also try to replicate on my own sandbox if necessary. Would you mind granting me a support access? Here's a guide on how to do this:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Adam

  • Predrag Dubajic

    Hi Derek,

    Mind if I jump in here :slight_smile:

    I had a look at your site but must say that I didn't actually see the issue, could you provide us with some additional steps on how to replicate this?

    Do we need to make some CSS changes and reload the page?
    Do you use theme custom CSS field or you're applying the changes to theme files directly?

    Looking forward to your response :slight_smile:

    Best regards,
    Predrag

  • Derek

    Hi Predrag,

    Thanks for jumping in!

    You don't need to make any css changes. They are in the theme under appearance > theme settings > styles & layouts.

    The most obvious css override is on the homepage tagline "it's playtime". For example, it reverts back to uppercase when theme css has it lowercase:

    /* search bar font/main image */
    .hero-image-content h1 {
    text-transform: lowercase;
    font-family: byington;
    }

    simple example but if you inspect you'll see hummingbird override.

    I've tested on all browsers, etc. just to make sure I'm not losing my mind and it's not a simpler issue.

    Thanks for your help!
    Derek

  • Adam Czajczyk

    Hello Derek!

    I accessed your site and review it. I have switched off "minify" and "combine" options for theme's CSS and after purging Super Cacher cache it seems it took effect (at least the "it's playtime" tagline seems to be affected).

    Could you please clear your browser's cache and check the site again? Let me know please if it's now working (in case you made any further changes make sure to purge site's and browser's cache afterwards).

    Best regards,
    Adam

  • Derek

    you are the man! It worked!

    Do you know if it's the "combine" or the "minify" (or both) that was causing problem? Just so we don't have to bug you again on future projects?

    And last question, I swear. The homepage image still seems to load in batches/slow (it's big, like 11 MB), we Smushed it of course but are there any settings in hummingbird we could tweak to speed the image loading time?

    Thanks so much again. We really can't thank you enough!

    Derek

  • Adam Czajczyk

    Hey Derek!

    I'm glad I could help!

    Do you know if it's the "combine" or the "minify" (or both) that was causing problem? Just so we don't have to bug you again on future projects?

    I must admit I'm not 100% sure which one is "critical" here but I'd suggest keeping them both switched off. Both require Hummingbird to store processed code "somewhere" and this results in an internal cache. You may try to switch one of them on leaving another one off and see what happens and then check "opposite" combination. If the site breaks, then switching both options "off" and clearing cache should help. The file I'm referring to is a master CSS for the theme.

    And last question, I swear. The homepage image still seems to load in batches/slow (it's big, like 11 MB), we Smushed it of course but are there any settings in hummingbird we could tweak to speed the image loading time?

    There's no any setting specific to the "homepage". I reviewed it and I can see that there are indeed two "heavy" images, even though they were already smushed. One is around 5MB and one over 11MB in size. These are indeed "enormously huge" files in terms of webdesign :slight_smile:

    These are however big images also - dimensions of over 3000 x 2000 pixels. Are you sure you need them that big? I think cropping/resizing them would help reduce their filesizes significantly. If you did this "manually" using some photo editing software you could reduce their DPI (resolution) as well and it shouldn't affect the quality much.

    For example, that "baby hands" image down the site "weights" 5MB and is 3600 x 2400 pixels in size in 300 DPI resolution. Just for testing purpose I downloaded it and edited by resizing down to 2400 x 1600 px (keeping aspect ratio) at 150 DPI, saving as JPG with compression level set to 90 (10% less than maximum quality). The image now is roughly about 0.6M and I can't see the difference in quality.

    You may ask whether Smush couldn't do this for you. And my answer is: it could. I used a simple Irfan View image browser (on Windows) to retain full control over resizing parameters (that way I could test it) but smush can be set to resize images. Or, you can do something similar to what I did :slight_smile:

    Other than this, you may want to review your plugins and check whether you need them all or if you could replace some of them with e.g. simpler plugins or a custom code (MU plugin, custom page template or just a snipped of code in theme's functions.php file) and also implement a CDN such as e.g. CloudFlare.

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.