- This topic has 9 replies, 4 voices, and was last updated 8 years, 8 months ago by
.
-
Posts
-
Is this GP’s doing?
<style id='generate-style-inline-css' type='text/css‘>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 🙂
Thanks Tom (there’s a lot of css in them thar hills!)
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 🙂
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.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>.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?
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 */ }Hi,
I want to change these styles from code, which file should i target to achieve same.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/
- You must be logged in to reply to this topic.