Home>Support>Having issue with Page Builder Layout CSS Output

Having issue with Page Builder Layout CSS Output

Hi,

When we set this Page Builder Layout CSS Output Location setting to Auto, or Footer then everything workes fine

(but we cant keep it on footer as it makes page looking broken for few seconds at the start a css is at footer )

so we cahnged it to load on “Header” but there is big issue in header it does not loads all the CSS when we switch to header option we tested this with TwentyTwenty theme as well

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 months, 4 days ago rajeshsingh520

    Hi,
    We did futher investigation in your code we found some more detail that may be helpfull to you:

    1) plugn is not adding the inline CSS when we switch to “”header” option
    2) the hook add_action( ‘wp_head’, array( $this, ‘print_inline_css’ ), 12 ); on line 31 and 34 is called (in file renderer.php)

    Our theme does have wp_head() function present in it, and we tested it with wordpress core Twentytwenty theme as well so no issue with the theme

    and we even deactivated all the plugin leaving your plugin active so no other plugin is interfearing wiht its working

    we are running WordPress 5.6

  2. 9 months, 3 days ago Alex S Hi, I Work Here

    Hi,

    We’ve run a few tests locally and we’re having trouble replicating this while using Twenty Twenty. Do you have a public URL where we can take a look at your setup? If possible, can you please elaborate on what CSS is not being output as expected?

    Kind regards,
    Alex

  3. 9 months, 2 days ago rajeshsingh520

    The inline CSS which is suppose to be added by this hooks

    add_action( ‘wp_head’, array( $this, ‘print_inline_css’ ), 12 ); is not been added

    the pring_inline_css function is not getting called by this hook

    I tested it with only siteorigin and twentytwenty theme with all other thing deactivated

    let me know how i can send you the login details of my test site so you can test it by your self

  4. 9 months, 2 days ago Alex S Hi, I Work Here

    Hi,

    Unfortunately, we’ve been unable to replicate this while using Twenty Twenty. To confirm, does this happen while using Twenty Twenty and the only plugin active is SiteOrigin Page Builder and SiteOrigin Widgets Bundle? I ask as there are performance plugins that can move CSS elsewhere on the page. Can you please temporarily set your site to load CSS in the head so we can inspect it?

    Kind regards,
    Alex

  5. 9 months, 1 day ago rajeshsingh520

    Hi,

    Yes it is hapening with only TwentyTwenty and the 2 plugin Siteorign builder and siteorigin widget bunld and when we make it load CSS in header, there is no performance plugin as I am still developing the site on localhost

    let me know where to send you login access to the test site , can i post it here is it safe in here or every one can view this?

  6. 9 months, 21 hours ago Private Message - Alex S Hi, I Work Here

    This is a private message.

  7. 9 months, 19 hours ago rajeshsingh520

    Hi,

    Have created an admin account for the site and i have also deactivated all other plugin and set the css positon to header so you can see the issue

    I have left it with our theme but you can change to twentytwenty as well for testing

  8. 8 months, 28 days ago Alex S Hi, I Work Here

    Hi,

    We’ve finished our investigation of this issue on your website. Unfortunately, the Layout CSS Output Location setting isn’t compatible with the Block Editor. This is due when Blocks are rendered relative to and wp_head. There’s no real relative way for us to avoid this without either duplicating the efforts of performance plugins or by rendering the layout twice (once to generate the CSS, and the second to render the layout).

    We recommend using a minify plugin that will allow you to move CSS on the page to the area you would like it to be. A popular option for that is Autoptimize which will allow you to move inline CSS to the same area as the rest of your CSS by using the Aggregate CSS Files and Also Aggregate Inline CSS settings.

    In the next Page Builder update, we’re going to add a check that disables this setting automatically if the page is using the Block Editor and will be adding a notice to the setting description.

    Kind regards,
    Alex

  9. 8 months, 27 days ago rajeshsingh520

    thanks for the help

  10. 8 months, 20 days ago Alex S Hi, I Work Here

    Hi,

    Thank you for your understanding. Please feel free to open a new thread if anything else comes up and we’ll lend a hand.

    Kind regards,
    Alex

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More