Restyling profile matrix buttons | XM Community
Solved

Restyling profile matrix buttons

  • 10 April 2024
  • 2 replies
  • 20 views
O
Badge +1

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>

icon

Best answer by vgayraud 11 April 2024, 08:37

View original

2 replies

vgayraud
Rank
Userlevel 6
Badge +39 
<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>

 

Vincent Gayraud
O
Badge +1

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