Expand my Community achievements bar.

giving color as input to css class without using style tag

Avatar

Level 3

How can I use style="color:${properties.color @ context='styleToken'}" in pure css class as I wanted to give different colors as input at different times.

3 Replies

Avatar

Employee Advisor

Hi @SahrudayaB 

You can create different classes for each color in css file for eg :

.color-green{
    color: green;
}

.color-blue{
    color: blue;
}

and use those classes based on condition in sightly for eg :

<div class="color-${properties.color}">


Thanks.

Avatar

Level 3

but ${properties.color @ context='styleToken'} returns rgb value. In that case how can I give that value 

Avatar

Community Advisor

How are you allowing your content author's to choose the colors?

Avatar

Level 3

from dialog box they'll choose the colors by changing rgb values

Avatar

Employee Advisor

Hi @SahrudayaB ,

 

Are you authoring and storing RGB values separately (in 3 diff properties)?

Avatar

Level 3

No. I just used "granite/ui/components/coral/foundation/form/colorfield" sling resource type.

Here is what I got.

SahrudayaB_0-1644316950719.png

And then I'm giving ${properties.color} in style tag. It is applying when it is used for text but I want to use it to change the colors of range slider track and thumb.

Avatar

Employee Advisor

@SahrudayaB , 

the text use the property as color

color: rgb(x, y, z);


while the slider thumb & track uses the property background-color

background-color: rgb(x, y, z);

 Please update the inline styles accordingly.

Thanks.

Avatar

Level 3

Yes, I did but it's not getting applied since I'm using  input[type='range']::-webkit-slider-runnable-track  and input[type='range']::-webkit-slider-thumb in css to range slider track and thumb. 

Avatar

Employee Advisor

@SahrudayaB do you mind posting the relevant html and css code ? So I can have a better look.

Avatar

Level 3

I have followed the same but I want content authors to choose colors for range slider track and thumb from dialog box. Even if I add style tag in html to apply the color, it's not applying.

page footer