how can i change the background color of the upload file button

  • Profile Image
    Suhni California
    Asked on January 05, 2012 at 01:12 PM

    how can i change the background color of the upload file button

     

    it now is orange - i would like it to be black

  • Profile Image
    paoloumali
    Answered on January 05, 2012 at 04:22 PM

    You can easily do that through injecting CSS.

    Please take a look at this guide on how to go about these customizations.

    http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes

    If you were specific about the Multi-upload button, the built-in css declarations are shown below.

     

    .qq-upload-button {

    background: #FFA84C;

    background: -moz-linear-gradient(top, #FBCB5D 0%, #EFA003 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBCB5D), color-stop(100%,#EFA003));

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBCB5D', endColorstr='#EFA003',GradientType=0 );

    color: white;

    display: block;

    font-size: 16px;

    padding: 8px 0;

    text-align: center;

    text-shadow: 0 -1px #C64F00;

    border: 1px solid #C64F00;

    -moz-border-radius: 5px 5px;

    -webkit-border-radius: 5px 5px;

    border-radius: 5px 5px;

    border-image: initial;

    }

    You can override any statement by redeclaring it when you inject your CSS like below:

     

    .qq-upload-button {

    background: black !important;

    }

    or

    .qq-upload-button {

    background: #000 !important;

    }

  • Profile Image
    paoloumali
    Answered on January 05, 2012 at 04:28 PM

    Please try these, but once you get the pattern on how it's done, you can customize it the way you wanted.

     

     

    .qq-upload-button {
    background: #000 !important;
    background: -moz-linear-gradient(top, #000000 0%, #666666 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#666666)) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBCB5D', endColorstr='#EFA003',GradientType=0 );
    color: white;
    text-shadow: 0 -1px #ccc;
    border: 1px solid #ccc;
    }
    Note the following colors: #000000, #666666
    They are responsible for the shades/gradients. In your Photoshop or any image editor,
    choose two colors relatively near each other to create the same effect.