By Stephen Walker

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.

Using variables in the custom CSS

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.

Using variables in a custom class or directly in the settings.

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.

The featured image shows color variables from the US Web Design System.

Originally published on April 30, 2022

share the article

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    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.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • New Feature – Quick Tips

    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.