https://www.qualtrics.com/community/discussion/comment/28331#Comment_28331Did you include it inside of tags? If so, you might need to create a heavier selectors. Try adding .Skin before each selector. Like, .Skin .HotSpotContainer svg > ...
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 > path[fill="#fe0000"] { fill: blue;}
I don't think there's a "real" way to do this (via the admin UI) but this CSS might work for you. I haven't tested it in the real world so grain of salt, etc. Would almost certainly need media queries involved so that the mobile views aren't broken. Still, hopefully it'll get you started. You can see it in action here: https://codepen.io/willthemoor/full/JjGQjXEtable.ChoiceStructure { max-width: 95%;}table.ChoiceStructure,table.ChoiceStructure thead,table.ChoiceStructure tbody { display: block; width: 500px; overflow: hidden;}table.ChoiceStructure tr { display: block; float: right; width: 100%;}table.ChoiceStructure th, table.ChoiceStructure td { display: block; float: right; width: 25%;}table.ChoiceStructure tbody th { text-align: left; font-weight: 300;}
Give this CSS a shot..Skin .SkinInner { margin: 0 0 0 auto;}In case the default styles are winning the cascade battle, you can either append !important .Skin .SkinInner { margin: 0 0 0 auto !important;}or use a heavier base selector:.Skin #Wrapper .SkinInner { margin: 0 0 0 auto;}
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.
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
Sorry, our virus scanner detected that this file isn't safe to download.
