We have an issue with how the stylesheets are loaded on the page. Since the widget stylesheets are being loaded in the footer of the page and the custom CSS is being loaded in the header, we have the custom CSS being overridden by our widget styles.
As per this thread – https://github.com/elementor/elementor/issues/3198
this is how it works with Elementor at present and hence does not serve our needs well.
We will try to see if there is a workaround for this and issue an update tomorrow. Thanks for reporting.
Thread Starter
ndar
(@ndar)
Hi. Thank you for your reply. I just wanted to check in and see if you had identified a solution. I noticed that the plugin had an update, but I haven’t been able to install it yet (the website is going through a review process in which I am unable to make any changes). Does the update fix this issue?
Thank you!
The update does not address the above issue. At present, unless we change the loading method, we do not have a way to change this. The advantage in keeping the current way of loading stylesheets is performance and reduction of page size since Elementor helps us load only what is required for the widgets on the page to function.
If we switch to another method, I am afraid, we will need to load a lot more CSS than required which we do not prefer. I see that Elementor is loading stylesheets using ‘the_content’ filter and it is too late then to load the stylesheets in the header and hence they do load the same in the footer. Will get back to you within the next 2 days with further observations and my final decision on how to handle this situation.
We decided to keep the things as it is since that’s the standard way Elementor does things at present. If things change on their side and they do load stylesheets in the header (as they should), our plugin will automatically inherit that behavior since we conform to their recommended API for loading stylesheets on demand for a widget.
I noticed that any custom CSS you specify using the Elementor widget Advanced tab loads the styles in the header and hence gets overridden by the styles in our stylesheets that are loaded in the footer. Obviously, this is not ideal and Elementor needs to fix this issue which was raised by devs earlier in
https://github.com/elementor/elementor/issues/3198
As per standards, CSS files should not be loaded in the footer and it is considered invalid HTML. At present, using the !important property is the only way out.
We did try other solutions to resolve this without compromising on the rule we have set for ourselves – do not load anything not required for the widgets on the page. At present, with the way elementor works, looks like there is no way to achieve this without loading the stylesheets in the footer since the API kicks in only after the header has been rendered.
