-
ClintlunaAsked on March 25, 2019 at 3: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:
-
AndrewHagReplied on March 25, 2019 at 6: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.
-
ClintlunaReplied on March 26, 2019 at 3: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
-
Mike_G JotForm SupportReplied on March 26, 2019 at 6: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;
}
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;
}
-
ClintlunaReplied on April 6, 2019 at 6: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
-
David JotForm Support ManagerReplied on April 7, 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;
}
-
David JotForm Support ManagerReplied on April 7, 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;
}
-
ClintlunaReplied on April 7, 2019 at 3: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:
-
David JotForm Support ManagerReplied on April 7, 2019 at 10:51 AM
I have corrected it in your form:
Please check again, and let us know if you need more help.
-
ClintlunaReplied on April 8, 2019 at 5:13 AM
Hi BDAVID,
Thanks for the reply, I just checked the form and it's still showing it like this:
-
Welvin Support Team LeadReplied on April 8, 2019 at 9: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.
-
Welvin Support Team LeadReplied on April 8, 2019 at 9:38 AM
I've fixed that. Can you check again?
-
ClintlunaReplied on April 8, 2019 at 5: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.
FIRST SCREEN & SECOND SCREEN ON MOBILE:
-
David JotForm Support ManagerReplied on April 8, 2019 at 7:03 PM
What version of the Safari browser are you using? I just tested it in Safari 11.1, and it looked fine:
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.
-
ClintlunaReplied on April 9, 2019 at 5:12 AM
My version is Safari 12.1
-
Kiran Support Team LeadReplied on April 9, 2019 at 7: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.
-
ClintlunaReplied on April 9, 2019 at 6: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
-
ClintlunaReplied on April 9, 2019 at 6:57 PM
The camera icon is still behind the quick pic button
-
Welvin Support Team LeadReplied on April 9, 2019 at 8:04 PM
Can you check this form https://www.jotform.com/83616966031157 again? The button should display correctly now.