Change Header Font Color

  • Profile Image
    dibyajyoti
    Asked on August 12, 2012 at 05:08 AM

    Hi!
    I want to change the font color of my Heading only. but the font color of all the text on the page changes. how do i stop that from happening? 

  • Profile Image
    idarktech
    Answered on August 12, 2012 at 05:15 AM

    Hi,

    Please use the following codes and inject it to your form:

     

    .form-header{

    color:blue !important;

    }

    .form-subheader{

    color:green !important;

    }

    Follow this guide: How to Inject Custom CSS Codes

    Just change the bolded colors to any color/HTML color you want.

    Thanks.

  • Profile Image
    dibyajyoti
    Answered on August 12, 2012 at 05:40 AM

    It didn't work. The template i'm using already has some existing CSS coding, I'm not sure I put it in the right place. But yh i copy pasted that. didn't change the color

  • Profile Image
    dibyajyoti
    Answered on August 12, 2012 at 05:43 AM

    Well thanks anyway, I edited in a different way by adding Free text . and its going well with the form. 

  • Profile Image
    idarktech
    Answered on August 12, 2012 at 05:46 AM

    That code should work, I can see here that the codes wasn't injected correctly. Anyway, glad to hear you've found another solution but I still suggest to remove those codes as they are no longer useful :). Thanks!

  • Profile Image
    dibyajyoti
    Answered on August 12, 2012 at 12:47 PM

    I'll remove them thanks!, Can you also tell me how I can change the white background to match the background color of my form. It looks odd kinda in the middle and so much white space on either sides. http://form.jotform.me/form/22242101930437

  • Profile Image
    javierf
    Answered on August 12, 2012 at 01:10 PM

    hello dibyajyoti,

    don't worry its because yout only watchin a preview when you take that to your website the white part will not visible. you can try changing the resolution of your web browser and you can see how that disappears its just a background the browser puts to compensate the size.

    I will be here for any doubt you may have.

  • Profile Image
    dibyajyoti
    Answered on August 12, 2012 at 01:18 PM

    Its not the preview. I have published the form, the link of the same is here [ http://form.jotform.me/form/22242101930437]. You can see that the form is in the middle and there is white space on either sides.

  • Profile Image
    jeanettebmz
    Answered on August 12, 2012 at 01:21 PM

    In order for you to remove the background and make it transparent , please inject this CSS custom code into your form:

     

    .form-line-active{
    background:transparent;
    }

    .form-error-message {
    background-color:transparent !important;
    }

    .form-line-error {
    background:none repeat scroll 0 0;
    }


    .form-error-message {
    display: none !important;
    }


    Should you need further assistance, let us know

    Jeanette

  • Profile Image
    jeanettebmz
    Answered on August 12, 2012 at 01:31 PM

    Another way to sort out that issue would be inject a custom css code to accomplish that, 

    Please see this example 

    You would need make a picture with your form pattern (no need to add the other css codes) and insert it after body,html , as shown below

    .form-all{
    background-image:url('http://www.thinkgraymatter.com/Footer/Footer-RGB81-Pattern.png');
    }

    .form-line {
    background:transparent; }

    .form-line {
    padding-left: 0px !important;
    padding-right: 0px !important;
    }

    body, html{
    background-image:url('http://www.thinkgraymatter.com/Footer/Footer-RGB81-Pattern.png')!important;
    }

    #input_1.form-textbox{
    background:#CCCCCC !important;
    }

    #input_8.form-textbox{
    background:#CCCCCC !important;
    }

    textarea#input_9.form-textarea{
    background:#CCCCCC !important;
    }