Change size of stars in star rating question type | XM Community
Skip to main content

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!

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.


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


Leave a Reply