Change size of stars in star rating question type | XM Community
Skip to main content
Michael_Cooksey
Administrator
19 days ago
Solved

Change size of stars in star rating question type

L
Forum|alt.badge.img+1

I'm hoping someone can help me with the CSS required to make the size of stars larger in star-rating type questions, please?
I found the below thread on the topic, but it provides no solution other than to make the text smaller {"emoji": {"emojiChar": "😕"}}https://www.qualtrics.com/community/discussion/1806/position-and-size-adjustment-for-stars
Thank you!

Best answer by TomG

You can't use CSS to change the size of the stars. The stars are images and the highlighting is tied to the size of the images.

View original
C
1 person likes this
  • C
    Candace

2 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5926 replies
  • Answer
  • June 3, 2020

You can't use CSS to change the size of the stars. The stars are images and the highlighting is tied to the size of the images.

rondev
L
2 people like this
  • rondev
    rondev
  • L
    Louise77
C
Forum|alt.badge.img+1
  • Candace
  • 2 replies
  • March 23, 2022

https://community.qualtrics.com/XMcommunity/discussion/comment/26126#Comment_26126TomG
We want to modify the default image of stars.
We created a new image to replace and uploaded it to the qualtrics image library.
We performed a test with the inspect tool and it worked, it was iterative with the new image.
The problem occurred when we added the CSS code in Look and feel >> Style >> Custom CSS. Image replacement has become static, it is not possible to change the selection of the amount of stars.

Our Custom CSS:
Skin .STAR .BarContainer{top:0; width: 250px;}
.Skin .STAR .StarsContainer,.Skin .STAR .StarsContainer .Filled,.Skin .STAR .StarsEventWatcher{height:34px;background:transparent url(https://poliedro.qualtrics.com/ControlPanel/Graphic.php?IM=IM_dniuLMuKO0BZJ2e) 0 0 !important;}
.Skin .STAR .StarsOuterContainer{margin:1px;}
.Skin .STAR .StarsContainer{background-position:0 -33px;position:relative; width: 182px !important; height: 32px !important;}
.Skin .STAR .StarsContainer .Star{width:39px;height:36px;background:transparent url(https://poliedro.qualtrics.com/ControlPanel/Graphic.php?IM=IM_dniuLMuKO0BZJ2e) 0 0 !important;float:left}
.Skin .STAR .StarsContainer .RealSlider{height:30px;position:asolute;top:0;left:0;opacity:0}
Our Survey:
Pesquisa_-_Refeitrio_Alojamento.qsfHow it's supposed to be:
estrelas_correto.zip

1 Attachments

Leave a Reply


Terms & Conditions