I want to change the external background of a form

  • Profile Image
    idanfactor
    Asked on November 24, 2011 at 08:25 AM

    Not it's white.
    Check it out.
    http://awesomescreenshot.com/0beoyop35



     

  • Profile Image
    abajan
    Answered on November 24, 2011 at 10:36 AM

    It appears that you have already fixed the problem by injecting body, html {background:#353535;} because none of my browsers displayed that portion as white. Incidentally, on the web page in question, the background of the division (div) that contains the form is actually rgb(54, 54, 54); which is equivalent to #363636 and not #353535 (when I viewed the page my eyes immediately detected the subtle difference).

    More importantly, while checking the page in different browsers, I noticed that in Firefox 8 and Opera 11 a significant portion of the lower section of the form was not being displayed. I'll have to more closely check the injected CSS to see what solutions I can come up with.

  • Profile Image
    idanfactor
    Answered on November 24, 2011 at 11:21 AM

    I fix the problem you mentioned.
    There is a bug in Jotform when NOT using iframe to embed the form.
    Now it's working fine. 
    Check it out.

    Thanks for the color remark!! :)

    Abajan, you're the greatest! I need to buy a poster of you... Really. :)

  • Profile Image
    abajan
    Answered on November 24, 2011 at 01:29 PM

    Here is a clone of your form that shows the multiupload and submit buttons repositioned. Also, some of our users may not be aware that, thanks to emrew86, it is now possible to edit the text on multiupload buttons. Frengly.com was used for the translation of the button's text and to edit the text of its label but I don't know if the translations are correct.

    Here is the total injected CSS of the clone:

    body, html {
    background:#363636;
    }
    .p {
    margin:0;
    }
    .form-all {
    text-align:right;
    margin-right:0;
    float:right;
    background-color:#E8E8E8;
    border:1px solid gray;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    border-radius:15px;
    margin-top:5px;
    padding-bottom:5px;
    padding-top:0;
    }
    .form-label-left {
    float:right;
    text-align:right;
    }
    .form-input {
    float:right;
    text-align:right;
    font-size:10px;
    }
    .form-buttons-wrapper {
    margin-left:80px;
    }
    .form-submit-button {
    border:1px solid #300;
    font-size:12px;
    }
    .input {
    font-size:10px;
    }
    .form-textbox,
    .form-text-area {
    font-size:10px;
    direction:rtl;
    align:right;
    font-family:Arial, sans-serif;
    }
    .qq-uploader {
    float:right;
    }

    I highlighted .form-buttons-wrapper because I think that's the selector in your original CSS where the dot was on one line and the text on next. In order for the selector to work, there must be no space between the dot and text.


    P.S. My poster is available at Target and other fine stores. LOL

  • Profile Image
    idanfactor
    Answered on November 24, 2011 at 02:08 PM

    Thanks for CSS code, I didn't ask for that and you helped me... What a great man are you.
    I didn't use the form-buttons-wrapper. Do I really need it?

    Abajan, Look what I found when searching for "Best T-shirt ever" in Google:

     
    What do you think? To buy it?

  • Profile Image
    fxr
    Answered on November 24, 2011 at 05:21 PM

    haha brillant!

    We will leave this in our inbox until the man himself see's it. 

  • Profile Image
    abajan
    Answered on November 24, 2011 at 07:58 PM

    Oh great, idanfactor. Now I feel like I'm running for President!

    Anyway, removing the .forms-buttons-wrapper rule repositions the submission button. Incidentally, it's only after I posted the CSS above that I noticed the header text was too small but by then my big sister had taken over the computer (don't ask - long story). However, I was able to correct it after checking the original clone and finding this code when I clicked the HTML button. If you check the clone again, you'll see that that text is now being displayed at the correct size.

  • Profile Image
    abajan
    Answered on November 24, 2011 at 08:54 PM

    To have the error message on unfilled required fields correctly displayed, add the following rules:

    .form-error-arrow {
    left:400px;
    }
    .form-error-message img {
    float:right;
    margin:0 0 0 5px !important;
    }