Is there a way to change the color/appearance of the selected Region overlay for Hotspot questions?

SedonaFluteSedonaFlute Alabama, USCommunity Member Qubie ✭

Is there a way to change the color/appearance of the selected Region overlay for Hotspot questions?

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


Thanks,

Answers

  • moowilmoowil Community Member Qubie ✭

    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 > path[fill="#fe0000"] {
      fill: blue;
    }
    

    You may need to adjust the opacity a bit. Can do it like this:

    .HotSpotContainer svg > path[fill="#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.

  • SedonaFluteSedonaFlute Alabama, USCommunity Member Qubie ✭

    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.

  • SedonaFluteSedonaFlute Alabama, USCommunity Member Qubie ✭

    Nevermind - I see my mistake.

  • SedonaFluteSedonaFlute Alabama, USCommunity Member Qubie ✭

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


    Thanks.

  • SedonaFluteSedonaFlute Alabama, USCommunity Member Qubie ✭

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

  • moowilmoowil Community Member Qubie ✭

    Right. 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 > path[fill="#fe0000"] {
      fill: blue;
    }
    


  • moowilmoowil Community Member Qubie ✭

    Did you include it inside of <style> tags? If so, you might need to create a heavier selectors. Try adding .Skin before each selector. Like,

    .Skin .HotSpotContainer svg > ...

Sign In to Comment