Hi Mike

Thanks for your reply, although I’m very much aware of how a browser caches static resources. One of the most common ways to clear the cache of static resources is to serve them with a version number, this is exactly what WordPress does natively when you use wp_enqueue_script and specify a version number. It appends a “?v=xyz” onto the url. For example, when I load a stylesheet with a version it becomes https://www.example.com/wp-content/themes/some-theme/styles.css?v=1.0.0 then when I update the version number it becomes https://www.example.com/wp-content/themes/some-theme/styles.css?v=1.0.1, the browser sees it as a new resource and I don’t have to specify styles-1.css or styles-2.css as that would be ludicrous and you’d end up with a new asset every time you made an update. Terrible on so many levels, especially SEO ( imagine having to download 30 different external resources after 30 different updates! ).

Likewise for font files, I’ve noticed that what Enfold does is take the name of the font ( let’s say it’s called “my-font” ) takes the assets out of the zip file and uploads them to uploads/avia_fonts/my-font/my-font.woff. So then when it requests this resource the filename is always the same and as such the browser caches it. A simple way to get around this would be to append a query parameter onto the end that can be changed when the font changes. It would make sense to keep using ?v=xyz as that’s what WordPress does natively.

As per my previous message I’ve noticed that Enfold also uses the “append” property from the array stored in the options table. Although this append property is not editable directly. At the very least if we could have this passed through a filter, developers could add their own parameters here and bust the cache ourselves, which would mean you don’t have to do hardly any work to get it working and we can still optimise our font files. A simple one-liner would suffice. Insert this after config-templatebuilder/avia-template-builder/php/font-manager.class.php line 509

$append = apply_filters('avf_font_append', $append, $font_name, $font_list);

As for the solutions you suggested, they could work but there are a few issues. Firstly, if I create a new icon set with only the new icons whenever they change:
1. it creates a messy experience for the web admins and content editors as there could potentially be many different sections of fonts. E.g. My Font 1, My Font 2, My Font 3
2. it means that the browser has to load a new external resource every time we want to add a new icon. Definitely not ideal for page speeds. More external requests = longer page loads. Sure, they’ll be small, but it’s way better to load 1 file than three small ones if we can.

If I were to simply change the name of the icon set and include all the icons, it breaks all the existing icons and we have to go through and re-assign all of them, this is really not ideal.

If we could really just get that one filter added it would be super helpful and it’s barely any work for the devs your end to implement. There’s already a filter in there for the font_display, why not extend that for the append parameter too?

Cheers

Thanks Victoria!

Yep, latest versions of WordPress and Enfold.

Awesome, thanks heaps guys, really appreciate it!

Hey guys

I’ve uploaded two versions of enfold to my site ( credentials below ). The current one is 4.5.4, just re-downloaded today. The other is 4.5.1 which is the only other copy I had that wasn’t on 4.5.4. Take a look at the functions.php file in the child theme. It’s pretty basic, just to demo this bug. If you take a look at the product page referenced below you’ll see that the content within “do_shortcode” is not working. However, if you rename “wp-content/themes/enfold” to “wp-content/themes/enfold-dis” and “wp-content/themes/enfold-4-5-1” to “wp-content/themes/enfold” you’ll see that it renders correctly.

Let me know if you need any more information.

Cheers

Hey Victoria

Maybe blocks was the wrong word, should have said “hooks”. If I run this code:

add_action('woocommerce_after_single_product_summary', 'display_custom_tabs', 13);
function display_custom_tabs() {
   echo do_shortcode("[av_toggle_container initial='0' mode='accordion' sort='' styling='' colors='' font_color='' background_color='' border_color='' hover_colors='' hover_background_color='' hover_font_color='' colors_current='' font_color_current='' background_current='' background_color_current='' background_gradient_current_color1='' background_gradient_current_color2='' background_gradient_current_direction='vertical' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='']
[av_toggle title='Toggle 1' tags=''][/av_toggle]
[av_toggle title='Toggle 2' tags=''][/av_toggle]
[/av_toggle_container]");
}

Nothing displays. The shortcode above is for the Accordion Advanced Layout Builder element.

This is using Enfold 4.5.4 and WooCommerce 3.5.6. If I roll back to Enfold 4.5.1 the above code works.

Cheers

Thanks Basilis!

Hi Victoria, thanks for the reply.

That does solve one issue, however, it looks like a lot of the styling has disappeared. E.g. in previous versions the controls were there, but now they have disappeared. Comparing the two it looks like /enfold/js/mediaelement/skin-1/mediaelementplayer.css used to be loaded which had a lot of styles in it ( such as the positioning of the controls ). Now it looks like some of these have moved to the css/shortcodes.css file, but many necessary styles are missing. I could obviously include this old stylesheet manually myself, but it should really be fixed. This basically makes the self-hosted video option unusable unless you’re a technical user.

Cheers

OK, thanks Ismael.

Hi Victoria

Whether it’s bad design or not is a) debatable and b) irrelevant and beside the point.

