[Resolved] Linking global colors css class to custom element

[eduard sans]

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!

[David]

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);
}

[eduard sans]

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!

[David]

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 🙂

[eduard sans]

“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!

[David]

Have fun! Really appreciate the great feedback!

[Author]

Posts