Is there a way to change the color/appearance of the selected Region overlay for Hotspot questions? | XM Community
Skip to main content

If a region is selected the overlay appears as a transparent green color. Is there a way to change this color/transparency?

Thanks,

Not easily. But since the colors are currently predefined, you can sort of use those hex values as a CSS selector to swap them out. For example, this CSS will change the default green to orange and the default red to blue.
.HotSpotContainer svg > path[fill="#00fe00"] {
fill: orange;
}

.HotSpotContainer svg > pathhfill="#fe0000"] {
fill: blue;
}
You may need to adjust the opacity a bit. Can do it like this:
.HotSpotContainer svg > pathtfill="#00fe00"] {
fill: orange;
fill-opacity: 0.5 !important;
}
Unfortunately, you have to use !important here because Qualtrics sets the fill-opacity to 0.3 via an inline style declaration.

Thanks - I placed this custom CSS code in the Header of the Style 'Look and Feel' settings. It doesn't appear to take effect. Where would be the correct place to enter this code?
Thanks again.

Nevermind - I see my mistake.

Actually I don't - the CSS is not taking effect. Can you be more specific on how to implement this?

Thanks.

Sorry - another follow up - I only want to change the Hotspot fill color once the Hotspot has been clicked. Not the default fill color.

https://www.qualtrics.com/community/discussion/comment/28335#Comment_28335Right. By default, they are transparent. Once clicked, Qualtrics defaults to these HEX colors:

#00fe00
(green, first click)
#fe0000
(red, second click)
The CSS below targets hotspots with those colors and allows you to override the "fill" or anything else you can apply to a path element.
.HotSpotContainer svg > path[fill="#00fe00"] {
fill: orange;
}

.HotSpotContainer svg > pathhfill="#fe0000"] {
fill: blue;
}

https://www.qualtrics.com/community/discussion/comment/28331#Comment_28331Did you include it inside of