Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

Change values of inline css in head

Home Forums Support Change values of inline css in head

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #165892
    Andreas

    Hello, I just installed GeneratePress. It’s a very nice theme 🙂

    But there’s one thing, I don’t understand:
    There’s a lot of css-inline-code in the head. I read some forum-topics and understood, that it’s necessary 🙁
    The problem is, that this code doesn’t change, when I modify the style.css.
    In my special case I wanted to change the height of the navigation bar (.main-navigation .main-nav ul li a). But anything I change in the style.css, has no effect to the html-page. There is always the same old value in the inline css in the head (line-height: 60px instead of my modified value). Why?

    Thank you in advance 🙂

    Andreas

    #165934
    Tom
    Lead Developer
    Lead Developer

    Hi Andreas,

    The CSS in the <head> is controlled by the Customizer settings.

    There’s no way to have the options write CSS that ends up in a separate file without being hacky.

    With that being said, Google Page Speed tests actually recommend adding your CSS inline in the <head> – it gives better page scores.

    Changing the height of your menu items can be achieved using the Spacing add-on – changing the values in that add-on will adjust the CSS in the <head>.

    If you’re not interested in the add-ons, you can use my Simple CSS plugin to add your CSS, which shows up below the other CSS, meaning it will overwrite anything above it: https://wordpress.org/plugins/simple-css/

    Let me know if you need more info 🙂

    #166020
    Andreas

    Hello Tom,
    thank you very much for your answer 🙂

    I will test it with the simple-css, but I don’t know if this is so much better or faster, because I have the inline css AND the style.css-file, which has to load both!
    And I would like to know, where do the values in the inline css come from??? I tried to change the padding for .inside-header (40px) in the style.css – no effect! But in the customizer-menu in wp-backend there is NO possibility to change any padding-values. So where do these fixed values come from?
    I don’t understand, why there is a style.css with some values, I can’t change because of the customizer-menu. But in the customer-menu is no possibility to change any values. So what’s the meaning of this?

    Thank you once more 🙂

    Andreas

    #166064
    Tom
    Lead Developer
    Lead Developer

    The inline CSS and the style.css don’t load the same values – there’s a small percentage of CSS you can find in both, but it’s slowly being removed from the style.css file.

    The inline CSS come from PHP code which grabs the CSS values from the database/defaults – this is beneficial because it allows child themes to be created which can edited using the Customizer.

    If you try and change the .inside-header padding in the Simple CSS plugin, it will work because it’s loaded below the other CSS. The style.css file is loaded above the inline CSS, so the inline CSS is taken as more important (which it is).

    The values that are changeable in the Customizer require some of the add-ons – for example the Spacing add-on.

    When it comes down to it, this is the most efficient, customizable way to print the CSS. It makes the theme much more powerful and allows for easy child theme creation.

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