Hummingbird and Divi Theme

When I turn on the Assets Optimization, my child theme style is overridden by the parent theme, I moved the child theme CSS to the footer, but some styles still wrong, for example, the headings font and menu, this is the right style https://www.screencast.com/t/B3osG43R5lbw, when assets optimization activated https://www.screencast.com/t/ZWOdAOjVx4

  • Kasia Swiderska
    • Support nomad

    Hello Zac,

    Have you changed something on your site after the chat session? Because I have activated Asset Optimization with CDN but I am no longer able to replicate this issue with styles that occurred on your site.
    Can you check it now and see if you are still able to replicate?

    kind regards,
    Kasia

  • Zac
    • Site Builder, Child of Zeus

    Sorry for the long delay. Life happened. :slight_frown:.....

    Now back to banging our heads against this issue.

    "I'm comparing now screenshots from the initial post and I was seeing this all the time https://www.screencast.com/t/B3osG43R5lbw - and I also checked with Patrick, who confirmed that it looks like that and the issue is not there."

    That is awfully strange. When I was chating with the second Patrick I sent him a few screenshots of the broken site. All of those should be in the chat log. If my memory serves me right the second Patrick was aware of this issue. That is why we escalated this to you.

    Can you please read through my latest support chat on this issue then send me a copy?

    I recall that when we activate Hummingbird and just turn on Assest Optimization the site cod e brakes. The Second Patrick also tried to move the code around to optimize the issue but found that Divi (my theme) and hummingbird where conflicting. We spent hours on chat trying to fix this issue. Here is what the site would like like when hummingbird broke the code. https://www.screencast.com/t/w7uG4FJzz

    This site is live. So, if you work on it please make sure you make the front page the "Maintenance" page as the home page.

    Thanks.

  • Patrick Freitas
    • Staff

    Hi Zac

    How are you today?

    Indeed when We tested after chat looks the right style, but if this persists seems it is messing up the style when the Plugin Compress others files as well.

    Once it has passed some time the support access is already expired, wouldn't you mind please, regrant the support access and we can take a closer look for you?

    Please, let us know when support access is granted.
    Best Regards,
    Patrick Freitas

  • Patrick Freitas
    • Staff

    HI Zac

    Sorry for the delay here.

    The issue was that some of SCSS were loading on a compressed file and causing the problem, I've applied the missing rule on the Hummingbird > Assets Optimization > Tools > CSS above the fold

    Wouldn't you mind please, check if everything is working fine now?

    Let us know if you have any further question on this.
    Best Regards,
    Patrick Freitas

  • Zac
    • Site Builder, Child of Zeus

    It is still broken.

    Attached is a screen shot of the site after you have performed your work. Not the buttons on social sharing on the side are boxes and not icons. The button CSS is not working correctly either.

  • Zac
    • Site Builder, Child of Zeus

    You may. I just left it turned off so you can see the differences for your self.

    I don't feel like we are making any progress on this issue. Everything I mentioned in my conversations with both Patricks in chat support is still happening.

  • Jayman Pandya
    • Recruit

    Hi Zac,

    I have escalated this to the Second Level Support and they will have a look at this. Please allow them some time to respond as their response times are slower than the First Level Support due to nature of queries that they handle.

    Thank you for your patience.
    Jayman

  • Konstantinos Xenos
    • Rubber Duck Debugger

    Hi Zac ,

    Could you please check the website now? I think everything should be in order as I'm comparing the screenshot that you gave us with the site now with Hummingbird enabled.

    Let me tell you the steps that I took so I can explain what was going wrong.

    First of all you will find some changes in your child themes functions.php.

    The code that you were using the enqueue the parent style was :

    function elegant_enqueue_css() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
    
    add_action( 'wp_enqueue_scripts', 'elegant_enqueue_css' );

    That's not the correct way to do it as the parent style will load "after" the child themes style resulting on breaking some css rules because they will be over-written.

    The correct way is to enqueue the parent style first and then enqueue the child style "after" it so:

    add_action(
    	'wp_enqueue_scripts',
    	function() {
    		$parent_style = 'divi-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 ),
    			wp_get_theme()->get( 'Version' )
    		);
    	}
    );

    More reference at : https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet

    You will also find this snippet now in your functions.php:

    add_action(
    	'wp_head',
    	function() {
    		?>
    		<style>
    			@import url('https://fonts.googleapis.com/css?family=Cormorant+Upright:400,700'); /* Cormorant Upright */
    			@import url("https://use.typekit.net/xbu5dwl.css"); /* Auto Pro */
    			@import url("https://use.typekit.net/xbu5dwl.css"); /* Sheila */
    		</style>
    		<?php
    	},
    	10
    );

    This is meant to "remove" the @import rules from the style.css so Hummingbird can minify it.

    While those import rules were in the css files Hummingbird wasn't able to minify it and it was showing it as a message while trying to enable compression for it like so:

    Since Hummingbird was not touching the .css file on purpose as it found issues again the "ordering" of the css loading was not correct resulting on overlapping styles from the parent theme as it was loading "later" in the page breaking some of your customized rules.

    With the above changes all .css files are now minified and loading in the correct order as they should so you shouldn't be having any issues visually on the website as well.

    Tell me if I you need any further help with this !

    Regards,
    Konstantinos

    • Konstantinos Xenos
      • Rubber Duck Debugger

      Oh I'm sorry for that, it was fine during my tests but something must have triggered all the fonts to load via HTTP now breaking the SSL while minification is active since the website is actually using HTTPS.

      This is a really rare situation as it only targets the font files as it seems that I haven't seen as of yet so all my possible fixes didn't work and I've escalated this to our Hummingbird Developers so we can resolve it as fast as possible as well.

      I will get back to you as soon as possible with any news!

      Regards,
      Konstantinos

  • Konstantinos Xenos
    • Rubber Duck Debugger

    Hi Zac ,

    We've taken a look at the http issue, but Hummingbird always servers all files via https. It also seems to be happening on random occasions and not as a whole.

    For example I was testing this along with our Developer who is located on a different country than I am and sometimes I didn't had any errors but he did and vice versa. Pretty much like the server itself was "selectively" pushing the files over http on some occasions that we couldn't identify.

    Could you please check with your hosting provider informing them about this weird situation just in case there's anything on their logs that could help clear it?

    For the time being it doesn't seem related to Hummingbird at all as it actually serves the files via https and all fonts also use "https://" prefix inside the minified files.

    Regards,
    Konstantinos

  • Zac
    • Site Builder, Child of Zeus

    I talked with the host and they where able to force the SSL.

    Hummingbird seems to be working but I had to turn if off because it slowed my site down. :slight_frown:

    I will still need help getting this configured correctly.

    • Konstantinos Xenos
      • Rubber Duck Debugger

      Hey Zac ,

      Could you be more specific on what aspect the site was slowing down? Was it front-end, admin area, overall loading time? So we could check it again if possible.

      On our lasts tests everything was running properly without issues when all assets had been minified, except the http/https misbehaviour that I've mentioned.

      Regards,
      Konstantinos

  • Zac
    • Site Builder, Child of Zeus

    Sure thing.

    i had a two fold situation when I contacted support about getting hummingbird up and running on my site. The first one being that the code was breaking. I have been using the @import function for fonts on all of my child themes and we have found this to be the biggest issue. I have been having that issue with all of my builds. I will go back and fix that. Hopefully that was is on the theme side of things. Then we had the SSL issue. That should be squared away.

    My second issue and the reason I want to using humming bird is to have a great score on google seed scores. When I disabled the old optimization plugin and ran the page speed insights tool with hummingbrid I only got a score of 7. This is the issue I need help with. That is getting hummingbird to make my site faster. The other plug-in is "Autoptimize". It was achieving a score of 17. Not great I know. That is what I am needing help with.

    Let me know what you think,

    Thanks!

  • Jayman Pandya
    • Recruit

    Hi Zac,

    It is great to know that your issue is resolved and now your site is looking nice :slight_smile:. For the PageSpeed scores can I ask you to open a new ticket as this ticket is tackling the issue of CSS cascade and how to enqueue them.

    New ticket will not only enable you to go back and find the solution if you would need it in future date but it will also help other members find it and benefit from that. If we continue to do this on this ticket, the solution might get obscured as the title does not mention the PageSpeed issue.

    When you write the new ticket, I would request you to keep the Staff Support Access on.

    Thank you
    Jayman

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.