[Resolved] Why does GP stick a heap of inline css in my header?

Home Forums Support Why does GP stick a heap of inline css in my header?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #75925
    Pete

    Is this GP’s doing?
    <style id='generate-style-inline-css' type='text/css‘>

    #75967
    Tom
    Lead Developer
    Lead Developer

    Sure is.

    The CSS in the <head> section of the site is generated by the options you choose in the Customizer.

    CSS isn’t a dynamic language, so you can’t call the values from the Customizer to a regular stylesheet (I wish).

    Options:

    a) Use PHP to create a dynamic stylesheet and include it.

    Positives: No inline style in the source
    Negatives: Performance takes a pretty decent hit – the server has to create the dynamic stylesheet on every single page load, using server resources and causing longer load times.

    b) Include the CSS in the <head>.

    Positives: The CSS is read and cached by the browser. Browser doesn’t need to load an external stylesheet. Best option performance-wise.
    Negatives: Makes the source look messy.

    I figure overall performance is more important than code appearance, so I went with option b.

    If a third option is revealed that allows me to add it to an external file and not hurt performance, I’ll absolutely make the switch 🙂

    #75970
    Pete

    Thanks Tom (there’s a lot of css in them thar hills!)

    #75971
    Tom
    Lead Developer
    Lead Developer

    I know! Luckily it actually has less performance issues than linking to a regular stylesheet – so it’s not actually a bad thing, it just looks a little messy.

    Once I find a good solution, I’ll definitely implement it 🙂

    #76057
    Christian Zumbrunnen

    An option might be to make it possible to export all the options (or certain parts) to css-Code that can be manuylly added to the (child-) themes css.
    Just a thought.

    #76089
    Tom
    Lead Developer
    Lead Developer

    Yea that would work – I would have to provide a function to remove the CSS from the <head> in that case.

    If you were adding it to your existing child theme style.css, it would be good, but if you were creating a new file for it, it would actually perform worse because the browser would have to load a resource from a URL instead of having it right in the <head>.

    #81653
    Will

    I’ve just started looking at GeneratePress in depth and I’m using the GP Premium add-ons.

    Is there a way of specifying different padding for the desktop and mobile versions. For example, desktop content looks nice with element spacing of 40px, but on a small mobile this is much too large. I know I can use media queries, but I’ve just noticed all the Customizer specifications are written inline in the head, under
    <style id=’generate-style-inline-css’ type=’text/css’>

    Will a child theme be applied after these values? Is there any provision anywhere else for different mobile and desktop values?

    #81767
    Tom
    Lead Developer
    Lead Developer

    Your child theme CSS will show up after the parent CSS, so you simply need to use media queries in your child style.css file:

    @media screen and (max-width: 768px) {
          /* mobile CSS in here */
    }
    #126194
    ashutosh

    Hi,
    I want to change these styles from code, which file should i target to achieve same.

    #126204
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The styles in the <head> are generated by GP and can’t be changed unless you’re using the Customizer options.

    Instead, you can overwrite that CSS by adding your own CSS into your child theme, or one of these options: https://generatepress.com/knowledgebase/adding-css/

    Also, for anyone who wants to remove the block of CSS from the section, this plugin does a great job of placing it into a file: https://en-ca.wordpress.org/plugins/autoptimize/

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.