Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
Loading…
<script src="html5kellycolorpicker"></script>
<canvas id="picker"></canvas>
<<ui kill>>
<<set $ButtonColor = "">><<set $ButtonType = "primary">><<set $ButtonText = "Demo">><<set $ToolTipText = "Tool tip">>
<<set $Color = "FFFFFF">><<set $TextColor = "000000">>
<<widget "Compose">>
<<set _part2 = "href=\"" + $URL + "\" target=\"_blank\" ">>
<<set _part3 = "rel=\"noopener\" data-api-returntype=\"Page\"><span title=\"">>
<<set _part5 = "</strong></span></a> ">>
<<set _part1a = "<a class=\"Button Button">>
<<set _part1b = $ButtonType + "\" style=\"background: #" + $Color + "; border: " + $Border + "px black solid;\" title=\"">>
/*
<<set _part1b = $ButtonType + "\" style=\"color: #" + $TextColor + "; background: #" + $Color + "; border: " + $Border + "px black solid;\" title=\"">>
*/
<<set _part1c = $ToolTipText + "\" ">>
<<set _part4 = "\"><strong>" + $ButtonText + _part5>>
<<set _part4b = "\"><strong>" + $ButtonText + _part5>>
<<set $foo = _part1a + "--" + _part1b +_part1c + _part2 + _part3 + $ToolTipText + _part4b >>
<</widget>>
<<widget "Buttons">>
<<Compose>>
<<replace "#demo">>
<b>Demo:</b> <<print $foo>> <b>Button Color: #</b><span class="smallbox"><<textbox "$Color" $Color>></span><br>
<</replace>>
<</widget>>
<div class='container'>
<div class='column'>
<b>CANVAS Button Generator</b><br>
<<set $ToolTipText = "Read the Syllabus">>
<<set $ButtonText = "Syllabus">>
<div class='input'><span style="color: white">
<b>Button Label:</b> <<textbox "$ButtonText" "Text">> <br>
<b>Description of link:</b> <<textbox "$ToolTipText" "Tool tip">></span> <br>
<b>URL Link:</b> <<textbox "$URL" "http://frc.instructure.com">><br>
(You can copy the link from Canvas and paste it here.)
</div>
<div class='choices'>
<center>
<<link "<div class=\"Button Button--mini\" title=\"Mini Button\"><strong>Mini</strong></div>">>
<<set $ButtonType = "mini">><<Buttons>><</link>>
<<link "<div class=\"Button Button--small\" title=\"Small Button\"><strong>Small</strong></div>">>
<<set $ButtonType = "small">><<Buttons>><</link>>
<<link "<div class=\"Button Button--default\" title=\"Medium Button\"><strong>Medium</strong></div>">>
<<set $ButtonType = "default">><<Buttons>><</link>>
<<link "<div class=\"Button Button--large\" title=\"Large Button\"><strong>Large</strong></div>">>
<<set $ButtonType = "large">><<Buttons>><</link>><br><br>
<b>Border?</b> <label><<radiobutton "$Border" "0" checked>> No</label> <label><<radiobutton "$Border" "1">> Yes</label>
/*
<b>Text Color?</b> <label><<radiobutton "$TextColor" "FFFFFF">> White</label> <label><<radiobutton "$TextColor" "000000" checked>> Black</label>
*/
<br></center>
<br><span id="demo">
<<Compose>>
<b>Demo:</b> <<print $foo>> <b>Button Color: #</b><span class="smallbox"><<textbox "$Color" $Color>></span><br>
</span><br>
<b>Or Choose a Standard Button:</b><br>
<<link "<div class=\"Button Button--warning\">Orange</div>">>
<<set $ButtonType = "warning">><<set $Color = "">><<set $TextColor = "">><<Buttons>><</link>>
<<link "<div class=\"Button Button--success\">Green</div>">>
<<set $ButtonType = "success">><<set $Color = "">><<set $TextColor = "">><<Buttons>><</link>>
<<link "<div class=\"Button Button--danger\">Red</div>">>
<<set $ButtonType = "danger">><<set $Color = "">><<set $TextColor = "">><<Buttons>><</link>>
<<link "<div class=\"Button Button--primary\">Blue</div>">>
<<set $ButtonType = "primary">><<set $Color = "">><<set $TextColor = "">><<Buttons>><</link>>
<<link "<div class=\"Button Button--normal\">White</div>">>
<<set $ButtonType = "normal">><<set $Color = "">><<set $TextColor = "">><<Buttons>><</link>>
<<link "<div class=\"Button Button--secondary\">Black</div>">>
<<set $ButtonType = "secondary">><<set $Color = "">><<set $TextColor = "">><<Buttons>><</link>>
<br>
</div><div class='blank'><<link "<div class=\"Button Button--success\">Generate Your Button</div>">>
<<replace "#Results">>Copy and paste the following code into your Canvas page via the "HTML Editor":
<div class="splash"><<Compose>><code>
<<print _part1a>><nowiki>--</nowiki><<print _part1b>><<print _part1c>><<print _part2>><<print _part3>><<print $ToolTipText>><<print _part4>></code>
</div>
<div class='blank'>Your Button: <<print $foo>></div>
<</replace>>
<</link>> <<button "Help">><<popup 'Help' 'Help'>><</button>> <a class="Button Button--small" style="background: #F85B6C; border: 1px black solid;" title="Watch the video tutorial on how to build buttons and insert them into your Canvas pages." href="https://www.youtube.com/watch?v=g1-3UzUiuWg&feature=youtu.be" target="_blank" rel="noopener" data-api-returntype="Page"><span title="Watch the video tutorial on how to build buttons and insert them into your Canvas pages."><strong>YouTube Tutorial</strong></span></a> </div>
</div>
<div class='column'>Choose a color and then copy the # code and paste it in the Color input box.
<div id='outerdiv'>
<iframe src="https://www.webfx.com/web-design/color-picker/1F85DE/" id='inneriframe' width=50% height=800px>
</iframe>
</div></div></div>
<div class='container'>
<span id="Results"> </span>
</div><div class='input'>
In the blue box, type or paste the Button Label (the text that will be on the button), the description the link, and the URL of the link target.<br><br>
Then choose one of the four sizes of buttons or one of the Standard Canvas Buttons.<br><br>
You can also choose to have a border or change the color of the button text.<br><br>
Lastly, you can use the Color Picker to find a button color you want and then input the # color code in the Button Color input box. (You can copy and paste as well.) [Note: Changing the button color does mean that the button will not change when the user Hovers the cursor over the button.]<br><br>
If you decide you don't like the color you've chosen, just click any Standard Button to reset the button color.<br><br>
</div>