- This topic has 5 replies, 2 voices, and was last updated 4 years, 6 months ago by
.
-
Posts
-
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!
Customer Support
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 namedexamplewith a hex color of#123456that 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!
- You must be logged in to reply to this topic.
