What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    how can I change the color in matrix tables?

    Asked by Forthenvironmentlink 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

    matrix custom css change matrix color apply CSS fields apply custom CSS
  • Profile Image

    Answered by pinoytech 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

    Answered by Forthenvironmentlink 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
    JotForm Support

    Answered by abajan 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
    JotForm Support

    Answered by abajan 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

    Answered by Forthenvironmentlink on June 08, 2012 at 07:29 AM

    Thanks!!

  • Profile Image

    Answered by pinoytech 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

    Answered by YummyGarden 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

    Answered by jeanettebmz 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

    Answered by jeanettebmz 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