How to use Style Variable for editing elements.

unicodes · 2024-07-18T18:19:19.038+00:00

I have created a variable named "border-radius" with the value "0px"In the "div" styling I have created a style variable "border-radius" connected with the variable.By default the element has 15px border radius, but it does not change to 0 or to 15 as per the variable input changed by the button click.

unicodes
1 year ago
I have created a variable named "border-radius" with the value "0px"
In the "div" styling I have created a style variable "border-radius" connected with the variable.
By default the element has 15px border radius, but it does not change to 0 or to 15 as per the variable input changed by the button click.🙂
Lucas G
1 year ago
Did you set the style variable to the radius field?
unicodes
1 year ago
yes
unicodes
1 year ago
It work in terms of changing the output, but it has no efect on the div.
Max
1 year ago
The style variables at the top of the styling panel will only create CSS variables. You will then have to assign them to the actual properties (see attached screenshots). Hope this helps
🙏1
unicodes
1 year ago
It works! 🥰
unicodes
1 year ago
If there will be people looking to do the same, setting the variable for me worked writing var(--borderRadius). Is there a way to select?
@unicodes
If there will be people looking to do the same, setting the variable for me worked writing var(--borderRadius). Is there a way to select?
Max
1 year ago
Yes, you can select. I think that there is a bug at the moment. You need to define the variable as "spacing". Then you can select it as a border radius
Lucas G
1 year ago
Is it actually a bug though? 🤔
@unicodes
If there will be people looking to do the same, setting the variable for me worked writing var(--borderRadius). Is there a way to select?
Lucas G
1 year ago
You click on the little diamond on the right side of the field
You can see it on the second image Max posted
unicodes
1 year ago
for radius there is no diamond
for color exist
but not for radius
@unicodes
yes
Lucas G
1 year ago
The type for the variant here
Needs to be spacing
Max
1 year ago
I do have a select option
Lucas G
1 year ago
@unicodes have you set any spacing variables in your theme settings? I wonder if it doesn’t show if none are set there
unicodes
1 year ago
I haven't
Tod
1 year ago
Great energy @unicodes! Your continuous contribution to the toddle Community just made you advance to Community Level 6!
Max
1 year ago
That is strange... I only have a color set
Lucas G
1 year ago
Oh then never mind
unicodes
1 year ago
Regarding this project (my drop down) Now I have to create JS function to calculate two business days from today, it is possible to add js code or I have to use functions and workflow?
unicodes
1 year ago
Found, I have to read about cutom actions
Lucas G
1 year ago
But did you solve the radius variable?
Because that’s a bug that needs to be raised otherwise
might* be
unicodes
1 year ago
yes, solved writing the variable name var(--borderRadius)
Lucas G
1 year ago
I meant selecting it from the field
unicodes
1 year ago
No
I have to to this step again for making it work by selecting it.
unicodes
1 year ago
How to use Style Variable for editing elements.

How to use Style Variable for editing elements.

unicodes

Lucas G

unicodes

unicodes

Max

unicodes

unicodes

Max

Lucas G

Lucas G

unicodes

Lucas G

Max

Lucas G

unicodes

Tod

Max

Lucas G

unicodes

unicodes

Lucas G

unicodes

Lucas G

unicodes

unicodes