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 of the column headers in a four column matrix

    Asked by metrocorephone on September 16, 2013 at 11:15 PM

    I was able to find CSS to change one column but I haven't been able to figure out how to make the headers Green, Yellow, Orange and Red. 

    #cid_1.form-input-wide table.form-matrix-table tbody tr th.form-matrix-column-headers+th{background: url(../../images/styles/style1_txt_bg.gif) #F6F6F6 top repeat-x ;} #cid_1.form-input-wide table.form-matrix-table tbody tr th.form-matrix-column-headers{background:red ;}

    Thanks 

    Page URL:
    http://form.jotform.co/form/32575800409858

    style size table font
  • Profile Image
    JotForm Support

    Answered by abajan on September 16, 2013 at 11:31 PM

    Hi,

    Please replace all of the form's injected CSS with the following and let us know if it's okay:

    #cid_1 table tbody tr th + th {
    background: green;
    }

    #cid_1 table tbody tr th + th + th {
    background: yellow;
    }

    #cid_1 table tbody tr th + th + th + th {
    background: orange;
    }

    #cid_1 table tbody tr th + th + th + th + th {
    background: red;
    }


    Thanks

  • Profile Image

    Answered by metrocorephone on September 17, 2013 at 08:15 PM

    That worked like a charm.

    I really need to learn more about CSS. Can you recommend an online resource?

    Thanks for your help.

  • Profile Image

    Answered by khrisell on September 17, 2013 at 09:40 PM

    Hello,

    In behalf of abajan, you are most welcome. :)

    There is a lot of resources you can find from the internet.

    But the best I can recommend is http://www.w3schools.com/css/

    But there are a lot of resources and good thing about it is most of it is free.

    You can enroll also for paid lessons for more intensive coding.

    Feel free to let us know if you have further questions or inquiry.

    If it is a new topic, please open a new thread to assist you accordingly and avoid any confusion.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by abajan on September 18, 2013 at 01:44 AM

    @metrocorephone

    I usually recommend MaxDesign's CSS tutorials. (In addition to the various links, be sure to view the three presentations at the bottom of that page.)

    As to how the solution to the matrix heading colors was found, I went to the form's URL and right-clicked the first heading (it's actually the second heading, as the first one at the top left corner is invisible) and then clicked Inspect element:

    By examining the hierarchy of the code in the pane that opened in the bottom of the browser, I was able to determine the required selector to target that element:

    The highlighted line is a table header (th) which follows another th on the same hierarchical level (in other words, that other th is the preceding sibling of the one being inspected.) The preceding sibling is a descendant of a table row (tr) which is a descendant of a table body (tbody) which is a descendant of a table which is a descendant of a division (div) whose ID is cid_1. In CSS, IDs are prepended with a hash (octothorpe).

    Let's have another look at the first rule in the CSS I provided:

    #cid_1 table tbody tr th + th {
    background: green;
    }

    It's telling the browser, "In the document (web page), look for all table headers which follow another table header that's a descendant of a table body that's a descendant of a table that's a descendant of the element whose ID is cid_1, and color its background green."

    Were we to inject just that rule and omit the others, all of the table headers following the first one would have a green background. In order to target just the second table header the rule would have had to have been

    #cid_1 table tbody tr th:first-child + th {
    background: green;
    }

    or

    #cid_1 table tbody tr th:nth-child(1) + th {
    background: green;
    }

    This speaks to specificity.

    Anyway, that's basically how it works. The second, third and fourth rules of the CSS I provided earlier target the 3rd, 4th and 5th headers respectively in similar fashion.

    Here's more info on :first-child and :nth-child(n)

    If you'd like further help with the form, please let us know.


    Cheers