Change primary color only in one question | XM Community
Skip to main content
Question

Change primary color only in one question


Forum|alt.badge.img+3
  • Level 2 ●●
  • 18 replies

Hey community,

 

The primary color for all questions can be adjusted in “Look & Feel”.

Now I am wondering how to change the primary color only for one specific question. I am using a heatmap and want to change the color of the point appearing when clicking. This works nicely when changing the color in “Look & Feel”, but then for all questions…

 

Any help is highly appreciated!

9 replies

Sachin Nandikol
QPN Level 6 ●●●●●●
Forum|alt.badge.img+34
  • QPN Level 6 ●●●●●●
  • 470 replies
  • April 22, 2024

Hello @lamori,

You can do it with the help of Java Scripts. 


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 18 replies
  • April 22, 2024

Yes, that is what I assumed, but I dont know how. Can you provide a JS code or idea?


Forum|alt.badge.img+6
  • Level 2 ●●
  • 15 replies
  • April 22, 2024

Hi @lamori,

You can use the Custom CSS feature for this. Can you provide a visual example of what you need?

Best,

Daniel


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 18 replies
  • April 22, 2024

Hi @dduarte,

Thank you! I would like to change the color of the blue point in the heatmap here:

https://economicsslu.fra1.qualtrics.com/jfe/form/SV_ehRCLAfhVxHggOG

Yet, the primary color in all other questions shall remain in blue.

 


Forum|alt.badge.img+6
  • Level 2 ●●
  • 15 replies
  • April 22, 2024

Hi @lamori,

I’ve never used this type of question myself, however, based on playing around with the example you provided, maybe this code snippet can help you get what you need:

div#QID3 .heatmap-circle heatmap-point ui-draggable ui-draggable-handle entered open static {

   background-color: #xxxxxx; #set to the color you need

}

I’ve attached an image with the elements that my browser detected should be the ones to select for applying this changes.

Best,

Daniel


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 18 replies
  • April 22, 2024

Hi @dduarte,

Thank you! I am new to Qualtrics and I am not sure how to exactly enter the code in JS for this particular question.

I tried the following, but it did not work...

 

Qualtrics.SurveyEngine.addOnload(function()
{
div#QID3 .heatmap-circle heatmap-point ui-draggable ui-draggable-handle entered open static {

   background-color: #FFEA00;

}

});


Forum|alt.badge.img+6
  • Level 2 ●●
  • 15 replies
  • April 22, 2024

Hi @lamori,

You need to paste it on the Custom CSS field under the Look & Feel options.

Best,

Daniel


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 18 replies
  • April 22, 2024

Hi @dduarte,

Unfortunately, it does not change the color of the point in the heatmap. Do you have another idea how this could be changed?


Forum|alt.badge.img+6
  • Level 2 ●●
  • 15 replies
  • April 22, 2024

Hi @lamori,

Unfortunately no, I’d suggest you keep playing around with the html elements and the CSS custom code.

Is there anyone in your org with html or CSS design knowledge that can help you with?

Best,

Daniel


Leave a Reply