how can I change the color in matrix tables?

  • Profile Image
    Forthenvironmentlink
    Asked on June 07, 2012 at 11:38 AM

    Hi,

     

    this is my form id 21581768023353, you can see that all text area is #E6FFE6, but somehow the table are still blue...how can I change this?

    Thanks

     

    Amparo

  • Profile Image
    pinoytech
    Answered on June 07, 2012 at 01:46 PM

    Hi,

    You can use this custom css and inject it in your form.

    #cid_21 .form-textbox, .form-textarea, .form-upload, .form-dropdown, .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values {background-color:#E6FFE6 !important;}

    Hope you find this helpful and if you need further assistance, feel free to contact us again.

    Thank you!

  • Profile Image
    Forthenvironmentlink
    Answered on June 08, 2012 at 05:11 AM

    Hi,

    Thanks for your reply, it worked, but at the same time it change the colour of the font for the header. It should eb white but instead it's grey.

    Hope you can help!

     

    Amparo

  • Profile Image
    abajan
    Answered on June 08, 2012 at 05:41 AM

    Hi Amparo

    Your CSS contains some errors which might be partly responsible for this but I'll peruse it and get back to you with the updated code.

    In the meantime, please be aware of these 15 surefire ways to break your CSS.


    Wayne

  • Profile Image
    abajan
    Answered on June 08, 2012 at 07:03 AM

    Amparo

    Please replace all of your injected CSS with the following and save the form:

    .form-matrix-values
    .form-textbox {
    width: 200px;
    background: #FFF !important;
    }

    .form-textbox,
    .form-textarea,
    .form-upload,
    .form-dropdown,
    .form-matrix-column-headers,
    .form-matrix-row-headers,
    .form-matrix-values {
    background: #90AA43 !important;
    }

    #form-pagebreak-next_95 {
    display: none;
    }

    .form-header-group {
    background: #4E4E00;
    }

    .form-header {
    color: #FFF;
    }

    If you need further help with this, do let us know.

  • Profile Image
    Forthenvironmentlink
    Answered on June 08, 2012 at 07:29 AM

    Thanks!!

  • Profile Image
    pinoytech
    Answered on June 08, 2012 at 02:58 PM

    You're welcome! If you need our help, please don't hesitate to contact us again anytime.

    Thank you for using JotForm!

  • Profile Image
    YummyGarden
    Answered on August 16, 2012 at 02:08 PM

    How do you change the color of just the matrix and not the other form fields? I would also prefer that the color not be behind the rows and columns text either. How do I move over the columns text to line up with the fields? See how it looks weird?

     

    THX

  • Profile Image
    jeanettebmz
    Answered on August 16, 2012 at 05:47 PM

    @YummyGarden

    You can always take advantage of the "inspect element" or "show source code" features any browser comes with, in order to know exactly which class or element we should apply CSS rules

    So open your form and inspect the source code , see the example below:

     

    As for example :

    .form-matrix-column-headers  = will change the Column headers properties
    .form-matrix-row-headers = will change the Row Header Properties
    .form-matrix-values = will change cell properties

    So, for my form , I've applied this color codes to cells, headers and text

    .form-matrix-column-headers,
    .form-matrix-row-headers,
    .form-matrix-values {
    background: #66CCCC !important;
    color:     #000000 !important;
    }

  • Profile Image
    jeanettebmz
    Answered on August 16, 2012 at 05:49 PM

    Note: For further assistance to your particular case, please open a separate thread. Please provide with further details such us FormID or the URL of the page where the form is embedded

    Jeanette