How can I change the light yellow background of the Contact Form with Blue Envelope Theme?

  • Profile Image
    ninaonline
    Asked on May 16, 2014 at 12:25 PM

    Hello,

    I want to change the light yellow background of the Contact Form with Blue Envelope Theme to white?  I am not talking about the background color behind the form (currently white), which can be changed in the JotForm editor in Form Style > Background.

     

    Thanks,

    Nina

  • Profile Image
    Jeanette
    Answered on May 16, 2014 at 03:35 PM

    You cannot change the yellow color, as this is an image, sliced in 3 files:

    https://shots.jotform.com/elton/images/bg_envelope_02.gifhttps://shots.jotform.com/elton/images/bg_envelope_wrapper.gif

    https://shots.jotform.com/elton/images/bg_envelope_11.gif

    So you must download the images, and edit them with a photo editor (such as Photoshop or GIMP) in order to change the color.

    https://shots.jotform.com/elton/images/bg_envelope_11.gif

     

    Once you are done, upload them, get the URL (you can use dropbox or gdrive), and replace the URL files in the Custom CSS code, make sure you keep the format (gif)

    .form-all{
    padding-top: 0;
    font-family:"Verdana", sans-serif;
    }
    /*--red border on error--*/
    .form-validation-error {
    border: 1px solid #FFB0B0 !important;
    }
    /*---form textbox styles fixed---*/.form-textarea, .form-textbox  {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 4px;
    background:transparent !important;
    width:100%;
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    border: 1px solid #AEAEAE;
    color: #333;
    font-family:"Verdana", sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }ul.form-section li.form-line:first-child {
    background:url('https://shots.jotform.com/elton/images/bg_envelope_02.gif') no-repeat 0 2px;
    }.form-line{
    background:url('https://shots.jotform.com/elton/images/bg_envelope_wrapper.gif') repeat-y;
    }/*---remove error message---*/
    .form-error-message {
    display: none !important;
    }
    .form-line-error {
    background: url('https://shots.jotform.com/elton/images/bg_envelope_wrapper.gif') repeat-y;
    }/*---submit button move--*/
    .form-submit-button{
    margin-top:60px;
    cursor: pointer;

    }.form-textarea:focus, .form-textbox:focus{
    outline:none !important;
    }/*--fix captcha--*/.form-captcha .form-textbox{
    width:130px !important;
    }
    .form-line {
    padding: 6px 28px 6px 30px;
    width: auto;
    }
    .form-buttons-wrapper{
    text-align:center !important;
    background: url('https://shots.jotform.com/elton/images/bg_envelope_11.gif') no-repeat 32px -10px;
    height: 315px;
    margin: -10px -100px -8px -100px;
    }
    .form-button-error {
    position: absolute;
    top: 120px;
    left: 131px;
    width: 195px;
    }

  • Profile Image
    safa 
    Answered on July 17, 2015 at 07:07 PM

    hi tnx alot I have one question . where should I copy this code that you writed up ?