Archived topic
Linking global colors css class to custom element
5 replies · Started by eduard sans on November 1, 2021
Hi there, I love this new global color feature but I have a question.
Is it possible somehow to assign a global color to an element that is not in the "customizer" tab?
For instance: I have a customized table of content so let's say I want the background of said div to have the "contrast" global color class.
Is there any code tweak around this?
I know I can change manually the color on CSS but my idea is to implement it in a way that for the next client I would only change the global color and it would automatically change it in this table of content as well.
Any idea? Thanks!
Hi there,
For sure, Global Colors are stored as CSS Variables in the :root of the document.
Below is an example of the default CSS and 1 x new color i named example with a hex color of #123456 that is generated.
:root {
--contrast: #222222;
--contrast-2: #575760;
--contrast-3: #b2b2be;
--base: #f0f0f0;
--base-2: #f7f8f9;
--base-3: #ffffff;
--accent: #1e73be;
--exmaple: #123456;
}In your custom CSS you can apply those colors to the specific element like so:
.element {
color: var(--contrast);
background-color: var(--example);
}I didn't have a clue of this "var" property in CSS!
oh wow... Thanks!! what an amazing update I must say, amazing! Loving everything about it!
CSS Variables are great! Really glad to hear you like them!!
So much power.
As a side note in the new Typography Module when you select an Element - in the List there is one called Custom. Select that and it will provide a CSS selector field - so you can assign GP typography to your custom HTML as well :)
"As a side note in the new Typography Module when you select an Element – in the List there is one called Custom. Select that and it will provide a CSS selector field – so you can assign GP typography to your custom HTML as well"
Fully noted, that sounds great!! can't wait to start playing with those. Thanks again David!
Have fun! Really appreciate the great feedback!
