Change Colour & Shrink Upload Button

  • Profile Image
    longo
    Asked on May 09, 2012 at 12:18 PM

    Hi Folks

    I have an upload button on my form, my problem is its massive and the colour doesn't suit my site theme. Is there a method i.e CSS which I could use to change the size and colour or even use a custom button image of my own.

    Thanks

  • Profile Image
    abajan
    Answered on May 09, 2012 at 02:30 PM

    There's a guide on changing the button's color but I'll have to check and see if the size can be also be changed.

    I'll get back to you later today (Barbados time).

  • Profile Image
    abajan
    Answered on May 09, 2012 at 03:08 PM

    Okay, it's actually easier than I thought. The class to change the width is qq-uploader. So, if you want to make it narrower than its default 224 pixels (as can be found in the form's stylesheet), inject the following CSS:

    .qq-uploader {
    width: 120px;
    }

    That will make it 120 pixels wide.

    The height and font are styled via the qq-upload-button class:

    .qq-upload-button {
    padding: 4px 0;
    font-size: 14px;
    }

    Injecting both of the above rules into your form will produce a button similar to that below:


    If you need additional assistance with this or any other JotForm related matter, please let us know.

     

  • Profile Image
    longo
    Answered on May 09, 2012 at 03:42 PM

    Thanks abajan, excellent work.

  • Profile Image
    abajan
    Answered on May 09, 2012 at 04:27 PM

    Glad I was able to help you :)

  • Profile Image
    longo
    Answered on May 10, 2012 at 05:43 AM

    Just a thought abajan, would it be sound to harmonise the submit and upload button themes, it would help continuity as the buttons would look identical on the same form.

  • Profile Image
    abajan
    Answered on May 10, 2012 at 07:03 AM

    Yes, that would be a good idea. I believe a ticket requesting this was recently submitted but I'll have to check.

  • Profile Image
    longo
    Answered on May 10, 2012 at 08:22 AM

    I have one more question if I may, in my forms CSS I've used this code

    .form-submit-button-simple_white {
    font-family: Verdana, Geneva, sans-serif;
    }

    in form builder the button displays Verdana but on the live site the button still displays the default Arial.

    Your thoughts would be appreciated.

  • Profile Image
    idarktech
    Answered on May 10, 2012 at 09:30 AM

    @longo,

    You can add !important after the fonts name. It should look like this:

    .form-submit-button-simple_white {

    font-family: Verdana, Geneva, sans-serif !important;

    }

    Hope this helps. Thanks!

  • Profile Image
    longo
    Answered on May 10, 2012 at 10:02 AM

    Thanks idarktech, perfect