Can I change the column color on specific columns in a Matrix Dynamique?

  • Profile Image
    rpaul99
    Asked 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?

  • Profile Image
    Welvin
    Answered 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.

  • Profile Image
    Welvin
    Answered 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.