Change star colors/symbol on slider question. | XM Community
Skip to main content

Hello!
We are trying to change the color of the stars on the slider questions. We know that there is no a function that allows that, but we are trying to do so with custom CSS but for some reason when we change the URL in Chrome DevTools it works perfeclty:
Estrellas verdes en inspeccionar.png





But for some reason when we apply the CSS to the Survey Look & Feel, it blocks the edited stars:
Estrellas verdes en look & feel.png





The CSS code looks like this:
.Skin .STAR .StarsContainer, .Skin .STAR .StarsContainer .Filled, .Skin .STAR .StarsEventWatcher {
  height: 26px;
    background: transparent url(

HERE THE URL
) 0 0;
}
Is it a way of making this work? or maybe another way of changing the color of the stars or maybe the stars for another symbol?

Thanks!

That selector you've got listed there is going to be close, but you're grabbing all the star elements with it (obviously lol). What you want is something with the .selected in the string, I believe. In the dev preview, select a few stars, inspect element, and then see what the css is that's attached to a star that has been selected.
Wow, too much use of the word 'selected'. Let me see if I can mimic your setup real quick and get you the correct string.

Alright, I think you're grabbing too much in your CSS selector. It looks like you're grabbing 3 different classes when you really only want the middle class: .Skin .STAR .StarsContainer .Filled. Try using only that selector and see if it gives you what you want.

Leave a Reply


Terms & Conditions