Instructurecon 2022

On July 14^th this year, I had the opportunity to attend InstructureCon 2022, an event organized by Instructure, the maker of Canvas. This is a one-day free virtual learning event for educators and edtech users featuring keynote addresses by well-known thought leaders Simone Giertz and Adam Grant. It was difficult to choose between the more than 50 sessions offered, but I was particularly drawn to one by Sean Nufer. Dr. Nufer is the Director of Teaching and Learning at TCS Education System, and a current Canvas Educator of the Year and recipient of the Online Learning Consortium 2020 Excellence and Innovation in Online Teaching Award.

The session was titled “Create Amazing Content in Canvas” and featured a few tips and tricks to enhance our Canvas content. It does, however, involve editing in the html editor and inserting html codes. For your convenience, I’ll give you the html codes so you can easily copy and paste to your Canvas course pages. Let me share a few of the tips.

1. Customize a horizontal line to separate page content.

In the Rich Content Editor, you can insert a horizontal line that will run across the page. But you can customize the horizontal line by expanding the code <hr /> to this <hr style=”border-top: 5px dotted #8c8b8b; margin: 25px auto; width: 50%;” />

5px: the line is 5 pixels in width

Dotted: it’s a dotted line versus a solid line

#8c8b8b: it’s the color code. You can get whatever color code from the internet and replace it.

Margin: 25px auto: You have a margin of 25 pixels top and bottom of the line; and “auto” means that the line is centered.

width: 50%: The line will be centered and covers 50% of the screen. If you resize your browser, the line will adjust accordingly. If you delete this code, the line will cover the entire screen.

2. Create a colored background for your text.

To add some variation and creativity to the default black text on white background, here are the html codes for the colored background text featured below:

<div style=”background-color: #dce2e5; padding: 25px;”>

<h3 style=”background-color: #adbcc2; color: #4e606a; padding: 25px; margin-bottom: 20px;”>Portland fixie ramps salvia ennui tote bag paleo</h3>

<p>XOXO DIY PBR&B food truck pok pok locavore humblebrag ramps keffiyeh. Tote bag live-edge vegan health goth affogato. Ugh flannel 90’s drinking vinegar, green juice pitchfork hell of. Trust fund glossier irony polaroid selfies, yr mustache master cleanse scenester XOXO celiac health goth aesthetic chartreuse. Paleo raw denim authentic cray poutine tumeric pop-up. Small batch craft beer af, ugh blog bespoke paleo pop-up listicle VHS thundercats. Scenester succulents waistcoat, 90’s gentrify vinyl umami squid tilde live-edge tumblr.</p>

</div>

You can easily change the color codes, padding, and margins. (The color codes start with a # sign, for example, “#dce2e5”). If you wish to change the image, simply replace the image URL in the highlighted code above. You may go to https://unsplash.com/ to get the URL of your favorite image or simply upload it to Canvas. The code can be deleted completely if you prefer not to have an image. (I have highlighted the code above in blue). You can then just replace the text with your own. The quickest way to avoid accidentally deleting a code is to switch to the Rich Content Editor when replacing the text.

3. Embed your Padlet or website into Canvas.

If you have a personal website or Padlet and you want that to appear within your Canvas page, copy the embed code from your site and paste it using the html editor. That way, your webpage will open within Canvas and not divert you to an external site.

Therefore, instead of this: