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

Change size of stars in star rating question type

  • June 3, 2020
  • 2 replies
  • 538 views
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.

    2 replies

    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • 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.

      C
      Forum|alt.badge.img+1
      • Candace
      • 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

      Terms & ConditionsAccessibility statement