- longoAsked on May 09, 2012 at 12:18 PM
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.
- JotForm SupportabajanAnswered 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).
- JotForm SupportabajanAnswered 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:
That will make it 120 pixels wide.
The height and font are styled via the qq-upload-button class:
padding: 4px 0;
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.
- longoAnswered on May 09, 2012 at 03:42 PM
Thanks abajan, excellent work.
- JotForm SupportabajanAnswered on May 09, 2012 at 04:27 PM
Glad I was able to help you :)
- longoAnswered 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.
- JotForm SupportabajanAnswered 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.
- longoAnswered 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
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.
- JotForm SupportidarktechAnswered on May 10, 2012 at 09:30 AM
You can add !important after the fonts name. It should look like this:
font-family: Verdana, Geneva, sans-serif !important;
Hope this helps. Thanks!
- longoAnswered on May 10, 2012 at 10:02 AM
Thanks idarktech, perfect