Change Form header color

  • Profile Image
    ipbr21054
    Asked on September 22, 2013 at 04:57 PM

    I have 2 forms of which the header on both forms are the colour red.

    I am trying to change them both to #3366FF blue

    I have looked but i cant see where it needs to be changed.

     

    Any help would be nice.

  • Profile Image
    khrisell
    Answered on September 22, 2013 at 06:50 PM

    Hello,

    To be able to change the color of your header background color to blue,

    1. Click the Free text Field.

    2. Click Edit HTML

    Then.. 

    Insert this tags to the HTML Source Editor of your Free Text Field.

    <div style="width: 100%; height: 100%; background-color: blue; text-align: center;">

     

     

     

    Then click Update.

    Now you will be able to see the background of your header will change to blue.

    Kindly let us know if you need further assistace.

    Thank you for using JotForm. 

  • Profile Image
    ipbr21054
    Answered on September 23, 2013 at 04:04 AM

    I have found the free text field.

    Also i mentioned blue but cant you add a code #3366FF which will then matche with my site as supposed to just a generic blue without a choice of shade of blue ?

  • Profile Image
    pinoytech
    Answered on September 23, 2013 at 07:28 AM

    Hi,

    Which form you are referring? Can you please share to us the URL for further assistance?

    Thank you!

  • Profile Image
    ipbr21054
    Answered on September 23, 2013 at 08:41 AM

    Hi

    Here are the 2 forms.

    http://form.jotformeu.com/form/32651513003339

    http://www.theremotedoctor.co.uk/fordcontact.html

    Depending once the blue has been added i may require a different text colour.

    All depends how it looks.

    You may edit my 2 forms if you like.

     

    I am trying to get the blue from the scrolling field background on theis page.

    http://www.theremotedoctor.co.uk/

  • Profile Image
    guilledutra
    Answered on September 23, 2013 at 10:52 AM

    Hi,

    Form: http://form.jotformeu.com/form/32651513003339

    Locate this custom css code:

    #text_6 div {
    background: red;
    border: 1px dashed #000;
    margin-left: 3px;
    border-radius: 2px;
    padding-bottom: 3px;
    padding-top: 3px;

    }

    and replace it with:

    #text_6 div {
    background: #3366FF;
    border: 1px dashed #000;
    margin-left: 3px;
    border-radius: 2px;
    padding-bottom: 3px;
    padding-top: 3px;
    color: YOUR FONT COLOR HERE !important;

    }

    The same applies to http://www.theremotedoctor.co.uk/fordcontact.html

    Use this guide to locate the code:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope it helps

    please let us know if you need further assistance

    thanks

  • Profile Image
    ipbr21054
    Answered on September 23, 2013 at 11:07 AM

    Many thanks.

     

    Am i also able to add the #3366FF to the submit button on web page

    http://form.jotformeu.com/form/32651513003339

    Please advise code to look for and also font colour code to look for.

     

    Thanks again

  • Profile Image
    ipbr21054
    Answered on September 23, 2013 at 12:53 PM

    I have managed to find how to edite the background colour of the submit button.

    Can you advise why when i add color:white  !important; the text still shows black ?

    This is where i made the edit.

    #id_6 {
    text-align: center !important;
    font-weight: bold !important;
    font-size: 25px !important;
    color: white!important;
    font-family: arial !important;
    padding: 0px !important;
    max-width: 416px;
    }

  • Profile Image
    Welvin
    Answered on September 23, 2013 at 03:45 PM

    Hi,

    Add this to your form custom CSS codes: 

    .form-submit-button, {

    color: #FFF !important;

    }

    Here's the output:

     

    Thanks

  • Profile Image
    Welvin
    Answered on September 23, 2013 at 03:47 PM

    If you'll see any missing colors customization from your form, please kindly open a new thread so we can assist you further. We require new threads for every issues/inquiry. Unless if it's a general inquiry about Jotform functions/features.

    Thanks

  • Profile Image
    abajan
    Answered on September 23, 2013 at 04:24 PM

    @ipbr21054

    Insofar as the submit button's text is concerned, there are conflicting rules in your CSS. The following rule appears in one section:

    .form-submit-button {
    margin-top: 0px !important;
    cursor: pointer;
    width: 150px;
    padding: 5px;
    background: transparent;
    border: 1px dashed #7A7246;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color:#00ABEE !important;
    font-weight: bold;
    font-family: verdana;
    font-size: 13px;
    opacity:0.5;
    filter:alpha(opacity=40);
    }

    Then the rule immediately following states:

    .form-submit-button{
    background-color: #3366FF;
    opacity:100;
    filter:alpha(opacity=100);
    color: white!important;
    }

    Then there's a third rule targeting the same element:

    .form-submit-button, .form-submit-button-simple_red  {
    color:#000 !important;
    text-shadow: none !important;
    }

    As you can see, all three declarations are different. However, the last rule will override the others because of how the cascade works. Thus the black text.

    Anyway, like my colleague Welvin said, please open a new thread if you need to further discuss this because the original topic of this thread has nothing to do with the submit button.


    Thanks

  • Profile Image
    ipbr21054
    Answered on September 23, 2013 at 05:44 PM

    New thread started as requested.

    http://www.jotform.com/answers/271279-Submit-button-font-colour-change#0

  • Profile Image
    pinoytech
    Answered on September 23, 2013 at 06:32 PM

    Hi,

    Please refer on the link bellow for my response about submit button issue.

    http://www.jotform.me/answers/271279

    Thank you!