There is an option box to the right of the classes text field that lets you select the class you wish to edit. It is not visible if you have focused on the classes text field. So remove your selector from the text field and that option box should re appear.
I absolutely don’t understand what this advice is communicating and I don’t presently see an option to the right of the classes text field. When I look at any options to the right of the classes names all I see is the a dropdown that allows you to rename or duplicate a class. I also see a dropdown that allows you to select pseudo-classes.
How do I edit the specific classes I’ve created? In my example I have two classes there. I want to select one and edit it.
Thank you. That clears up some things. I have a follow up. When I created an additional class called, .primary-font, I assigned a font-family to it. My assumption is that this was creating a brand new class by itself. However it did not as demonstrated by the generated code below. How do I add a class without creating a combo class?
Whenever you add a new second class to an item, it will create a combo class.
If you want to add two classes to one element, I recommend using a Global Class for your secondary element. Similar to combo classes, global classes are added to base classes. However, the original element that you style the global class is separate from the base class element.
Essentially, you would create an element with the class “primary-font” separate from your element with the “wvfrm-pink” class. Next, add your font family to the element with the “primary-font” class.
Now when you go to add a second class to your “wvfrm-pink” element you can start typing, and your Global Class will appear in the dropdown.
Note, you might have to clean up classes if you are using the same names as combo classes you have previously set up.
The Global class process seems to describe creating a div for some reason, then applying a class there. The impression I get is that this is the only way to ensure the class is created separately as opposed to being combo-ed. Am I understanding that correctly? Would it be fair to call this approach a “hack” or is this by design?
One reason I ask is that I am teaching this technology to students and it’s tricky having to explain a concept and then explain a “hack”. It can confuse their understanding of the concept (in this case, CSS).
we suggest creating a page where all your global class elements can live, like a Style guide page.
The benefit of this is that you are able to define all of your Global Classes which you can then apply to your design as you go.
There is a feature in Webflow to “Clean Up” styles. This deletes any unused style. The benefit of having the Style Guide page is that every global class is always in use, and you would never delete one of your Global Styles when you perform he Clean Up feature.
This is an older topic but still very usefull. I understand the priciple of Global Classes and the use of them. What I don’t understand, or maybe I’m doing it wrong, is that when Global Classes are assigned, they become ‘instances’ of that Global Class; you can see this in the Style Manager, where they are visible as nested classes. The result of this is when you rename the original Global Class (on the style guide page that houses this class), all instances are not renamed.
Am I right that remaning a Global Class means renaming al instances of that class (which can be many) too?
