How do I change the star outline in the slider/star question type? | XM Community
Skip to main content
Solved

How do I change the star outline in the slider/star question type?


DaisyD
Hello! Is there a way to change the colour of the star outline in the slider/star question? I am using a photo background and I find that the stars don't show enough. I would like to change the light grey outline to a darker grey, but I don't know if it's possible or how to... ! Many thanks in advance!

Best answer by TomG

> @DaisyD said: > Thank you very much Tom! As I'm a newbie to CSS, do I just have to replace the url in brackets with my new star url (ex: https://opinion.reitmans.com/CP/Graphic.php?IM=IM_da8gExUHNLXt8k)? Yes, just replace the url in parens. However, I get an error when I click on your image link so something is wrong with it. Also, your star image has to have EXACTLY the same dimensions and star placement as the original.
View original

6 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5921 replies
  • July 4, 2019
I think you would have to create a new stars.png file, upload it, then create a CSS rule to override this rule: ``` .Skin .STAR .StarsContainer,.Skin .STAR .StarsContainer .Filled,.Skin .STAR .StarsEventWatcher{height:26px;background:transparent url(https://jfe-cdn.qualtrics.com/themes/base-templates/qualtrics/base/version-1561388512231-d0e045/files/stars.png) 0 0} ```

DaisyD
  • Author
  • 20 replies
  • July 4, 2019
Thank you very much Tom! As I'm a newbie to CSS, do I just have to replace the url in brackets with my new star url (ex: https://opinion.reitmans.com/CP/Graphic.php?IM=IM_da8gExUHNLXt8k)?

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5921 replies
  • Answer
  • July 5, 2019
> @DaisyD said: > Thank you very much Tom! As I'm a newbie to CSS, do I just have to replace the url in brackets with my new star url (ex: https://opinion.reitmans.com/CP/Graphic.php?IM=IM_da8gExUHNLXt8k)? Yes, just replace the url in parens. However, I get an error when I click on your image link so something is wrong with it. Also, your star image has to have EXACTLY the same dimensions and star placement as the original.

Hey TomG , I am facing similar issue, but can you tell me where exactly do I have to paste this code
.Skin .STAR .StarsContainer,.Skin .STAR .StarsContainer .Filled,.Skin .STAR .StarsEventWatcher{height:26px;background:transparent url(https://jfe-cdn.qualtrics.com/themes/base-templates/qualtrics/base/version-1561388512231-d0e045/files/stars.png) 0 0}

?


JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • QPN Level 2 ●●
  • 75 replies
  • November 14, 2023
Parth3399 wrote:

Hey TomG , I am facing similar issue, but can you tell me where exactly do I have to paste this code
.Skin .STAR .StarsContainer,.Skin .STAR .StarsContainer .Filled,.Skin .STAR .StarsEventWatcher{height:26px;background:transparent url(https://jfe-cdn.qualtrics.com/themes/base-templates/qualtrics/base/version-1561388512231-d0e045/files/stars.png) 0 0}

?

Hey @Parth3399 you can paste this piece of CSS code in the look&feel of your survey (Style > CSS).

It worked for me 😉


SantiagoGomez97
QPN Level 2 ●●
Forum|alt.badge.img+4
JR33 wrote:
Parth3399 wrote:

Hey TomG , I am facing similar issue, but can you tell me where exactly do I have to paste this code
.Skin .STAR .StarsContainer,.Skin .STAR .StarsContainer .Filled,.Skin .STAR .StarsEventWatcher{height:26px;background:transparent url(https://jfe-cdn.qualtrics.com/themes/base-templates/qualtrics/base/version-1561388512231-d0e045/files/stars.png) 0 0}

?

Hey @Parth3399 you can paste this piece of CSS code in the look&feel of your survey (Style > CSS).

It worked for me 😉

Hello! Can you help me, im trying to do this to change the star’s colour when hovered/selected but this isnt working for me. This is the code im using:

 

.Skin .STAR .StarsContainer,.Skin .STAR .StarsContainer .Filled,.Skin .STAR .StarsEventWatcher{height:26px;background:transparent url(https://clinicainternacional.yul1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_jpE8yWRCC4XDCEa) 0 0}

 

Thank you!


Leave a Reply