Change the button style of Take Photo widget

  • Profile Image
    Clintluna
    Asked on March 25, 2019 at 03:52 PM

    On the form listed below, I'd like to make the default "take photo" button look like the picture below before having to push it. Let me know if this question is unclear. Here's the form: https://www.jotform.com/build/83616966031157


    Here's what I'd like it to look like: 


  • Profile Image
    AndrewHag
    Answered on March 25, 2019 at 06:05 PM

    I am not sure I understood your question correctly, do you wish the Take Photo button looks like the button in the image that you sent? I am afraid that it is not possible to do custom the text of the widget. Let us know if you need any further assistance.

  • Profile Image
    Clintluna
    Answered on March 26, 2019 at 03:34 AM

    Hey Andrew, so after I push the "Take photo" button on this form, it looks like the picture above (you can try it out to see what I mean). I'd like it to look like the picture above before having to push the take photo button.


    Thank you


  • Profile Image
    Mike_G
    Answered on March 26, 2019 at 06:44 AM

    Thank you for providing us more information.

    Below are the CSS codes that you can inject to the Custom CSS tab of the widget to achieve your requirements.


    button#takePhoto:before {

        content: '\e800';

        background: #21a6cf !important;

        visibility: visible !important;

        font-family: takephoto;

        font-style: normal;

        font-weight: 400;

        speak: none;

        display: inline-block;

        text-decoration: none;

        width: 40px;

        text-align: center;

        font-variant: normal;

        text-transform: none;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;

        color: white !important;

        height: 35px;

        font-size: 25px;

        line-height: 35px;

    }

    button#takePhoto:after {

        content: " QUICK PIC & SAVE ™";

        position: absolute;

        left: 40px;

        visibility: visible !important;

        background: #21a6cf !important;

        width: 257px !important;

        white-space: nowrap !important;

        color: white !important;

        font-family: inherit;

        font-style: italic;

        text-align: left !important;

        font-size: 25px;

        line-height: 35px;

    }

    button#takePhoto {

        padding: 0px !important;

        margin: 0px !important;

        color: transparent;

        background: transparent;

    }

    .takePhoto-container {

        padding: 0px !important;

    }

    1553596762t06_38.gif

    How-to-Inject-CSS-Codes-to-Widgets

    If you want to change the dashed border of the button, you can also inject the optional codes below.

    .takePhoto-container {

        border: .125em solid #21a6cf !important;

    }

     
  • Profile Image
    Clintluna
    Answered on April 06, 2019 at 06:21 PM

    Hi this was working, but for some reason now it just shows the regular take photo button at first instead of the custom quick pick and save. How can I get this back? Tried to use the restore feature, but it actually messed up the entire display of the form now, didn't take it back to the correct restore version

  • Profile Image
    BDAVID
    Answered on April 07, 2019 at 12:11 AM

    I have tried my colleague's code without the "button" word, and it appears to work, please try this code again: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    #takePhoto:before {

        content: '\e800';

        background: #21a6cf !important;

        visibility: visible !important;

        font-family: takephoto;

        font-style: normal;

        font-weight: 400;

        speak: none;

        display: inline-block;

        text-decoration: none;

        width: 40px;

        text-align: center;

        font-variant: normal;

        text-transform: none;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;

        color: white !important;

        height: 35px;

        font-size: 25px;

        line-height: 35px;


    }

    #takePhoto:after {

        content: " QUICK PIC & SAVE ™";

        position: absolute;

        left: 40px;

        visibility: visible !important;

        background: #21a6cf !important;

        width: 257px !important;

        white-space: nowrap !important;

        color: white !important;

        font-family: inherit;

        font-style: italic;

        text-align: left !important;

        font-size: 25px;

        line-height: 35px;

    }


    #takePhoto {

        padding: 0px !important;

        margin: 0px !important;

        color: transparent;

        background: transparent;

    }

    .takePhoto-container {

        padding: 0px !important;

    }

  • Profile Image
    BDAVID
    Answered on April 07, 2019 at 12:21 AM

    Here is my clone version: https://form.jotform.com/90959419230967 

    I actually had to a minor change, so please try with this code:

    #takePhoto:before {

        content: '\e800';

        background: #21a6cf !important;

        visibility: visible !important;

        font-family: takephoto;

        font-style: normal;

        font-weight: 400;

        speak: none;

        display: inline-block;

        text-decoration: none;

        width: 90px;

        text-align: left;

        padding-left: 5px;

        font-variant: normal;

        text-transform: none;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;

        color: white !important;

        height: 35px;

        font-size: 25px;

        line-height: 35px;

    }

    #takePhoto:after {

        content: " QUICK PIC & SAVE ™";

        position: absolute;

        left: 40px;

        visibility: visible !important;

        background: #21a6cf !important;

        width: 257px !important;

        white-space: nowrap !important;

        color: white !important;

        font-family: inherit;

        font-style: italic;

        text-align: left !important;

        font-size: 25px;

        line-height: 35px;

    }

    #takePhoto {

        padding: 0px !important;

        margin: 0px !important;

        color: transparent;

        background: transparent;

    }

    .takePhoto-container {

        padding: 0px !important;

    }


  • Profile Image
    Clintluna
    Answered on April 07, 2019 at 03:54 AM

    Hi BDAVID, thanks for the reply. It's almost there, one issue is that the camera icon seems to be buried underneath the button itself / slightly different than how it was before. Here's a pic of what I mean:


    1554623689Screen Shot 2019-04-07 at 12.5

  • Profile Image
    BDAVID
    Answered on April 07, 2019 at 10:51 AM

    I have corrected it in your form:

    1554648678button.png

    Please check again, and let us know if you need more help.

  • Profile Image
    Clintluna
    Answered on April 08, 2019 at 05:13 AM

    Hi BDAVID, 


    Thanks for the reply, I just checked the form and it's still showing it like this:


    1554714817Screen Shot 2019-04-07 at 12.5

  • Profile Image
    Welvin
    Answered on April 08, 2019 at 09:26 AM

    I think this problem is with Safari. I can replicate the issue there. I'm checking this, and I'll keep you posted. 

  • Profile Image
    Welvin
    Answered on April 08, 2019 at 09:38 AM

    I've fixed that. Can you check again? 

  • Profile Image
    Clintluna
    Answered on April 08, 2019 at 05:46 PM

    Hi Welvin, it looks a lot better, thanks! But it's still off slightly underneath and to the left of the Q. I'm attaching some pics. Also, now on the mobile version it makes me hit the quick pic and save button and then also another take photo button after...is there anyway to make it go straight to taking a picture just by clicking the quick pic and save button like on the desktop? (attaching pictures for this as well). Thanks.



    1554759539Screen Shot 2019-04-08 at 2.33     1554759578Screen Shot 2019-04-08 at 2.33



    FIRST SCREEN & SECOND SCREEN ON MOBILE:

    1554759879IMG_7407 - mobile 1.png


    1554759958IMG_7406 - mobile 2.png

  • Profile Image
    BDAVID
    Answered on April 08, 2019 at 07:03 PM

    What version of the Safari browser are you using? I just tested it in Safari 11.1, and it looked fine:

    1554764522safari.png

    In regards to the behavior in mobile devices, there is no way to change that, it will depend on the type of operating system of the mobile device. In my Android device, a message is shown to allow enabling the camera after clicking on the Quick Pick & Save button.

  • Profile Image
    Clintluna
    Answered on April 09, 2019 at 05:12 AM

    My version is Safari 12.1

  • Profile Image
    Kiran
    Answered on April 09, 2019 at 07:46 AM

    Could you check your form again on Safari 12.1? I have checked and corrected the CSS code on the form. Please check and let us know if you need any further assistance. We will be happy to assist. 

  • Profile Image
    Clintluna
    Answered on April 09, 2019 at 06:56 PM

    Hi yes, so it's still looking like this on these 3 forms: 


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

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

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




    1554850514Screen Shot 2019-04-09 at 3.54

  • Profile Image
    Clintluna
    Answered on April 09, 2019 at 06:57 PM

    The camera icon  is still behind the quick pic button 

  • Profile Image
    Welvin
    Answered on April 09, 2019 at 08:04 PM

    Can you check this form https://www.jotform.com/83616966031157 again? The button should display correctly now.