Restyling profile matrix buttons | XM Community
Skip to main content

Hey all –

Trying to style the buttons in a profile-type matrix question so each column is a different color. (ie column 1 is green when selected, column 2 yellow etc etc)

I’ve found this plus the snippet below and can get something similar to work for multi choice questions, but can’t figure out the right CSS classes I need for profile question. Any help appreciated!

 

<style>

.Skin #QID14 tr td.LabelContainer:nth-child(1) label.MultipleAnswer.q-checked, .Skin #QID14 tr td.LabelContainer:nth-child(1) label.SingleAnswer.q-checked{background-color:red;}

.Skin #QID14 tr td.LabelContainer:nth-child(2) label.MultipleAnswer.q-checked, .Skin #QID14 tr td.LabelContainer:nth-child(2) label.SingleAnswer.q-checked{background-color:red;}

.Skin #QID14 tr td.LabelContainer:nth-child(3) label.MultipleAnswer.q-checked, .Skin #QID14 tr td.LabelContainer:nth-child(3) label.SingleAnswer.q-checked{background-color:yellow;}

.Skin #QID14 tr td.LabelContainer:nth-child(4) label.MultipleAnswer.q-checked, .Skin #QID14 tr td.LabelContainer:nth-child(4) label.SingleAnswer.q-checked{background-color:grey;}

.Skin #QID14 tr td.LabelContainer:nth-child(5) label.MultipleAnswer.q-checked, .Skin #QID14 tr td.LabelContainer:nth-child(5) label.SingleAnswer.q-checked{background-color:green;}

</style>

<style type="text/css">
.Skin #QID1 tr th:nth-child(2) label.MultipleAnswer.q-checked, .Skin #QID1 tr th:nth-child(2) label.SingleAnswer.q-checked{background-color:red;}
</style>

 

Hero. Thanks!!

For anyone finding this in the future, for profile-style tables the 2 (as in tr th:nth-child(2)) is the first column of buttons, since the first column in in the table is the statements. 

Leave a Reply


Terms & Conditions