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?
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:
- option/alt click all the styles you added to the combo class
.BG Gradient 7 .Style Guide Color
to remove them
- delete class
.Style Guide Color
from the selector for now
- 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