Customize font color and size in certain fields

  • Profile Image
    Arion444
    Asked on October 07, 2014 at 05:59 AM

    I need to know how to change HTML coding on some of the text in the form I've embedded on my Weebly site. Compare the embedded form to the form in my account, and you can see that with the coloured background some of the text is illegible.

    Thanks,
    Isaac

     

  • Profile Image
    Ben
    Answered on October 07, 2014 at 09:20 AM

    Hi Isaac

    I took a look at your website and I see what you mean, with some colors just barely being seen.

    Since you might want to change the color to some others I will list each CSS code for each section that it covers.

    To change the color of the heading element at the very top:

    .form-header-group h2
    {
        color: white;
    }

    That will change this text "Kundalini Reiki Class Cork Nov 23 2014" to white.

    To change the color of the options at the bottom of the jotform:

    span.form-radio-item > label
    {
        color: white;
    }

    That will change "Yes" and "No" to white.

    Now next code is to change all the labels if you want to:

    .form-line > label
    {
        color: white;
    }

    This will change the label such as "E-Mail", "Mobile Number", etc to white color.

    You can see how to add it to your jotform here Inject Custom CSS Codes.

    Do let us know if this works for you and if you have any further questions.

    Best Regards,
    Ben

  • Profile Image
    Arion444
    Answered on October 07, 2014 at 09:49 AM

    I found the line "form-line>label" and changed that color, but I can't seem to these two pieces in the code. I'm using Source code.

    form-header-group h2
    {
        color: white;
    }

    and

    span.form-radio-item > label
    {
        color: white;
    }

     

  • Profile Image
    Arion444
    Answered on October 07, 2014 at 09:53 AM

    Just uploaded the site with the one change made, and it appears to have fixed all three fields. Thanks!

  • Profile Image
    Ben
    Answered on October 07, 2014 at 11:02 AM

    Hi Isaac,

    You are welcome.

    I am glad that it worked for you. Now in regards to the code, I see now that the link I added was not shown in the post above so I am adding it here again.

    You can inject that into your code following these steps: Inject Custom CSS Codes

    Once you add them, click to get your source code and all the changes will be included in the files.

    Do let us know if you have any further questions.

    Best Regards,
    Ben