Hi All! I am teaching myself how to write CSS code for qualtrics surveys and so far not doing too badly (thanks to this community). Where I am primarily stuck is knowing what the label (skin) names are for each of the question types and elements.
I have listed some of them below and I am sort of figuring out what each of these elements represent, but it is hit or miss in some cases. I also find that I am missing some, or unable to change certain things. there must be a master reference list somewhere, yes? Can someone help?
.Skin .InputText
.Skin label.MultipleAnswer
.Skin label.MultipleAnswer.q-focused
.Skin label.SingleAnswer
.Skin label.q-checkbox
.Skin label.q-radio
.Skin .Matrix .table-cell
.Skin .q-matrix .answered-indicator span
.Skin .q-matrix .table-cell
I’d love a comprehensive reply to this!
I’d love a comprehensive reply to this!
I do think there’s a master reference list somewhere but it should be a Qualtrics internal document. I mean they have their own customize service, can’t public that element list.
Meanwhile we just gonna inspect everything with F12, a little investigation.
You can view the entire stylesheet if you want by inspecting an element with F12 and then opening the stylesheet.css in a new browser tab. Below is the one in place for the surveys on the Qualtrics template page.
https://qwebsite.qualtrics.com/jfe/themes/skins/qwebsite/qxm_2/version-1649633096689-bd2e94/stylesheet.css
To see the parsed/beautified version of the stylesheet, just click on the stylesheet.css to view in the Sources tab of the Developer Console instead of opening in a new browser tab. Or, hit F12 to open the Developer Console, go the the Network tab, filter for CSS requests, and then Preview. You might need to Ctrl+R in this view to record the loading of the stylesheet.
Also, using Developer Console in Chrome, you can click the 3 vertical dots in the top right, then "More Tools", then "CSS Overview" to get an idea of how many Style rules are in place, various colors being used, etc.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.