How to make changes to a class?

I’m simply trying to update my “Button” class and give it less padding but when I click the button element the change only happens on that single button, not all buttons.
Not sure if you need the read only link but here it is.
https://preview.webflow.com/preview/real-estate-website-311b17?utm_medium=preview_link&utm_source=designer&utm_content=real-estate-website-311b17&preview=73f40b04d5ceae76983eb1d56648a638&workflow=preview

@CyberMatt - without more detail I’m kind of guessing that you are referring to these two buttons:

image

Each of these has a base class of Button but also an combo class of Drk Btn and Lite Btn. Essentially combo classes allow variations from base classes.

For instance on the Dark Btn:

Every property in Blue is overriding the base class, while everything in Orange is inheriting from the Button class or from somewhere further up the chain.

For instance the font is coming from the Body class:

image

Whereas the text color is coming from the Dark Btn combo class:

image

If I modify the Button class padding for instance it does update both of those buttons since that is set on the base Button class, not the combo classes:

image

image

image

image

Does that help?

1 Like

I think it did.
If I want to make changes to a base class, do I first have to remove all combo classes from that element, make the change and then put the combo classes back on?

Or to phrase it another way, when I have an element selected and I go to make style changes, the class that will be taking on those changes would be the last class in the Selector dropdown. Is that correct?

In this photo all my sizing is on the Button class, and then I’ve got my combo class which is just background color and test color. If I want to change the styles on my Button class I would have to remove Drk Btn first then make those changes right?

I know I just asked this but I feel like pictures help so much better :slight_smile:

@CyberMatt - you can click where it says the number of selectors being inherited:

image

Then click the Button class only:

image

Which will put you into an edit mode for that base class for the desktop breakpoint (others would be available if you had changes at different breakpoints):

image

2 Likes

Thanks Sam!!! That was super helpful!!