New feature: reset styles with an Alt/Option+Click

Clearing out a style in Webflow can be a bit of a chore — especially when you’ve set values for a dozen properties or more.

Well, it “used to be” a chore. Because as of today, you can zero out a style with nothing more than an Alt/Option+Click.

Just hold Alt (on Windows) or Option (on Mac) as you click any blue-highlighted style and — bam! — the style is cleared. It works just like the style Reset button. And, as always, you can hit Command+Z to undo if you made a mistake.

29 Likes

Excellent! Glad to see this. Any plans to introduce a UI element to do this also?

1 Like

OH, this only clears a single setting! It’s still welcome, but I thought it was a way to clear everything in a style.

This is a nice addition but just like @Marxamus, I’d love to see a opt ctrl click or something to clear the entire style.

That’s correct. But interesting idea to have functionality for resetting the whole style. I’ll put in a feature request for that :smile:.

2 Likes

@DFink and @Marxamus I’d like to get clarification on this. Do you want to clear all Margin/Padding, border, or border radius properties when clearing just one of them using CTRL+ALT modifiers? Or is there something else you’re thinking of?

1 Like

“entire style” and “resetting the whole style” suggests that all blue (current combo selector + current responsive) on the settings panel will be cleared.

If we were to implement this, you might want to add it to the list of options here like this:

14 Likes

I’d like to be able to quickly clear all class & device specific styling, as @samliew has explained.

5 Likes

Aaah gotcha! Thanks for clarifying!

1 Like

So it is a kind of a “short-cut” for “Remove this style” button, right? Great!
BTW, can I copy all the properties of a class into another class? Or duplicate a class? Sometimes I like to have a few variation of a class and I have to write down and give all the properties of the class for each variation.

2 Likes

I threw this up on the wish list a few months back. Hopefully we get that functionality sometime soon! Duplicating styles would be a great feature.

1 Like

You shouldn’t be afraid of adding a sub class for your variation. Such as:

.button.alt1
.button.alt2

or

.block.big.alt1

etc…

But I understand that sometimes it doesn’t make any sense, semanticaly speaking.

Would you all expect the “hidden” styles in all the hover/focus/pressed states and all media queries to be cleared as well if you clear all styles from a class?

yes, otherwise you aren’t really clearing the style, and may be left wondering how to get rid of xxxx

2 Likes

Let me try to clarify. Sometimes I go through and add a bunch of styles to both the default and hover states and decide I want to start over but I want to use the same class name. That leaves me to go through and “remove this style” on everything blue. I’d love a complicated key command with something like 2 modifiers to do this (to avoid accidentally doing it). What @samliew has above would work too with the dropdown to reset the entire style on a class/subclass basis. That might actually be better because you wouldn’t have to manually select a parent class to reset the style on it while editing a subclass.

Brilliant! now if only we could get that for the asset library :wink:

I hear you @vincent, but from what I gathered interactions identify objects to apply actions upon, by their styles only (not by ID). So sometimes I find myself creating similar objects with similar class just to be able to apply specific action action to each one. Once I learned to use “limit to nested elements” it solved some of the cases but not all. Did I made myself clear?

Yes Lupo, I was just saying it in case of.

So let me give you a trick I found, in order to target an element with multiple classes.

Say you have this popup that you want to target with an interaction. You can build it from scratch in order for it to have a unique “NewPopup” class. But you could reuse an existing element, who already have 2 classes: .popup.big.

Do it anyway, re-use that popup and surcharge it with your new class, you end up with .popup.big.newPopup

Now, just before starting to build your interaction, drag a dummy div, or anything, in the designer. Then give it the simgle class .newPopup.

Build your interaction, call .newPopup in the “Affect different element” dialog, it appears, select it. Build your interaction. Now before testing it, you can delete the dummy div (or any other element) you used solely to affect the class you needed to target.

Test your interaction, it indeed is targetting .popup.big.newPopup

Hope that’ll work for you :slight_smile: I have to say most of my interactions target elements with many classes and I never had a trouble.

2 Likes

Thank you. Vincent. I’ll try that.

This is great! I’d love it if you could duplicate a style…that would be nice.

1 Like