How to change the color of the row in the matrix question

  • Profile Image
    mbas123
    Asked on April 29, 2015 at 12:56 AM

    Hi,

    I want to change the color of the row alternately of the Matrix type question and also want to put some color in the first column, first row of the matrix. Can I do that see pics below.

     

    Thanks,

    Rey Galvez

     

     

  • Profile Image
    Sammy
    Answered on April 29, 2015 at 05:04 AM

    Hi Galvez,

    To change the matrix background color, you can inject custom CSS that alters the classes colors for the rows.

    .form-matrix-column-headers {
        background : #D4594E !important;
        color : #FFF;
    }

    .form-matrix-row-headers {
        background-color : #FBFBE6 !important;
    }


    .form-matrix-table th {
        background : green;
    }

    Inject the above code to your form and test .

    Thanks

  • Profile Image
    mbas123
    Answered on April 30, 2015 at 12:33 PM

    Hi,

    Thanks, how to change the color of the rows alternately.

    Rey Galvez

  • Profile Image
    Mike_G
    Answered on April 30, 2015 at 02:19 PM

    Hi, Rey Galvez, 

    I understand that you would like for the Matrix table on your form to look like this: 

    In order for you to do that you need to add this following CSS code and you may use this guide.

    .form-matrix-table tr:nth-child(odd) td {

    background-color: #2F75B5;

    }

    .form-matrix-table tr:nth-child(even) td {

    background-color: #5B9BD5;

    }

    After applying the codes above, you Matrix table should look like this. (Please see image below)

    Note: You can, of course, replace the background-color to your preference.

    I hope this helps. Should you need any further assistance, kindly let us know and we will be glad to help.

     

    Thank you for using JotForm.

     

    Kind regards.