This is not a post about CSS Variables in and of themselves, but more about how they can be used in Avada. In a couple of posts, I have demonstrated using them for font weights (bad example) and system fonts (good example, but no longer needed). If you want to learn more about CSS variables check out the MDN documentation.
The Avada team added global colors and typography which rely on variables, so it makes sense there would be the ability to use them in the settings of elements. Unfortunately, in the case of colors, the Avada naming convention leaves a lot to be desired so to overcome this I decided to look at using my own naming conventions and it worked beautifully.
As far as I can tell, any setting that can take a value can use variables — color, background color, padding, margin, etc, should be able to work.
In setting this up and experimenting, I had a bit of an epiphany (actually it was more of an aha moment). I have written a lot of custom styles targeting a column and have always had to include .fusion-column-wrapper. What I learned today is that in a column, the CSS class field targets the outer div of the column (fusion-layout-column), and the design settings target the inner div (fusion-column-wrapper). Using variables would make it really easy to create an element library with settings for different screen sizes. With a few setting changes, your entire design can be transformed.
What about other modern CSS?
In experimenting with these variables, I also found that you can use clamp() and calc() directly in a settings field which is terrific. There does seem to be some inconsistent behavior when adding clamp() values to a heading setting and in particular h1 — sometimes it works and sometimes it doesn’t. To add to this frustration, it always works in live edit, but then fails when you switch to the front end — clearing caches does not make a difference. You can write a variable or create a special global typography entry and the clamp() seems to be applied correctly.
In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.
I have struggled to find the time to write full tutorials or even longer posts, so I am adding a Quick Tips category. This is similar to the news shorts, but almost every article will include code or a quick tip (imagine that) about an Avada setting or quirk.
ALLOW ALL COOKIES
Third-party cookies are cookies that are set by other websites, not this one. This website may use embedded content from other websites, such as YouTube or Google maps. Your consent is required to view content from these websites embedded on this site.
THIRD PARTY EMBEDS
These are cookies that are required for the operation of our website, details of which can be found here.