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

    Changing color matrix field areas

    Asked by YummyGarden on August 30, 2012 at 08:31 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 align the columns text to line up with the fields? See how it looks weird?

     


    Page URL:
    http://jotform.us/form/22275973169161

    Screenshot
  • Profile Image
    JotForm Support

    Answered by jonathan on August 30, 2012 at 10:49 PM

    Hi,

    There was already some CSS code injected on your form that makes it appear as such.

    Since you probably needed the current styling applied on the form, you may want to create a clone of it first, then start modifying the CSS codes. On the cloned form, you can start clean on the CSS, then gradually put back the styling you need.

    As it is now, the class .form-all was included in the CSS of the original form. This means that everything was being overidden by the code on that class.

    Anyway, I did test using your form. I remove first all the CSS code, and only applied this.

    .form-matrix-column-headers {

    background:

    url(http://fc00.deviantart.net/fs9/i/2006/039/c/c/Black_Stripes_by_iAmFreeman.jpg)

    repeat top left fixed;

    border: 1px solid #CCC;

    color: inherit !important;}.form-matrix-values {background:transparent !important;}.form-matrix-values .form-textbox {width: 80% !important;}

     

    This is the form.

    I am sure you can improvi it much better. Pleae inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by YummyGarden on August 31, 2012 at 12:11 AM

    Hello,

     

    I think there was a misunderstanding. Where is says Product/Service has a bluish gray backgound color as well as where the columns says Merchandise and Description also has the color behind the text. I wish for those areas only to be transparent.

    I also need  the columns Merchandise and Description to be better aligned over the fields, as they are far over to the left and not in the center.

    Thx

  • Profile Image

    Answered by fxr on August 31, 2012 at 03:22 AM

    Try this CSS: 

    .form-matrix-column-headers,.form-matrix-row-headers{background-color:transparent !important; text-align:center;}

  • Profile Image

    Answered by YummyGarden on August 31, 2012 at 11:40 AM

    That worked out perfectly!

    Thank you. However, the font is too dark to read now. How do I change the font color of just the matrix text? Also, when an applicant selects a product, the font changes from white to a darker color and is no longer visible. How do I fix that?

    THANKS!

  • Profile Image
    JotForm Support

    Answered by Goldo on August 31, 2012 at 01:06 PM

    Add the below css to the existing ones:

    .form-matrix-column-headers{
    color: white!important;
    }
    .form-matrix-row-headers{
    color: white!important;
    }

    You can change white to any color you want.