-
rpaul99Asked on June 30, 2016 at 10:38 AM
I want to change the color of every other column in my Matrix Dynamique. Is there a way to stylize the matrix?
-
Welvin Support Team LeadReplied on June 30, 2016 at 12:22 PM
Yes, by injecting a custom CSS codes in the widget. Here's an example: https://form.jotform.com/61814804896971.
The actual CSS which you can use to your form are the following:
For the headers. I have 4 headers so notice the line th.c0 and so on. You have 11 headers so you need to add up to 10 of this selector with the background color.
th.c0 {
background: #ff3200;
}
th.c1 {
background: #fc9e32;
}
th.c2 {
background: #0064f0;
}
th.c3 {
background: #fcc932;
}
For the answers. I have four answer columns so notice the line td:nth-child(1) and so on. You need to do the same for the rest, just replace 1 with the column number.
tbody > tr > td:nth-child(1) {
background: #ff3200;
}
tbody > tr > td:nth-child(2) {
background: #fc9e32;
}
tbody > tr > td:nth-child(3) {
background: #0064f0;
}
tbody > tr > td:nth-child(4) {
background: #fcc932;
}
Let us know if you need any further assistance.
-
Welvin Support Team LeadReplied on June 30, 2016 at 12:28 PM
I forgot to add the background of the input boxes, you can add the following:
td.c0 {
background: #ff3200;
}
td.c1 {
background: #fc9e32;
}
td.c2{
background: #0064f0;
}
td.c3 {
background: #fcc932;
}
Just change the colors to your preferred ones.