How can I change the font color and background color for section headings?

  • Profile Image
    hphanpeterson
    Asked on January 08, 2014 at 04:13 PM

    I don't see a way to do this.  Thanks.

  • Profile Image
    EliezerN
    Answered on January 08, 2014 at 05:48 PM

    If you wish to change the font and background color only for the Heading, then you need to inject CSS codes. So, to accomplish that please use this code:

    .form-header

    {

    color: #C20453 important;

    background-color:#B1E3D2 !important;

    }

    You can change the colors to the desired ones. You can use this color picker: http://www.colorpicker.com/796DF7

    Here is how to inject CSS codes to your form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please inform us  if you need further assistance.

    Thanks

  • Profile Image
    hphanpeterson
    Answered on January 08, 2014 at 06:29 PM
    Thank you, Eliezer. This is helpful. I will try this when I get back in front of my computer.
    Heidi
    Sent from my iPhone
    ...
  • Profile Image
    hphanpeterson
    Answered on January 16, 2014 at 07:23 AM
    Eliezer,
    I followed your instructions, selecting my own colors from the helpful color-picker site, but it seems that font doesn't change color and in terms of the "background" color, this only has the impact of giving the words a highlighted effect. So, the header box fill-in color does not change. Are you certain that the code you provided is correct? Or have you an idea of what I may have done incorrectly? I copied and pasted exactly as you instructed, and only changed the color code.
    Also, is there a resource that would help me figure out these basic codes, so I don't have to bother you guys so much? I have a few other changes that I would like to make to the form.
    Thank you!

    Heidi Phan
    (415) 816-5047 (mobile)
    ...
  • Profile Image
    EliezerN
    Answered on January 16, 2014 at 09:17 AM

    Hi Heidi, 

    Please accept my apologies, it seems the mistake was from my side. The code was not quite correct. So here is the correct one:

    .form-header-group

    {

    color: #C20453 !important;

    background:#FFCC66!important;

    }

    Just make sure to change the colors to the desired ones. You can find more suggestions of CSS codes to customize your form here: Customize your Form using Custom CSS Codes

    Inform us if you need further assistance.

    Thanks