Archived topic
Referring to Generatepress global colors in CSS and plugins
14 replies · Started by Rik on October 18, 2021
Hi,
we are going through a redesign of our site, so we are regularly adapting all colors. Many colors are automatically set through Generatepress, but for some elements we need to set the colors manually in our Additional CSS (e.g. language switcher) or in plugins (e.g. buttonizer).
Is there any way to REFER to the Generatepress global colors in the Additional CSS, so that when we change the global colors in Elementor, the colors change automatically everywhere, including in the elements for which we have set the colors in our Additional CSS?
If possible, I’d love to hear how. If not, please can you submit this as a feature request?
Thanks,
Rik
site: https://future-fund.org
also: for colors if bits of text in the text editor that we want in a different color
Hi there,
when you add a dynamic color it will generate a CSS variable.
For example if i add a new color and name it my-color it will create this variable:
var(--my-color)
Which you can use in your CSS eg.
.element {
color: var(--my-color);
}The default values in the Global color pallet are loaded like so:
:root {
--contrast: #222222;
--contrast-2: #575760;
--contrast-3: #b2b2be;
--base: #f0f0f0;
--base-2: #f7f8f9;
--base-3: #ffffff;
--accent: #1e73be;
}So if you're using them you can reference the same way eg.
.element {
color: var(--contrast);
}fantastic thanks
Glad to be of help! And great to see them being used in this way!!
follow up question David: it seems not possible to apply these global colors in the Generatepress color settings, in the Customizer, is that correct? E.g. for "Heading 1 (H1) Color" in Colors --> Content ? If not, may i hereby submit support for that as a feature request? Thanks!
ps yes we are really glad these exist, they are saving us SO much time!
Hi Rik,
Not sure I understand your question, H1 color can be set in colors > content, can you explain a bit more?
Hi Ying,
what we would want to do is set these colors NOT to a HEX code, but to a custom global color defined in the CSS, e.g. by entering "var(--my-color)" for the color. See thread above.
Is that possible?
but to a custom global color defined in the CSS
It seems you are using elementor to create the global colors? If so, you can use the colors in CSS, but can't use them in GP's customizer color options.
GP 3.1 will have global color as well, you can define your color in customizer > colors, these global colors can be used in customizer options.
https://generatepress.com/generatepress-3-1-global-colors-dynamic-typography/
It's now at Release candidate stage, the official release will be in next week.
hi,
we still seem to be talking about different things.
What i want is: for the Global Colors in GeneratePress to be automatically the same as the global colors i can refer to in our CSS, for example using the var(--my-color) system that David explained above.
I see 2 options for this:
1. to refer to the global colors set in GP in the CSS
2. to set the global colors in the CSS (e.g. using the var(--my-color) system that David explained above) and to refer to those in GP.
Is one of these two options possible now, or with the new update 3.1?
Rik
Not sure if we're missing the point but in the Colors panel in the Customizer you should see:
hi David,
thanks, i think you are running 3.1 that is not out yet right? With me, this area looks different and i cannot something like var(--accent). the color field is limited to seven characters also (# plus 6 numbers).
I'm running GP 3.0.4
Thats correct - its 3.1 you require.
Sorry about that, i assumed from the topic title you we're running that :) We should be going live with it any time between now and next Tuesday at the very latest
great, super that this is going to become supported.
Glad to be of help!
