Saving styling selections as reusable preset -> CSS class

[X3Technology]

Vanjaro has incredible functionality to fine-tune all of the CSS styling selections for each individual element. However, if I have a list of elements that all need to be styled the same, it would be a hassle to have to set the same properties on each element. It would be preferable to define the set of styles once, then save those settings as a CSS class that can then simply be applied to each element that needs a similar styling.

Is that possible?

[X3Technology]

I realize I could define it on one element and then simply duplicate the element over and over. However, this is not easily maintainable. For example, if the client later decides they prefer a slightly different color selection, I don't want to have to edit every single element. It would be preferable to simply edit the CSS style definition and have it apply to everywhere where the class was applied.

[meetmandeep]

Use Theme Builder. Most blocks come with pre-defined styles such as Text, Heading, Button, Menu, and so on. You can quickly define and change these styles from Theme Builder (Menu > Design > Themes > Settings)

I realize I could define it on one element and then simply duplicate the element over and over.

That would not be efficient to maintain. For blocks or your custom blocks that don't have pre-defined styles, use a custom class. You can define your styling in Design > Custom Styling and add the class via Styling Tab.

Unfortunately, you cannot use the Styling Tab to style a class. You'll have to write your css manually.

[X3Technology]

Thanks. I have no problem manually writing the CSS class, which solves my needs. However, it seems like it would not be much of a leap to add a button to the Styling UX to save the current selections as one of the options found in the Design-> Themes UX.

Some like this perhaps:

which would feed into here:

[meetmandeep]

This is something we explored as well. The ability to use the Styling Tab in Theme Builder; however, Theme Builder is basically a UI generated around existing Sass variables. All it's doing is replace default values with user selected values. In comparison, Styling Tab is a CSS Editor and lets your create your own styling.

This is still on the roadmap but there's no easy way to accomplish this at the moment.

[X3Technology]

I see. Thanks. That would be a killer feature.