Archived topic
Do Customizer settings (besides colors) generate CSS variables?
6 replies · Started by Sam on August 3, 2022
Use case:
Let's say I set an option in the Customizer, like Typography > All Headings, and I set a font family and font-size. Now I want all the headings of a 3rd party forms plugin to inherit those settings.
Have my Customizer settings generated variables in GP that I can reference elsewhere in my own additional CSS to accomplish this?
I'd love to be able to declare something like:
.forms-plugin-headings-selector {
font-family: var(--gp--all-headings--font-family);
font-size: var(--gp--all-headings--font-size);
}
Currently, I add some base :root declarations like --default-border-radius and --default-body-font-size into Additional CSS, but so many downstream changes could be streamlined if I could make them automatically inherit settings from what I've done in the Customizer.
If this is not currently a thing, how do we request it as a feature? :D
Hi Sam,
Unfortunately, GP doesn't generate variables for typography.
The only variable available is the colors module at this moment.
Putting myself in queue on this one.
Pulling my hair out today to try to accomplish something and THIS would TOTALLY SOLVE EVERYTHING!
+1 for making the customizer settings into CSS Variables 🙌
CSS Variable from customizer settings would be a great addition to GP. Lots of use cases that devs/designers could use css variables for other than color. Typography classes would be great!
For anyone who finds this thread in the future -- Feature request has been submitted. Support this idea here: https://github.com/tomusborne/generatepress/issues/509
This would be a massive quality-of-life improvement for more intermediate/advanced users I think - I'd love to see it in GP/GB