Global variables or presets

[100leiden]

I just saw this topic: Dynamic presets?. I could really use this feature too.

Or something like this: Put a variable on a setting in an element . Whenever I want to edit the border-radius site-wide I only have to change the variable and it will affect all those elements with the variable.

This would really help the speed of changing styling and settings of all elements on the website.

[dabigcheeze]

You can do this already if you set the variable yourself.

/* Set variables */
:root {
–corners: 5em;
}

Then you apply the variable with var(–corners) in the location you want,

[100leiden]

Hi,

Thanks for your reply. I tried doing this, but that doesn’t work in the settings on a element in cornerstone. See screenshot!

[100leiden]

Sorry, you’re right. I copied your text but de dashes weren’t correct. It needs to be 2 dashes i think?

I do get an error on every line with a variable: EXPECTED RBRACE AT LINE X, COL 3. Does the code editor supports those variables?

[tristup]

Hi Christine,

The CSS variables can’t be used in the element settings, you can use the variables into the classes and that can be implemented into the elements.
I have created the following CSS code into the Theme Options > CSS and implemented the class into the Text which worked perfectly fine.

:root 
{
    --corners: 5em;
}

.fsize .x-anchor-text-primary
{
    font-size:var(--corners) !important;
}

Hope it helps.
Thanks

[100leiden]

Hi @tristup ,

But it does work when I use the css variable in the element settings. So why is it neccessary to do it your way?

[tristup]

Hi Christine,

Sorry for the confusion. If you want to use the Global CSS variables directly into the element settings you need to use the calc method. Your input should be like calc(var(--corners)) not var(--corners).

Hope it helps.
Thanks

[100leiden]

Alright, but can you explain to me why? Because I don’t get why I should use calc(var(--corners)) instead of var(--corners) in the element settings.

Is there also a way to grab the colors in the Color Manager with a CSS variable? I really need to make changing styles as easy as possible. When I’m using custom CSS to change a color of an element I want to make use of the colors in the color manager.

[tristup]

Hi Christine,

The Global Variables needs to be parsed into the actual value for use in the element settings. And the calc method converts it to the actual value which can be used, and that is why you need to use the calc.

Hope I am able to explain it.
Thanks

[100leiden]

Hi @tristup,

Alright I get it. Thanks for explaining.

Did you also see my other question?

Is there also a way to grab the colors in the Color Manager with a CSS variable? I really need to make changing styles as easy as possible. When I’m using custom CSS to change a color of an element I want to make use of the colors in the color manager.

[tristup]

Hi Christine,

Unfortunately, there is no way to grab that into the Color Manager.

Thanks

[100leiden]

If it isn’t already requested. Can you make that a feature request?

[ruenel]

Hello Christine,

Yes, we can add this as a feature request. And I may add that we are doing a Theme options Reboot which will pave a way for the Globals and Variables. You can read more about it here:

• Status Report: October, 2021 (theme.co)

Cheers.