Canvas-ing design ideas

Community Member
14 10 4,456

Over at KristianStill – BELONG – RESPECT – ASPIRE – ACHIEVE  I posted this early exploration into making Canvas courses appear more enticing. Now I find myself review the Canvas Instructional Designers pages.

This week, on the back of the InstructureCon (Canvas conference), the Canvas blog signposted three Canvas Network’s Educator courses. I decided to dip into Course Design Lab: Add Flair to Your Canvas Course by Gerol Petruzella (Mass. College of Liberal Arts) in an effort to improve the design and UX of my new September courses.

This course is designed as a resource for teachers and designers who want to take their Canvas course above and beyond the norm and give their students a truly engaging learning experience.

The course showcased two threads; "embeded media" and "styling tweaks" mainly achieved through HTML code to improve the look and feel of your course pages.

Course navigation was provided by modules three tiles and then the first use of the excellent HTML code - tabs (more on that shortly, a tweak from module two). You can review the embeddable content examples yourself with this word or caution - any embedded content has to pass your local filtering policy. Discussion forums offered a "swop-shop" style posting, with a handful of additional signposts, I quite liked the Edpuzzle site (although there is not an LTi for Canvas) and due to the strict image filtering at school, I am hoping pixabay.com is open.

The "styling tweaks" are listed in easy, intermediate and advanced.

"Drop Capitals" were quite attractive and the "Content box" and  "Shadow Text Box" clearly define important text. Access to an icon library useful.

"Alert buttons" added colour and "Button" the "Popups" added important interaction with the content and later on I learnt about "popovers."

Maybe adding Horizontal Line Across the Page (controlling thickness and colour).

<p style="border-top: 1px solid black;"> </p>
 

All very useful layout or visual signposts and hopefully, these can be added to the Canvas editor in time. However, the styling tweak I am most likely to use the regularly will be tabs. Just a little HTML code offers such improved use of the page estate.

[caption id="attachment_10142" align="aligncenter" width="580"] Taken from Gerol Petruzella's course. The catalyst behind this blog post.[/caption]

There are a number of other Canvas "hacks" showcased on various Canvas pages - sortable content, announcement boxes and popovers for example. I also learnt that in Canvas "alert boxes" and "flash boxes", success=green, alert=orange, error=red and information=blue. For now - I plan to keep it relatively simple for now.

Style tweaks wishlist - "return to top" and for the "Previous" and "Next" buttons be available at the top of the page?

My code notes from Gerol Petruzella's course and other courses and Canvas guides.

Drop Caps

To add a fancy, elegant visual style to your paragraphs (while keeping your text and design accessible!), frame the first letter within your <p> with a <span> tag, as below:

<p><span style="float: left; width: 0.7em; font-size: 400%; font-family: algerian, courier; line-height: 80%;">I</span>n 65, Seneca was...</p>

Shadow Text Box

A shadow text box is a great way to add a little bit of visual flair and emphasis. It's fairly easy to add the coding using the HTML Editor. You can also change the colors of the border and shadow by changing the background-color and solid line color.

Courtesy of James Henson, U of Alabama at Birmingham -

<div style="margin: 50px 15% 50px 15%; background-color: #ccc;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #ccc;">
<p>Lorem ipsum...</p>
</div>
</div>

Your text/content that you want inside the box goes between the <p> tags.</p>

Here it is again with a blue colour scheme.

<div style="margin: 50px 15% 50px 15%; background-color: #0404B4;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #58D3F7; border: 2px solid #0404B4;"><p>Your Text...</p>
</div>
</div>

Borders

Borders are a great way to section your content and emphasize titles. Adding the code is fairly simple in the HTML Editor. You place the code before and after the content you wish to place in the border. Borders can be used for text, pictures, video players, etc.

The code:

<div class="content-box pad-box-mini border border-trbl">
<p>some content here</p>
</div>

Alerts

Error: Sample .alert .alert-error style.

<!-- Error -->
<p>
<div class="alert alert-error">
<strong>Error:</strong> Sample .alert .alert-error style.
</div>
</p>

Success: Sample .alert .alert-success style.

<!-- Success -->
<p>
<div class="alert alert-success">
<strong>Success:</strong> Sample .alert .alert-success style.
</div>
</p>

Information: Sample .alert .alert-info style.

<!-- Alert-info -->
<p>
<div class="alert alert-info">
<strong>Information:</strong> Sample .alert .alert-info style.
</div>
</p>

Buttons

Buttons are a way of creating interesting links within your course, rather than just using the standard hyperlink in blue text. Buttons can be linked to sections of your course, or you may have them link to external sites.

*Make sure to include the code within a <div> tag.

<div><button class="Button" type="button">My Awesome Button</button></div>

There are different colors and styles of buttons that you can add. I've give some of the basic coding, but for more information, check out the Canvas Style Guide.

Popups (later pop-overs)

