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

  • 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

  • Jeanette JotForm Support
    Replied on May 16, 2014 at 3: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 Screenshot 10

     

    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;
    }

  • safa
    Replied on July 17, 2015 at 7:07 PM

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