Changing CSS/colours for Input Table and Question headings

  • Jordan_Stewart
    Asked on October 18, 2018 at 12:21 AM

    Hi there, just wanted to ask for styling purposes if it was possible to change the colors of tables and headers for questions, as our corporate branding requires specific heading types to be specific colors, and I just want to change the table colors entirely.

     

    Kind Regards,

     

    Jordan

     

    Thanks for the response Mike, I've attached two images that I seek to some-what replicate within my form, one which is a standard table of data (all fields are un-editable and filled, while the other will be the input table).

    Normal Table (perhaps maybe not as bland, just with these colour options)

    15399051952018 10 19 10 26 11 Screenshot 10

     

    Input Table (perhaps maybe not as bland, just with these colour options)

    Changing CSS/colours for Input Table and Question headings Image 21

     

    If something like this could be achieved that'd be really great.

     

    Additionally in another thread, I asked if it was possible to change the colour of a question title, but i'm not exactly sure how to achieve this in CSS so any help with that would be really appreciated

     

  • Mike_G JotForm Support
    Replied on October 18, 2018 at 2:39 AM

    Changing the color of the table and the texts in the input table field is possible using Custom CSS codes.

    How-to-Inject-Custom-CSS-Codes

    I see that you only have one form in your account with only 1 input table field. You can also give us the details and we will be glad to help you style your form.

  • Jordan_Stewart
    Replied on October 18, 2018 at 7:28 PM

    Thanks for the response Mike, I've attached two images that I seek to some-what replicate within my form, one which is a standard table of data (all fields are un-editable and filled, while the other will be the input table).

    Normal Table (perhaps maybe not as bland, just with these colour options)

    15399051952018 10 19 10 26 11 Screenshot 10


    Input Table (perhaps maybe not as bland, just with these colour options)

    Changing CSS/colours for Input Table and Question headings Image 21


    If something like this could be achieved that'd be really great.


    Additionally in another thread, I asked if it was possible to change the colour of a question title, but i'm not exactly sure how to achieve this in CSS so any help with that would be really appreciated


  • Kiran Support Team Lead
    Replied on October 18, 2018 at 11:14 PM

    Since you are using the Text field for displaying the table data, you may customize the look from the source code of the Text field as shown in the following screenshot using the code provided below that can be applied for header <tr> tag:

    style="background-color: #32849c; color: #fff;"

    15399182211614781 customCSS Screenshot 10

    For the input table field, please try adding the following CSS code to the form.

    .form-matrix-column-headers {

    background-color: #32849c;

    color: #fff;

    }

    .form-matrix-values input {

        background-color: #fff;

    }

    The input tables on the form should be displaying as below:

    153991886519102018 081009 Screenshot 21

    Hope this information helps!