Another great interactive addition to your course is a popup. This allows you to have a button that retrieves a message. This is great for course information, or for instant feedback on something like a quick practice quiz or study tool. There are a lot of possibilities!

All you need to do is add the following code and keep your label and dialog within the correct <div> tags.

Like other buttons, you can also change the color depending on the style of button you choose.

<div id="dialog_for_link1" class="enhanceable_content dialog">Hard work at the start pays dividends at the end</div>
<p><a id="link1" class="Button" href="#dialog_for_link1">Click to reveal the secret to success</a></p>

Icons

Iconx can be added to plain links or text in the course and may also be added to buttons. You'll find the basic code below, but again, check out the icon library to change the icon to something more applicable to your course.

<a class="icon-add" href="whatever">Add Stuff</a>

Tabs

<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1">TAB 1</a></li>
<li><a href="#fragment-2">TAB 2</a></li>
<li><a href="#fragment-3">TAB 3</a></li>
</ul>
<div id="fragment-1">PUT THE CONTENT FOR THE FIRST TAB HERE</div>
<div id="fragment-2">PUT THE CONTENT FOR THE SECOND TAB HERE.</div>
<div id="fragment-3">PUT THE CONTENT FOR THE THIRD TAB HERE</div>
</div>

Popovers

Hover your cursor over the word "popovers" above, and see what happens! The textbox that will pop-up, will tell you what this example is all about - as will the blue "HTE" text in the following paragraph.

This has been placed in the Advanced module, because while this is a short and simple code snippet, it must be wrapped around the desired term in your text using the HTE which for non-coders can be tricky.

 

<a
data-tooltip='{"tooltipClass":"popover popover-padded", "position":"right"}'
title="Popovers are a word or line of text that when hovered over with a cursor, produces a pop-up text box with explanatory message">
Popovers
</a>

Background colour

Change the background colour

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #f2f2f2;">

 

Background colour or a section

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #f2f2f2; border: thin solid #ccc;">Add text here</div>

[qrcode_display]

Tags (2)
10 Comments
Learner II

Promising myself to master html now. Thanks for your efforts Kristian

Community Member

Thanks for the shout out! kristian.still@focus-school.com

Community Member

This is great! Thanks kristian.still@focus-school.com!

Explorer

Hi kristian.still@focus-school.com 

Thank you for sharing this! G.Petruzella@mcla.edu, myself and a few others have long promoted HTML Canvas hacks for non-coders and coders alike, and the truly awesome scottd@instructure.com‌ created a Canvas shell for us to share them in. It's called Canvashacks Demo Course, and I can enroll you as either a teacher (so that you can contribute) or as a student (so you can learn).

If you are interested, simply DM me with your email address and I will hook you up at the desired level.

I hope this helps, and thanks again for sharing this out to our Community.

Kelley

Community Member

Again, very kind. I am not master - more like magpie.

Magpies – KristianStill 

Anything shinning attracts me - currently its RSS and podcasts.

Community Member

You are very welcome. Not sure its that special, turns our a few Canvas folk (more expereinced than I) have offered similar summaries.

Community Member

Very welcome - TY

Community Member

Nice blog! I'm glad you're braving your way into HTML. You'll eventually want to get familiar with the Canvas HTML Editor Whitelist or you'll spend a good bit of time trying to figure out why the code you wrote just disappeared Smiley Wink 

RSS: Have you heard of Inoreader already? laurakgibbs turned me on to it and I love it! You can read more about one of the ways she uses it at Inoreader: How I Manage Incoming Blog Posts‌.

Podcasts: Me too! I'm on Android and like Pocket Casts because it also has a web player that syncs. Here are a few of my fav podcasts atm though I'm subscribed to way more than I could possibly listen to. Makes for good offline listening.

https://www.relay.fm/rocket

The West Wing Weekly 

TED Radio Hour : NPR 

Community Member

Thanks for the ping, awilliams‌ and hello kristian.still@focus-school.com‌! I think it's great that you are finding all these ways to get around the static sameness of Canvas as it looks out-of-the-box. So many strategies! One thing to beware of: I think the "tabs" javascript support has been disabled, so you'll want to test that out to make sure. I'm pretty sure Instructure disabled that option, and there's no easy workaround.

I don't do any content development inside Canvas because of the limitations it presents (so little real estate that you actually control, and so little control over that real estate), but I love being able to develop content with other tools and then display that inside Canvas. I use a blog for my homepage, and I also have some Diigo-based live RSS feeds (see where it says Projects; those are my students' newest project additions), blog-based RSS feeds (see where it says Blog Stream; those are my students' latest blog posts), and also a Padlet (where it says Mindset; it has items from my students' growth mindset reflections). I keep my courses open so you can see all that here, and if you have any questions I blog about all that here. A lot ha ha. Long live blogging! 🙂

Daily Announcements: MLLL-3043-995 

Instructure
Instructure

Hey kelley.meeusen@cptc.edu‌, I want enrolled! Use my Coach email. Smiley Happy