CSS: Styling a File Upload button

  • Profile Image
    rtolmach
    Asked on November 05, 2021 at 02:55 PM

    Hello JF


    I just added a new file upload element

    "Please upload your tax letter as a PDF file"

    to replace the Uploadcare widget, which I renamed as "Please upload your tax letter as a PDF file - OLD" and set to hidden.


    How do I style the new button to look like the button on the widget I just hid? (size, color, not-rounded, etc.)

    Also, how do I prevent the subtitle from wrapping to a second line?

    I REALLY wish all this styling stuff were menu driven!


    Thanks

  • Profile Image
    Hanne
    Answered on November 05, 2021 at 06:59 PM

    @rtolmach

    Thank you for reaching out. 

    I have taken a look, and believe this code may be what you need to style the new button. Please place this code in the CSS field in the Style menu.

    .form-all .qq-upload-button {

      border-radius: 0px; !important;

      background: #94cbdc !important;

      border-color: #94cbdc !important;

      font-family: "Lucida Grande", sans-serif;

      text-shadow: none;

      box-shadow: none;

    }

    .form-all .qq-upload-button.qq-upload-button-hover {

     background: white; !important;

     border-style: solid; !important;

     border-color: #94cbdc; !important;

     border-width: thin; !important;

     border-radius: 0px; !important;

     transition: background .3s;

    }

    Please give it a try and let me know how it works.

  • Profile Image
    rtolmach
    Answered on November 05, 2021 at 07:34 PM

    Thanks, Hanne!


    I tried it, but it did not work. I got lots of errors. See this screengrab:


    1636155239_6185bf673ffeb_


    Help, please?
    Thanks!

  • Profile Image
    Laura
    Answered on November 05, 2021 at 11:01 PM

    Hi there,

    Could you try removing the semicolons (;) before the !important text on the affected rows?

     border-radius: 0px; !important;
    background: white
    ; !important;
    border-style: solid
    ; !important;
     border-color: #94cbdc
    ; !important;
     border-width: thin
    ; !important;
     border-radius: 0px
    ; !important;

    If you would still get errors, please let us know.

  • Profile Image
    rtolmach
    Answered on November 06, 2021 at 12:15 AM

    Hello Laura

    Thank you.

    This is so odd. The button looks different in these three pages:


    1.

    Seen here

    https://form.jotform.com/201197488978172

    it looks OK (pale blue button and white text)



    2.

    Seen here

    https://www.jotform.com/build/201197488978172

    the button is dark blue with a gradient and rounded corners. Not what I want.


    3.

    Seen here

    https://www.jotform.com/build/201197488978172/design

    the button is the pale blue color we want, but the text is grey



    Clearly, it should appear the same in all three places.


    Please advise.


    Thank you!

    Robert

  • Profile Image
    rtolmach
    Answered on November 06, 2021 at 12:17 AM

    Oops - Also, the subtitle is still wrapping to a second line. How do I fix that?

  • Profile Image
    Vick
    Answered on November 06, 2021 at 03:12 AM

    Hi there,

    The main reason that you see the button in different styles is the old default theme you are still using in your form.

    The old default theme is not updated anymore and that is why it has bugs. I would recommend that you update the theme to the latest default theme.

    You can check this cloned form to see how it will look with the new theme and the same styling you've applied in your form.

    https://form.jotform.com/213091725088962

    To clone it you can use instructions in the following guide.

    https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url/

    However, if you do not prefer to use the new default theme then you can inject the following CSS code into your form to fix the sub-label.

    .qq-uploader {
        width: 263px ;
    }

    Let us know if you have any questions.

    Thanks

  • Profile Image
    Vick
    Answered on November 06, 2021 at 03:14 AM

    Hi again,

    You can use the following guide to see how you can change your form theme.

    https://www.jotform.com/help/184-how-to-apply-a-theme-to-your-form/

    Thanks