Changing upload colour button of uploadcare widget

  • Profile Image
    eaguiar
    Asked on September 12, 2017 at 07:15 AM

    Hi  i am trying to change the colours of the upload button of the uploadcare widget with css of uploadcares help pages but it is not working. Could someone assist me. Thankyou

  • Profile Image
    candy
    Answered on September 12, 2017 at 09:03 AM

    As far as I checked your form named "Diplomas 2", I have seen that you have File Uploader by Uploadercare widget on your form as the following:

    In order to change the color of the buttons in the widget, you can inject the following CSS codes to the Custom CSS menu as you can see in the following screenshot below:

    .uploadcare-widget-button-open { background: red !important; }

     

     

    For detailed information regarding injecting additional CSS codes to the widgets, please check the following guide: https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes

     

    I hope this helps.

     

    Please try and if you need any further assistance, let us know.

  • Profile Image
    sabbirahmedchow
    Answered on September 12, 2017 at 09:21 AM

    You can do this by adding custom CSS code to the widget.

     

    1. First click the Uploadcare Widget Setting icon

     

    2. From the setting window, Go to Custom CSS tab and add the following CSS hack to change the related button style:

     

     

    3. Add the following CSS code

     

    .uploadcare-widget-button-open

    {

     background: #555555;

    }

     

    .uploadcare-widget-button-open:hover

    {

     background: #555555;

    }

     

    .uploadcare-dialog-big-button

    {

      background: #555555;

      border: solid 1px #555555;

      box-shadow: inset 0 -2px #555555;

      text-shadow: 0 -1px #555555;

    }

     

    .uploadcare-dialog-big-button:hover

    {

      background: #555555;

      border: solid 1px #555555;

      box-shadow: inset 0 -2px #333333;

      text-shadow: 0 -1px #555555;

    }

     

    .uploadcare-dialog-button-success

    {

      background: #555555;

      border: solid 1px #555555;

      box-shadow: inset 0 -2px #555555;

      text-shadow: 0 -1px #555555;

    }

     

    .uploadcare-dialog-button-success:hover

    {

      background: #555555;

     border: solid 1px #555555;

      box-shadow: inset 0 -2px #333333;

      text-shadow: 0 -1px #555555;

    }

     

    The above css will change all the buttons color that are associated with the uploadcare widget

    You can change the colors the way you want to. Let us know if you need any further assistance.

  • Profile Image
    eaguiar
    Answered on September 14, 2017 at 05:08 AM

    Great, thankyou @candy and @sabbirahmedchow both worked.