Changing global classes to combos?

Hi there - total newbie and have just spent an age getting my colours and gradients set up in my project. Turns out I thought I was creating combo classes, but was creating global ones, which means I can’t select them in various containers.
Everything in Gradient 1 seems to be exactly the same as gradient 7 but alas no dice.

Screenshot 2021-02-24 at 16.49.43|690x69 !

Screenshot 2021-02-24 at 16.49.55|415x500 !

Screenshot 2021-02-24 at 16.50.27|690x56 !

Screenshot 2021-02-24 at 16.50.44|690x241

Not quite sure what you mean, could you clarify with maybe a link to the site or a clarification of what you would like to happen?

Is it that the container with the class gradient 7 should have both the purple background and the gradient?

If you see in the images attached above Gradient 1 - it works no problem, select it for the container background class, and all fine. Then Gradient 7 doesn’t work at all.
When selecting a gradient in the style editor pane on the right Gradient 1 appears to be a combo class and Gradient 7 a global class. No idea why they are both different?

My read only link :slight_smile:

What is happening is that .BG Gradient 1 is a global class, meaning the color is applied to only .BG Gradient 1. Put that class onto any element with any number of other classes and it will apply the gradient background.

.BG Gradient 7 is attached to .Style Guide Color and when you added the color, you actually applied it to combo class .BG Gradient 7 .Style Guide Color this means that if you want the style to work anywhere, you have to put the combo class .BG Gradient 7 .Style Guide Color in the selector.

Gradient 1 is doing well, so I recommend:

  1. option/alt click all the styles you added to the combo class .BG Gradient 7 .Style Guide Color to remove them
    Screen Shot 2021-02-24 at 4.24.14 PM
  2. delete class .Style Guide Color from the selector for now
  3. only add color to .BG Gradient 7 then add .Style Guide Color to resize it as desired.

Now .BG Gradient 7 alone adds the color, and you can apply it anywhere.
Sorry if the verbosity is overkill but its there for clarity hahaha

1 Like

Thank you! Problem solved. Very much appreciated :slight_smile: