Restyling profile matrix buttons | XM Community
Skip to main content
Solved

Restyling profile matrix buttons

  • April 10, 2024
  • 2 replies
  • 46 views
O
Forum|alt.badge.img+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>

Best answer by vgayraud

<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>

 

2 replies

vgayraud
QPN Level 6 ●●●●●●
Forum|alt.badge.img+58
  • vgayraud
  • QPN Level 6 ●●●●●●
  • 549 replies
  • Answer
  • April 11, 2024
<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
Forum|alt.badge.img+1
  • oskr
  • Author
  • 1 reply
  • April 11, 2024

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. 


Terms & ConditionsAccessibility statement