I don’t mean to sound cross but I have given you multiple details regarding the demo setup, I don’t know how I can be any clearer! I have also provided login details to the current website so you can use those to log in and see the issue. It’s not some tricky customisation that I’ve set up and I have given you lots of information about the menu structure and the theme setup. But to clarify, yet again:

1. Create a new enfold Demo
2. Go to the theme settings and in the header tab change the “Menu and Logo Position” to “Logo left, Menu below”.
3. Create a new menu via Appearance > Menus, make this the main menu
4. Make sure the menu structure matches this screenshot: https://prnt.sc/fxriqp
5. Go to the front-end and hover over the last menu item, you will see it move off screen

If you still argue that the long menu is bad practice, then what about if I have one mega menu item and set that to float right, instead of float left.

1. Create a new Enfold demo
2. Go to the theme settings and in the header tab change the “Menu and Logo Position” to “Logo right, Menu below”.
3. Create a new menu via Appearance > Menus, make this the main menu
4. Create one menu item, make sure the “mega menu” box is ticked
5. Create three columns below that
6. In the custom css box please add .av-main-nav li.menu-item-top-level { float: right !important; }
7. Go to the front-end, hover over the menu items and you will see the mega menu break

I understand that this could be considered “custom” work which is breaking the menu but I don’t think this is too much to ask really, do you?

There are no errors in the console, I have checked and would have posted them had there been any.

The issue looks like it’s in avia.js line 1124. The js checks if the right side of the div is greater than the width of the parent container. If it is then it sets the left position to be width of the mega menu less the left position of the menu item. This doesn’t make a lot of sense, and above it on line 1113 we see the correct calculation applied to menu items that aren’t left aligned. Please review line 1124 as it doesn’t check whether the new calculation pushes the mega menu off the screen or not.

Thank you.

Hi Victoria
That screenshot you sent is clearly not the same as the example I gave. See the screenshot below, this was done with the latest copy of enfold on the latest version of WordPress on a clean install. There are no plugins activated or anything. I simply went into the Enfold settings > Header > Logo and Menu Position and set it to “Logo left, Menu below”. Then, to simulate our websites menu structure I added lots of menu items. Our website has about 9 menu items with long titles that extends almost the full width of the site. Each one of those menu items has a dropdown menu with three columns. It’s a large eCommerce store which is why they have so many different menu items and categories.

Here is the front-end: https://prnt.sc/fxri3g
And the menu structure: http://prntscr.com/fxriqp

There seems to be an issue with the script that calculates the position of the menu relative to the site body. If I leave the header settings to “Logo Left, Menu Right” it actually does work, although it overlaps the logo. This is normally something I would fix up in the CSS myself: http://prntscr.com/fxrjhf but notice that the dropdown menu doesn’t break out of the site width. The issue seems to happen on any setting where the menu is not inline with the logo.

Cheers.

Hey Rikard

Just updated to the latest version locally but I haven’t done it on the dev site yet as I notice there’s been a few changes which has broken my child theme so I’ll have to deal with those before uploading.

In the meantime I just tried this with a blank version of Enfold, the latest version and I still get the same issue: http://prntscr.com/fwhop8

Cheers

Argh, sorry, it’s our hosting provider. They’ve got the strictest security! Details below.

• This reply was modified 6 years, 9 months ago by matt.

Hey guys, just letting you know I’ve figured out what was wrong. I found a stray filter on avf_builder_active that was setting things to be false.

Cheers