Make Your Canvas Course Beautiful - HTML Basics Webinar
Allison Hughes Webinar Recording from 10/26/2018
Here's a wonderful introduction to editing your Canvas HTML. We've added examples below that you can copy and paste into your Canvas pages.
Workshop Notes
- Color codes Links to an external site. and color names
- WebAIM Color Contrast Checker Links to an external site.
- HTML Cheatsheet Links to an external site.
HTML Snippets
NOTES:
- where red text is shown, that’s what you’ll add to the existing code
- highlighted text is what you can customize
- add the code shown in red below to your existing code
Accessible Red Text
<span style="color: #c30000;">TEXT</span>
TEXT
Indented Block Quote
<blockquote> TEXT </blockquote>
I found things I could say with color and shapes that I couldn't say in any other way... things I had no words for.
Georgia O'Keeffe
Image Border
<img style="border: 3px solid black;" src="http://www.yourimagefilehere.com">
Image Padding
<img style=”float: left; padding-right: 15px;" src=http://www.yourimagefilehere;.com>
[ NOTE: if the image is on the right (e.g., “float: right”), switch the padding to say “padding-left.” If you want padding all around the image, leave off the “-right” so it just says “padding: 15px;”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Header Background
<div style="background: #ad0000;> TEXT </div>
<div style="background: #ccffee; width: 50%;"> TEXT </div>
Horizontal Rule
<hr /> (thin gray line)
<hr style="border-top: 2px solid #000;" /> (thicker black line)
<hr style="border-top: 2px solid #3308ff;" /> (thick purple line)
<hr style="border-top: 10px dotted #d30000;" /> (dotted)
<hr style="border-top: 10px dashed #d30000;" /> (dashed)
Double Line
<hr style="border: 0; border-top: 5px double #532b90;" />
Solid Background Textbox
<div class="content-box pad-box-mini border border-trbl" style="background-color: #daf7a6; margin: auto; width: 50%;">
<p style="text-align: left; padding-left: 15px;"> TEXT GOES HERE </p>
</div>
TEXT GOES HERE
Double Border Textbox
<div style="border: double #008080; padding: 0px 10px 5px 10px; text-align: center; margin: auto; width: 75%;"><span style="font-size: 14pt;"> TEXT </span></div>
Shadow Textbox
<div style="margin: 30px 15% 30px 15%; background-color: #30759b;">
<div style="position: relative; top: -10px; left: -10px; padding: 20px; background: #ffffff; border: 2px solid #30759b;">
<p><span> TEXT </span></p>
</div>
</div>
TEXT
Sidebar Textbox
<div style="width: 75%; position: relative; margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 20px solid #f36e1e;"> TEXT GOES HERE </div>
Title Bar Textbox
[You may have to play around with the height to fit your content ]
<div class="img-rounded" style="background-color: #fef9e7; margin: auto; width: 70%; height: 200px; border: 1px solid black;">
<p style="color: #ffffff; background-color: #922b21; text-align: center; margin: auto;"> TITLE TEXT </p>
<div style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;">
<span style="font-size: 12pt;"> TEXT GOES HERE </span>
</div>
</div>
TITLE TEXT
Columns
'frame' each chunk of content with its own <div> tag; two-column set up shown.
You could experiment with 70/30 or some other percentage.
<div style="float: left; width: 50%;">
<p> Text </p>
<p> Text </p>
<p> Text </p>
</div>
<div style="float: left; width: 50%;">
<p> Text </p>
<p> Text </p>
<p> Text </p>
</div>
NOTE: If you want a third column, change the width attribute to get the relative column widths desired (keeping the total at 100%).
NOTE: If one column is shorter than the other, add this just before the closing </div> for that column: <p style="margin-bottom: 240px;"> </p> (the margin size can be adjusted as needed).
Text
Text
Text
Text
Text
Text
Indent list
<ul style="padding-left: 30px;"> [amount of padding can be changed]
- First bullet
- Second bullet
- Third bullet
Colored Background for Tabs
<ul style="background-color: #d9ffb2 ;" > [This is added to the <ul> tag that holds the tab titles (highlighted in blue below).]
2 Tabs
<div class="enhanceable_content tabs">
<ul style="background-color: #d9ffb2 ;">
<li><a href="#fragment-1"><span>Tab 1</span></a></li>
<li><a href="#fragment-2"><span>Tab 2</span></a></li>
</ul>
<div id="fragment-1">
<h2>TAB 1 stuff goes here</h2>
<p>testing 123. Blah blah blah.</p>
<p>Here is another sentence. </p>
<p> </p>
</div>
<div id="fragment-2">
<h2>TAB 2 stuff goes here</h2>
<p>testing 123. Blah blah blah.</p>
<p>Here is another sentence. </p>
<p> </p>
</div>
</div>
3 Tabs
<div class="enhanceable_content tabs">
<ul>
<li><a href="#tabs-1">TAB 1</a></li>
<li><a href="#tabs-2">TAB 2</a></li>
<li><a href="#tabs-3">TAB 3</a></li>
</ul>
<div id="tabs-1">
<h2>TAB 1 stuff goes here</h2>
<p>testing 123. Blah blah blah.</p>
<p>Here is another sentence. </p>
<p> </p>
</div>
<div id="tabs-2">
<h2>TAB 2 stuff goes here</h2>
<p>testing 123. Blah blah blah.</p>
<p>Here is another sentence. </p>
<p> </p>
</div>
<div id="tabs-3">
<h2>TAB 3 stuff goes here</h2>
<p>testing 123. Blah blah blah.</p>
<p>Here is another sentence. </p>
<p> </p>
</div>
</div>
Button
<p style="text-align: left;"><a id="" class="Button Button--large" title=" " href="https://ccconlineed.instructure.com"> ADD BUTTON TEXT </a></p>
[ NOTE:
In HTML area, change button text, add concise title for screenreader if one is not added automatically when you create link
Go back to the RCE area to highlight button text and link it to appropriate page; you can also change font color and size.
The “text-align” could be center or right, or could be changed to “margin-left: 150px;” if you want to adjust the placement of the buttons]
Button Color and Padding
style="background-color: #6f6f6f; margin-right: 30px;"
[ Once button code above is added, add the code above after the class tag and before the title tag; make sure there’s a space before and after. Adjust color hexadecimal code and padding amount as desired, or remove either altogether.)
NOTE: color or padding parameters may be added to style tag (within the quotes)]