Forum Discussion
MikeTamoush
4 years agoQrew Elite
I'm no expert, but here are my notes to myself on making buttons. This allows for all kinds of options. I am guessing you can use what i have below in coordination with Jeffs notes. Notice the font-size....that may be all you need but I left all my notes just in case.
-------------------------
var text URL = Put your URL here
"<a style=\"text-decoration:none; background: #7aace0; border-radius: 1000px; color: #ffffff; display: inline-block; padding: 2px 0px; width:100px; text-align: center; text-shadow: none; border: 1px solid #030404; font-size: 16px; font-family=Times New Roman\"href='"
& $URL
& "'>Button Text</a>"
//NOTES BELOW
-Text Decoration I haven't used, google it through CSS websites
- Background uses a hex color, google hex color codes
- Border Radius curves the corners of the button. 5 is minimal, 1000 is totally rounded
- Color is text color
- Display inline-block means it is a button (I think?)
- Padding: Can be used with 2 or 4 variables. With 2 variables you are setting top/bottom then left/right padding. With 4 variables (2px 2px 5px 5px) you are setting, top,right,bottom, left (start at top and go clockwise)
- width: use EITHER width or padding typically. Width fixes the width. Could do the same with height if you wanted
-text-shadow: Ive only used this once, google for exact format. Shadows the text
- border: thickness of border and border color
-font-size/family is self explanatory
------------------------------
Mike Tamoush
------------------------------
-------------------------
var text URL = Put your URL here
"<a style=\"text-decoration:none; background: #7aace0; border-radius: 1000px; color: #ffffff; display: inline-block; padding: 2px 0px; width:100px; text-align: center; text-shadow: none; border: 1px solid #030404; font-size: 16px; font-family=Times New Roman\"href='"
& $URL
& "'>Button Text</a>"
//NOTES BELOW
-Text Decoration I haven't used, google it through CSS websites
- Background uses a hex color, google hex color codes
- Border Radius curves the corners of the button. 5 is minimal, 1000 is totally rounded
- Color is text color
- Display inline-block means it is a button (I think?)
- Padding: Can be used with 2 or 4 variables. With 2 variables you are setting top/bottom then left/right padding. With 4 variables (2px 2px 5px 5px) you are setting, top,right,bottom, left (start at top and go clockwise)
- width: use EITHER width or padding typically. Width fixes the width. Could do the same with height if you wanted
-text-shadow: Ive only used this once, google for exact format. Shadows the text
- border: thickness of border and border color
-font-size/family is self explanatory
------------------------------
Mike Tamoush
------------------------------
JenniferJuhasz
4 years agoQrew Cadet
Hi Mike,
This is very much like what I had before for my Save & Submit button:
"<a class=\"Vibrant Primary\" style=\"width:310px; background: #2abdbc; text-align: center; font-size: 16px; font-family: Arial, Times, Sans-serif;\" href=\"targeturl" target=_blank><b>Submit</b></a>"
But the results ended up not submitting at all even though I have the 'Save on Redirect' option checked.
Jeff's solution works for saving my data - and my CSS code for the button appearance is:
var text bgcolor = "#2abdbc";
var text txtcolor = "white";
var text style = "style=\"text-decoration: none; width: 310px; text-align: center; background:" & $bgcolor & "; border-radius: 5px; padding: 8px 10px; color: " & $txtcolor & "; display: inline-block; font: bold 700 32px/1 \"Arial, Times, Sans-serif\", sans-serif; text-shadow: none; font-size: 32px"
But the font 'size' didn't increase to 32px at all - and I'm not sure why. Thoughts?
------------------------------
Jennifer Juhasz
------------------------------
This is very much like what I had before for my Save & Submit button:
"<a class=\"Vibrant Primary\" style=\"width:310px; background: #2abdbc; text-align: center; font-size: 16px; font-family: Arial, Times, Sans-serif;\" href=\"targeturl" target=_blank><b>Submit</b></a>"
But the results ended up not submitting at all even though I have the 'Save on Redirect' option checked.
Jeff's solution works for saving my data - and my CSS code for the button appearance is:
var text bgcolor = "#2abdbc";
var text txtcolor = "white";
var text style = "style=\"text-decoration: none; width: 310px; text-align: center; background:" & $bgcolor & "; border-radius: 5px; padding: 8px 10px; color: " & $txtcolor & "; display: inline-block; font: bold 700 32px/1 \"Arial, Times, Sans-serif\", sans-serif; text-shadow: none; font-size: 32px"
But the font 'size' didn't increase to 32px at all - and I'm not sure why. Thoughts?
------------------------------
Jennifer Juhasz
------------------------------
- LauraThacker_ID4 years agoQrew TraineeI was trying to replicate your issue; and I think there is a bug with the class SaveBeforeNavigating not working in some cases.
I got the button the right size/color etc, but the record is not saving before redirect. I have also noticed this to be a problem when trying to make a SaveBeforeNavigating button do another API_EditRecord before navigating to the redirect location; which possibly means it is suffering the same problem.var text targeturl="https://www.google.com"; "<a target=_blank class='Vibrant Success' SaveBeforeNavigating title='' style='font-size: 32px; display:inline-block; white-space; nowrap; background: #2abdbc; border: 1px solid #2abdbc; text-align: center; font-family: Arial, Times, Sans-serif; text-align:center; text-decoration:none' href=\"" & $targeturl & "\"" & ")'>Submit</a>"
Even if I take off the target=_blank (which means new window); I still do not get the save and even though the table is set to auto-save; it does not - it prompts me to leave the site.
Try the updates to the Styling in your formula and see if you're still getting the non-save issue that I am. If so, submit a support ticket. I suspect something bigger is going on here.
(I've submitted a ticket #676259 on the inability to do more than one API command when using SaveBeforeNavigating or being able to redirect somewhere else)
------------------------------
Laura Thacker IDS
------------------------------- JenniferJuhasz4 years agoQrew CadetHi Laura,
Thank you so much for your reply! It is so appreciated to have one of you more experienced QB users validate my understanding that there's a larger issue here; I have an open ticket with QB Support - I started there, initially, because we did receive successful 'Test' entries when I first built these surveys in late November and early December; but then when my team sent them out into the world, none of the replies were recorded. We found the issue last week, (of course during the holidays); and I opened a ticket right away.
QB has not been tremendously helpful - they insist nothing has changed on their end that would cause the 'Save on Redirect' option to stop working.
Jeff and Dan's solutions to update my formula to 'Save before Navigating' is working - and that's a relief; though we've lost all the data from last month, hopefully moving forward we have this resolved.
------------------------------
Jennifer Juhasz
------------------------------
- MikeTamoush4 years agoQrew EliteLooks like Jeff has some cool way to set the font to bold and 32 and all that. I dont know that way but I suspect it is messing things up. As a test remove the entire font bold 700 32px part, and see if it works, just to see if that is the issue.
------------------------------
Mike Tamoush
------------------------------- JenniferJuhasz4 years agoQrew CadetHi Mike,
No - removing that still keeps my font small... here's a screenshot with the code:
var text bgcolor = "#2abdbc";
var text txtcolor = "white";
var text style = "style=\"text-decoration: none; width: 310px; text-align: center; background:" & $bgcolor & "; border-radius: 5px; padding: 8px 10px; color: " & $txtcolor & "; display: inline-block; font: \"Arial, Times, Sans-serif\", sans-serif; text-shadow: none; font-size: 32px";
------------------------------
Jennifer Juhasz
------------------------------- LauraThacker_ID4 years agoQrew TraineeChange your Style to:
style='text-decoration: none; width: 310px; text-align: center; background:" & $bgcolor & "; border-radius: 5px; padding: 8px 10px; color: " & $txtcolor & "; display: inline-block; font: \"Arial, Times, Sans-serif\", sans-serif; text-shadow: none; font-size: 32px'
"<a class='Vibrant Success' SaveBeforeNavigating title='' style='text-decoration: none; width: 310px; text-align: center; background:" & $bgcolor & "; border-radius: 5px; padding: 8px 10px; color: " & $txtcolor & "; display: inline-block; font: \"Arial, Times, Sans-serif\", sans-serif; text-shadow: none; font-size: 32px' href=\"" & $targeturl & "\"" & ")'>Submit</a>"
This works for me.
------------------------------
Laura Thacker IDS
------------------------------