Changeable variable in custom CSS

Ask for Help
1

Hi all,

getting my head around custom CSS in the newer page system (I used to use Rich Text boxes for displaying components in the legacy apps) and doing fairly well but I have run into something that I used to be able to do but now have no idea if this is still possible.

When using the Custom CSS field is there still a way of setting variables that can be controlled by data in the rest of the app?

For example I had this set previously:
.Timer{
position: absolute;
transform: scale(1,1);
transform: rotate(P2ROdeg);
top: 10%;
left: -1%;
}

where P2RO was being replaced by a number by using a template column, but of course this was when the whole thing was inside a rich text box.

Is there now any way that numbers or other variables can be inserted into the custom CSS field? (I can’t currently find any way this would work in the newer layout :thinking:)

2

Based on the CSS example you provided, you can still use the rich text component as long as you write it inline. This way, you can apply dynamic data from tables to your CSS.

Please note that I typically use custom CSS for cases such as overriding the default styles of Glide components, applying pseudo-elements, and keyframes or anything that starts with ‘@’.

1 Like