CSS changes to Purchase Order - Alignment, Font Size

  • Profile Image
    RogerYelvington01
    Asked on January 14, 2014 at 08:18 PM

    Hey Guys! 

    I would like to see how close I can come to the following changes by injecting the right CSS codes into my form - specifically for making changes to the Purchase Order section:

    1. Column & Field Alignment
    2. Increase Sub-Total Font Size
    3. Border 

    For reference I've attached an image of what I'm shooting for.  Thanks so much for your help!
    Kind regards,

    Roger 

  • Profile Image
    Cesar
    Answered on January 14, 2014 at 09:38 PM

    I have cloned your form. Once I perform some changes on it, I will let you know through this thread. Thank you.

  • Profile Image
    RogerYelvington01
    Answered on January 14, 2014 at 09:47 PM

    Cesar - you the man!  Thanks for your response, I'll look forward to you workin' your magic :)

    Thank you,

    Roger

  • Profile Image
    RogerYelvington01
    Answered on January 14, 2014 at 10:04 PM

    As a note - I did do an update to the fields in the section as far as content, but I doubt it would change any layout your working on?

    Just wanted to keep you posted.

  • Profile Image
    jonathan
    Answered on January 14, 2014 at 10:41 PM

    Hi Roger,

    Thank you for taking the time to update us.

    I am sure our colleague Cesar will get back to you with his solution once he's back online.

    Thanks.

  • Profile Image
    Cesar
    Answered on January 15, 2014 at 03:09 AM

    Sorry for the delay. Kindly try out my example form: http://form.jotformpro.com/form/40138165495962

    The Code I Injected goes as follows:

    #input_75_custom_1003_0 {
    float: right !important;
    position: relative !important;
    margin-top: -72px !important;
    left: 229px !important;
    }

    #input_75_custom_1003_0 + label {
    float: right;
    position: relative;
    margin-top: -50px;
    left: 218px;
    }

    #input_75_custom_1006_0 {
    position: relative;
    float: right;
    margin-top: -120px;
    left: 229px;
    }

    #input_75_custom_1006_0 + label {
    float: right;
    position: relative;
    margin-top: -98px;
    left: 70px;
    }

    #input_75_1006.form-checkbox{
    position: relative;
    top: -54px;
    }

    [for="input_75_1006"]{
    position: absolute;
    top:-47px;
    left: 30px;
    }

    .form-payment-total{top:-20px;
    position: absolute;
    left: 530px;
    top:300px;
    }

    label[for="input_75_1001"] span b{
    position: absolute;
    margin-left: 474px;
    margin-right: -600px;
    font-size: 16px;
    }

    label[for="input_75_1003"] span b{
    position: absolute;
    margin-left: 404px;
    margin-right: -600px;
    font-size: 16px;
    }

    label[for="input_75_1006"] span b{
    position: absolute;
    margin-left: 520px;
    margin-right: -600px;
    font-size: 16px;
    }

    End Result:

    https://cms.jotform.com/uploads/image_upload/image_upload/global/23460_css.png

    Feel free to clone the form is needed

    Do let us know if you need further assistance.

     

    Related Article:
    How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image
    RogerYelvington01
    Answered on January 15, 2014 at 11:19 AM

    Hey Guys!

     

    Upon injecting the CSS, I did not see the needed changes.  Is it because I changed some of the items in the order box?  Please advise, thank you!

     

    Roger

  • Profile Image
    EliezerN
    Answered on January 15, 2014 at 12:33 PM

    @Roger

    Yes, it is due to the new items you added to the order section. Now, I cloned your form in order to help you to fix it, so, can you please confirm that the way Cesar had setup the form is the way you want it to be?

    In that way I can start looking for the correct code, also make sure to add all the needed items that will help us to accomplish this earlier.

    I will get back to you once I accomplish the desired style.

    Thanks

  • Profile Image
    RogerYelvington01
    Answered on January 15, 2014 at 03:02 PM

    Hi!  Yes, his layout was perfect, thank you- I'd like the same style.

  • Profile Image
    Mike_T
    Answered on January 15, 2014 at 04:06 PM

    Is this the final product page? If there are any more products, please add them now, since each product will need a custom style injections.

  • Profile Image
    EliezerN
    Answered on January 15, 2014 at 07:38 PM

    Hi again Roger, 

    I apologize for the delayed response and thank you for your patience.

    After working on the form I was able to give it the desired style. So, here is my cloned form: http://form.jotformpro.com/form/40146712275955

    It looks this way: 

    I removed the code suggested by my colleague and elaborated a new one, you can find the CSS code I used in this link: http://pastiebin.com/52d728b38f1f2

    If that is what you were looking for feel free to clone my form, here is how: How to clone an existing form from a URL

    Inform us if you need further assistance with this inquiry or kindly open new threads to post unrelated questions.

    Thanks