Hi!
Currently, the page builder loads the inline styles in the footer. This is causing a nasty “flicker” for my page as the content loads before the styles. Here’s an example:
Is there any way that I can have those inline styles output in the header, so that I won’t get that flicker?
Thanks!
Pete
Hi Pete
By default inline styles are loaded in the head. Please, check to see if you’re using a caching/performance plugin that might be shifting Page Builder’s style block to the footer.
Hi Andrew,
Thanks for the reply! It looks like some of the inline styles are located in the head, but some are also located in the footer.
// Lines 1199-1200 of siteorigin-panels.php add_action('wp_head', 'siteorigin_panels_print_inline_css', 12); add_action('wp_footer', 'siteorigin_panels_print_inline_css');I tried just removing that footer action, but it looks like the reason that the footer one exists is because the CSS hasn’t actually been generated until the widgets (in the body) are rendered.
I ended up just fixing my issue with the ol’ “make sure all widgets are hidden, then add css in the footer that shows them” trick; my code is below.
/** * Fix SiteOrigin Page Builder flash before footer styles load */ function so_fix_inline_style_flash_header(){ echo "<style>.panel-grid-cell {display: none;}</style>"; } function so_fix_inline_style_flash_footer(){ echo "<style>.panel-grid-cell {display: block;}</style>"; } add_action('wp_head', 'so_fix_inline_style_flash_header', 10); add_action('wp_footer', 'so_fix_inline_style_flash_footer', 10);I’m sure you guys have plenty to work on as it is–and I love what you guys have done with the plugin–but if you happen to have the chance, it sure would be sweet to have all inline styles output in the header by default :-).
Ahh indeed! I just chatted to Greg the author of Page Builder, he let me know that the wp_footer hook is only used as a fallback, ideally, things are getting rendered before and outputted into the head. It’s mainly used for things like the Layout Builder widget. Page Builder should be preprocessing the page content to make sure all the CSS is ready. Unfortunately, it seems like it isn’t in your site’s case. Do you perhaps want to export the layout from PrebuiltImport/ExportDownload and send it over using a site like https://www.wetransfer.com/?
Good day,
I’m looking for an answer in this problem but seems it is not yet resolved. Hope to up this problem as it show as my problem too.
Hi Dexter
I’ll reply in your thread. Thanks.
I’m using the Layout Builder widget in one place on a site and now the css that gets added in the footer breaks w3 validation.
The actual styles that are added do not really matter, I have that covered anyway.
Is it safe to just remove the footer style action or could that cause issues?
Hi :) It’s a quick change so give it a try and see what the result is. The footer action shouldn’t be normally used, it’s used as a fallback. Let me know how it goes.