Below is a list of HTML codes for use inside Canvas. These functions will help pep up your course content. You will find the full Cheat Sheet inside the MCS template.
Colour Palette
⬤ MIT Red #DD1122
⬤ Canvas Standard ‘Activity’ Aqua #45c2c5
⬤ Te Pūkenga Dark Green #183121
⬤ Te Pūkenga Secondary Green #3bad5f
Copy Inside a Box
<div style=”border: 1px solid #000000; background: #ffffff;”>
<div style=”padding: 5px 10px 5px 10px;”>
<p>Add your copy here</p>
</div>
</div>
Rounded Corner Box
<div style=”border: 2px solid #DD1122; border-radius: 7px; background: #ffffff;”>
<div style=”padding: 5px 10px 5px 10px;”>
<p>Add your copy here</p>
</div>
</div>
You can change the style of your box by changing elements of the code.
Box code: “border: 2px solid #DD1122; border-radius: 7px; background: #FFFFFF;”
- The 2px refers to the thickness of the border – the high the number the thicker the border. ie 10px is thick.
- Solid refers to the style of the border. Solid is a continuous line, you could change it to dotted or dashed.
- #DD1122 is the colour of the border. It’s a 6 digit hex colour code. This can be changed to any colour (google hex colours). #000000 is black.
- To change the radius of the corner you can change the 7px to any number, the higher the number the rounder the corner.
- #FFFFFF in the code above is refering to the background colour of the box. As above, this can be changed to any hex colour.
Print Button
Copy and paste this code using the code embed button.
<a class=”mit_print_page” href=”#”>
<img id=”5658495″ style=”float: right; padding-left: 15px;” src=”https://canvas.manukau.ac.nz/courses/50978/files/5658499/preview” alt=”print-icon.png” width=”60″ height=”85″ />
</a>
Layout
Responsive Columns
<div class=”content-box”> <div class=”grid-row”> <div class=”col-xs-12 col-md-6″> <div class=”styleguide-section__grid-demo-element”>
Add your content here
</div> </div> <div class=”col-xs-12 col-md-6″> <div class=”styleguide-section__grid-demo-element”>
Add your content here
</div> </div> </div> </div>
Three Columns
<div class=”content-box”> <div class=”grid-row”> <div class=”col-xs-12 col-md-4″> <div class=”styleguide-section__grid-demo-element”>
Add your content here
</div> </div> <div class=”col-xs-12 col-md-4″> <div class=”styleguide-section__grid-demo-element”>
Add your content here
</div> </div> <div class=”col-xs-12 col-md-4″> <div class=”styleguide-section__grid-demo-element”>
Add your content here
</div> </div> </div> </div>
Table with Hover Rows
<table class=”ic-Table ic-Table–hover-row” style=”width: 100%; border-collapse: collapse; border-color: #dd1122;” border=”2″ cellpadding=”10″>
<tbody>
<tr style=”background: #dd1122;”>
<th style=”width: 25%;”>
<h4><span style=”font-size: 14pt; color: #ffffff;”>Table with a row hover</span></h4>
</th>
<th style=”width: 25%;”></th>
<th style=”width: 25%;”></th>
<th style=”width: 25%;”></th>
</tr>
<tr>
<td style=”width: 25%;”></td>
<td style=”width: 25%;”></td>
<td style=”width: 25%;”></td>
<td style=”width: 25%;”></td>
</tr>
<tr>
<td style=”width: 25%;”></td>
<td style=”width: 25%;”></td>
<td style=”width: 25%;”></td>
<td style=”width: 25%;”></td>
</tr>
</tbody>
</table>
Responsive Table
<p> </p>
<div style=”overflow-x: auto;”>
<table style=”border-collapse: collapse; width: 2000px; height: 129px; border-color: #dd1122;” border=”2″ cellpadding=”10″>
<tbody>
<tr style=”background: #dd1122;”>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
<th style=”height: 44px;”>
<span style=”color: #ffffff;”>Column</span>
</th>
</tr>
<tr style=”height: 28px;”>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
</tr>
<tr style=”height: 28px;”>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
<td style=”height: 28px;”>Row</td>
</tr>
<tr style=”height: 29px;”>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
<td style=”height: 29px;”>Row</td>
</tr>
</tbody>
</table>
</div>
Getting Fancy
(Note, these will not work on mobiles or tablets)
Tabs
<div class=”enhanceable_content tabs”>
<ul>
<li><span style=”font-size: 14pt;”><a style=”text-decoration: none;” href=”#fragment-1″>Tab Layout One</a></span></li>
<li><span style=”font-size: 14pt;”><a style=”text-decoration: none;” href=”#fragment-2″>Tab layout Two</a></span></li>
<li><span style=”font-size: 14pt;”><a style=”text-decoration: none;” href=”#fragment-3″>Tab layout Three</a></span></li>
</ul>
<div id=”fragment-1″>
Copy here
</div>
<div id=”fragment-2″>
Copy here
</div>
<div id=”fragment-3″>
Copy here
</div>
</div>
Rollover Link
<p><span style=”cursor: help;”>Text before rollover<a title=”ADD YOUR COPY FOR THE ROLL-OVER HERE. BETWEEN THE SPEECH MARKS” data-tooltip=”{"tooltipClass":"popover popover-padded", "position":"right"}”>T HIS IS YOUR KEY WORD</a> text after rollover.</span></p>
Pop Up Link
<div id=”dialog_for_link1″ class=”enhanceable_content dialog”>ADD YOUR CONTENT FOR THE POP-UP HERE. THIS CAN BE CHANGED IN THE TEXT EDITOR ONCE THE CODE IS EMBEDDED</div>
<p><a id=”link1″ class=”Button” style=”background: #dd1122; color: #ffffff; border: 0px;” href=”#dialog_for_link1″>THIS IS YOUR TRIGGER WORD/STATEMENT</a></p>
Sortable Lists
<ul class=”enhanceable_content sortable”>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
Post-It Notes
Yellow post-it note
<div class=”shadow_offset_7px_LightGrey rotate_5_degree” style=”background-color: #ffff99; height: 300px; width: 300px; margin-left: 30px; margin-top: 30px;”><div style=”padding: 5px 10px 5px 10px;”><p><span style=”font-size: 14pt; color: #000080;”><span style=”font-family: ‘Bradley Hand’; font-size: x-large;”>Post It Note <strong></strong></span></span></p></div></div>
Blue post-it note
<div class=”shadow_offset_7px_LightGrey rotate_5_degree” style=”background-color: #9ccde3; height: 300px; width: 300px; margin-left: 30px; margin-top: 30px;”><div style=”padding: 5px 10px 5px 10px;”><p><span style=”font-size: 14pt; color: #000080;”><span style=”font-family: ‘Bradley Hand’; font-size: x-large;”>Post It Note <strong></strong></span></span></p></div></div>
Green post-it note
<div class=”shadow_offset_7px_LightGrey rotate_5_degree” style=”background-color: #9ce39f; height: 300px; width: 300px; margin-left: 30px; margin-top: 30px;”><div style=”padding: 5px 10px 5px 10px;”><p><span style=”font-size: 14pt; color: #000080;”><span style=”font-family: ‘Bradley Hand’; font-size: x-large;”>Post It Note <strong></strong></span></span></p></div></div>
Pink post-it note
<div class=”shadow_offset_7px_LightGrey rotate_5_degree” style=”background-color: #f4bad4; height: 300px; width: 300px; margin-left: 30px; margin-top: 30px;”><div style=”padding: 5px 10px 5px 10px;”><p><span style=”font-size: 14pt; color: #000080;”><span style=”font-family: ‘Bradley Hand’; font-size: x-large;”>Post It Note <strong></strong></span></span></p></div></div>