▼
Streaming live at 10am (PST)

Question about Combo Classes


#1

I've applied a combo class to a div to specify a certain font color (services-text-color).

I then selected another div with text, to apply the same font color. I start to type in the name of the class used for the previous div, and it doesn't show up in the list of already-created classes, which I think I understand, because Webflow appends child classes to parent classes and child classes cannot be used independently of the parent class.

What I don't understand is the message "Using this name will apply styles to combo classes with the same name."

My question is: What does this message mean? If I can't apply the previously created child class (as indicated both by the fact that I can't select it from the list of existing classes, and by the appearance of the Create button), why do I get a message that using the previously created child class will modify existing classes?

(Sorry if I haven't explained this very well... :yum:)

Thank you!


#2

Hi @tkister, that is a really good question. Let me help to explain this a bit:

So let's say I create a class called "Button" and give it a background color of blue

Then I create a few buttons, and one of them I want to have Primary styling - so I add a combo class, so you see "Button | Primary" in the class selector

In the "Primary" class (".button.primary"), I set a background color of red and add some padding

Now, somewhere unrelated, I created another Div Block, and when it doesn't have a class I type in "Primary" as the main class --- this is when the warning will show up

That's because if I give that "Primary" global class (for example) a thick red border, the ".button.primary" element will ​also​ get that border

Does that make sense? If there is further questions, let me know :slightly_smiling:


#3

Hmmm... I still don't understand.

To be clear, I'm talking about child classes only - so I'm not talking about using "Primary" as a parent class. (Not sure if that matters.)

So, on the "somewhere unrelated," using the pre-existing class "primary" actually does apply the existing child class? Or is it just that the name is already taken, and, even though the class exists, you can't actually use it on a different element (because it is associated with a different parent class)? Wait... except you can use it, because the message says you can change it and it will effect other elements...

Sorry - I'm just having a hard time getting it. :wink:

It seems like this must have something to do with why people use a blank page as a sort of style sheet...

Thanks for your help!


#4

Hi @tkister,

Yep, if the Primary class is used as a combo class, and then the Primary class is used as a global class, a style change to the global Primary class will affect to the Primary combo class.

You are not prohibited from doing it, just be aware that style changes to the global Primary class could affect to other combo classes with the same name.

If it helps, I am happy to create a quick example to show this behavior.


#5

What do you mean by "global" class? Is it the same thing I'm calling a "parent" class?

So, my understanding is that the first class is a "parent" (global?) class, and that all classes used after the first class are "combo" classes ("child" classes). Is that right?

So, in the following screen shot,

"three-column-heading" is the parent/global class, and "tab-panel-heading" and "column-heading" are the child/combo classes.

Have I got that right?

If so, then I don't understand your statement "...a style change to the global Primary class will affect to the Primary combo class.' (I'm only talking about "child" classes.)

(I don't mean to be difficult – sometimes terminology can make the difference between understanding and not understanding.)

Thanks again! :grinning:


#6

Hi @tkister, yes the three-column-heading is the global class. The column-heading is the combo class.

If you were to create a new element, and create a global class called column-heading, and you give that some styling, lets say a red border, then the column-heading combo class will also get the red border, because it has the same name as the global class.


#7

Ok, so you don't actually "create" a child/combo class in this case (even though "Create" shows up, and the existing class doesn't show in the list of selectable classes), because it does exist, and, by typing the name in, you are actually selecting it.

Is that right?


#8

Hi @tkister, well, the combo class is being affected by the styling of the Global Class having the same name as the Combo Class.

Take a peek at this video, hopefully this will help:


#9

@cyberdave,
Thanks for the explanation. Let me see if I understand. I thought I did, but now, I'm not sure. :slightly_smiling:

Applied to a Div Block:
* Global class: .Border (properties: 2px solid #000)
* Result: Transparent div with a 2px solid red border)

  • Combo class: .Border + .Fill (property: bkgrnd-color: #fff)
  • Result: White background div with a 2px solid red border

If I apply .Fill to another div block as a global class and change it to a background color of #666, then my result for the combo class example will now be a gray background div with a 2px solid red border.

Is that correct? If it is, then here's where I kind of lose certainty about what I'm doing....

Let's say I have another combo class using .Fill as the second class:
* Global class: .Circle (properties: radius: 100%)
* Result: Transparent circle div

  • Combo class:** .Circle** + .Fill (change .fill background color property from white to black)
  • Result: Black circle div

So my question is, does changing this last combo class .Fill affect the properties of the earlier combo class .Fill? I'm thinking it does not, but I could be wrong and want to find out sooner than later!

Thanks for all your help!


#10

Hi @ctotty, good question, in that case, then both combo classes that have the name "Fill" will inherit the global "Fill" class background of #666, but those combo classes will not affect each other and styling changes to either of the combo classes will not affect to the global class named "Fill".

If you give each of the combo classes named "Fill" a different height lets say, the combo classes will not affect each other and each will have a separate height.

If you change the "Fill" global class, then both "Fill" combo classes will inherit the styles made to the "Fill" global class.


#11

@cyberdave: Thanks for taking the time to make the video! It shows what you were explaining very well. :grinning:

And, the same applies to the situation I described, in which you apply an existing child/combo class to a parent (rather than using the child/combo as a parent).

I do think this could be much simpler in the UI, perhaps if the existing class showed up in the list of existing classes. Dunno... it would take some thought.


#12

@cyberdave,
If I had only waited a couple of minutes, I would have seen your video, rather than writing all of that out. :slightly_smiling:Thanks so much for you help!


#13

I'm getting the warning when I use not the same class name but the same WORD wthin a class which makes this whole thing bizarre. Basically if I have a class called "rs logo" and another one called "rasp logo" I'm getting the warning. Is this a bug? If not I don't get it, I'm going to run out of words!


#15

A possible partial solution here might be to revise the text that appears so that it is more accurate.

So, rather than saying: "Create" and "Using this name will apply styles to combo classes with the same name,"

it could say something like:

"Select" and "This class already exists as a child class. Using this name will apply new attributes to the existing class."

(It would take a Webflow expert to make sure each statement that appears is accurate.)

It seems (based on Mowgli's comment) that more than one message might be needed.

Just an idea... easier than redesigning the functionality. :grinning:


#16

This topic was automatically closed after 60 days. New replies are no longer allowed.