- This topic has 3 replies, 2 voices, and was last updated 8 years, 4 months ago by
.
-
Posts
-
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
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 🙂
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
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.
- You must be logged in to reply to this topic.