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

    Is it possible to change the color of just one form-matrix-column-headers

    Asked by servicejeunesse on March 21, 2012 at 12:00 PM

    Hello !
    in my form, I've got +/-20 form-matrix-column-headers but I just wouldlike to change the background color of ONE of them ? Is it possible to have the CSS code !

    Thank you very much for your help !

    A belgian man who tryes to speak english !

    Xavier

    Page URL:
    http://form.jotform.com/form/10540912507

  • Profile Image

    Answered by gori-mathew on March 21, 2012 at 01:05 PM

    Hello;

    In modifying the values of the border as you wish.  Refer to these pages for more colors: HTML Color Names ; http://www.html-color-names.com/color-chart.php | HTML Color Codes; http://htmlcolorcodes.org/

    To inject custom css:

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Copy and paste the css code in the Inject Custom CSS textarea

    Hope this information is helpful, please feel free to give us the feedback to assist you further!

    Thanks.

  • Profile Image

    Answered by servicejeunesse on March 22, 2012 at 04:33 AM

    Thank you very much for your answer but I would like to know if it's possible to apply a background color to just one of all my matrix column !

    for instance, for just one label, I know the CSS code is :
    #label_101 { color: grey; }

    But for just ONE a form-matrix column, what is the exact CSS code ?µ

    Thanks for your help :-)

    Xavier

  • Profile Image

    Answered by fxr on March 22, 2012 at 04:54 AM

    I think the only way you are going to be able to style a specific matrix column like that is by embedding the forms full source and giving the relevant columns their own class name & style that.

     

     

    You can style the rows individually but the columns will, unfortunately involve manual manipulation of the HTML. 

  • Profile Image

    Answered by servicejeunesse on March 22, 2012 at 05:07 AM

    Thank you Fxr ! and how is it possible to style a rows individually ? thanks to "inject custom CSS " ?

    Already many thanks for your support :-)

    xavier

  • Profile Image

    Answered by fxr on March 22, 2012 at 05:30 AM

    Something like this will style *all* your matrices' rows:

    .form-matrix-column-headers {background-color:red; background-image:none !important; }

    .form-matrix-values {background-color:green; background-image:none !important; }

     

    You can style individual matrix by adding the div they are in in front of the class rule e.g for the first matrix on your form :

     

    #cid_44 .form-matrix-column-headers {background-color:red; background-image:none !important; }

     

    #cid_44 .form-matrix-values {background-color:green; background-image:none !important; }

  • Profile Image

    Answered by servicejeunesse on March 22, 2012 at 05:54 AM

    I've tried this and it works for all my forms :
    .form-matrix-column-headers {background-color:red; background-image:none; }
    .form-matrix-values {background-color:green; background-image:none; }

    But when I want to apply to just one , it doesn't work. Heres is what I've written :
    #cid_63. form-matrix-column-headers {background-color:red; background-image:none; }
    #cid_63. form-matrix-values {background-color:green; background-image:none; }

    Is there a fault ? Thank you fxr !

  • Profile Image

    Answered by fxr on March 22, 2012 at 06:30 AM

    You seem to have your dot in slightly the wrong place.

    try:

    #cid_63 .form-matrix-column-headers {background-color:red; background-image:none; }
    #cid_63 .form-matrix-values {background-color:green; background-image:none; }

  • Profile Image

    Answered by servicejeunesse on March 22, 2012 at 06:39 AM

    I'm sorry Fxr but It doesn't work yet :-S

    At the moment, Ive'got that into my "inject custom CSS" :

    .form-header-group, .form-collapse-table, .form-pagebreak {
    color: black;
    }
    #cid_63 .form-matrix-column-headers {background-color:red; background-image:none; }
    #cid_63 .form-matrix-values {background-color:green; background-image:none; }.form-label-top {background-color:grey; background-image:none; }
    #label_25 { color: black; } #label_35 { color: black; } #label_27 { color: black; } #label_28 { color: black; } #label_32 { color: black; } #label_63 { color: black; } #label_64 { color: black; } #label_46 { color: black; } #label_50 { color: black; } #label_54 { color: black; } #label_44 { color: black; } #label_42 { color: black; } #label_66 { color: black; } #label_72 { color: black; } #label_76 { color: black; } #label_82 { color: black; } #label_89 { color: black; } #label_93 { color: black; } #label_97 { color: black; } #label_101 { color: black; }
    #label_48 { color: white; }
    #label_67 { color: white; }
    #label_52 { color: white; }
    #label_41 { color: white; }
    #label_70 { color: white; }
    #label_74 { color: white; }
    #label_91 { color: white; }
    #label_95 { color: white; }
    #label_99 { color: white; }

  • Profile Image

    Answered by servicejeunesse on March 22, 2012 at 06:42 AM

    The number is the same that the number of my label ? maybe that's the problem !

  • Profile Image
    JotForm Support

    Answered by idarktech on March 22, 2012 at 09:13 AM

    @servicejeunesse,

    Please try this:

     

    #cid_63.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 !important;

    }

    #cid_63.form-input-wide table.form-matrix-table tbody tr th.form-matrix-column-headers{

    background:red !important;

    }

    Check this sample: http://www.jotform.me/form/20813369722454?

    Hope this helps. Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on March 22, 2012 at 08:25 PM

    @Xavier

    I'm wondering if you might also have been referring to having alternately colored rows, as explained in the following:

    How to Easily Color Alternate Rows in a Table with JavaScript and CSS
    Advanced CSS Tables - Using CSS3 for Alternate Row Colors