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

HTML Snippets

Accessible Red Text
Indented Block Quote
Image Border
Image Padding
Header Background
Horizontal Rule
Double Line
Solid Background Textbox
Double Border Textbox
Shadow Textbox
Sidebar Textbox
Title Bar Textbox
Columns
Indent List
Tabs with Colored Backgrounds
Button
Button Color and Padding

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

TEXT

Indented Block Quote

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

cherry blossoms

Image Padding

[ 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;”]

cherry blossoms 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

TEXT

TEXT

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

Solid Background Textbox

</div>

TEXT GOES HERE

Double Border Textbox

TEXT

Shadow Textbox

</div>

</div>

TEXT

Sidebar Textbox

TEXT GOES HERE

Title Bar Textbox

[You may have to play around with the height to fit your content ]

<p style="color: #ffffff; background-color: #922b21; text-align: center; margin: auto;"> TITLE TEXT </p>

</div>

</div>

TITLE TEXT

TEXT GOES HERE

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>

</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

</ul>

       <h2>TAB 1 stuff goes here</h2>
       <p>testing 123. Blah blah blah.</p>
       <p>Here is another sentence. </p>
       <p>   </p>

</div>

       <h2>TAB 2 stuff goes here</h2>
       <p>testing 123. Blah blah blah.</p>
       <p>Here is another sentence. </p>
       <p>   </p>

</div>

</div>

Tab 1
Tab 2

TAB 1 stuff goes here

testing 123. Blah blah blah.

Here is another sentence.

TAB 2 stuff goes here

testing 123. Blah blah blah.

Here is another sentence.

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> &nbsp; </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> &nbsp; </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> &nbsp; </p>
  </div>
</div>

TAB 1
TAB 2
TAB 3

TAB 1 stuff goes here

testing 123. Blah blah blah.

Here is another sentence.

TAB 2 stuff goes here

testing 123. Blah blah blah.

Here is another sentence.

TAB 3 stuff goes here

testing 123. Blah blah blah.

Here is another sentence.

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]

ADD BUTTON TEXT

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)]

ADD BUTTON TEXT