How Do I Style my Course with HTML Style Codes?
This is a cumulative guide of various HTML style codes for Canvas.
This collection of HTML codes will help mange your course content. Learn how to copy and paste HTML code into your course and make your content accessible and visually appealing. Please click on each topic to discover different HTML codes and how to use them.
Canvas created a really nifty HTML style guide, but it’s pretty confusing if you’re not HTML savvy. This hack guide should make things simple and easy for you to customize your course. This list will continue to be updated as new information is discovered and problems arise. If you need any help, please refer to the eLearning support page to find out how to contact an instructional designer.
Note: Style guide options may not work on the mobile app. The content will still be available for the students using the app, it will however not look the same. Tables, images, and video style options will be expressed much of the same way on mobile.
“a id”- this tag will help navigate a long line of text. Think of it like an anchor point. If there is a long line of text, with seemingly endless scrolling, once you hit the bottom, it's back to the top. But if you use “a id” it’ll provide an anchor to the top, and with a simple link at the bottom, it’ll take you all the way back up. No scrolling!
“Class”- “Specifies one or more class names for an element” (w3schools.com). Class helps with customizing certain attributes like buttons, borders and more. Many of the special features in the Canvas style guide utilizes “class”
“Title”- We’ve all seen what a title code does. Whenever your mouse hovers over an image, or a graphic, and a small yellow text icon appears over the item, this is thanks to the “title” html code. It's useful and rather important to help certain screen readers, but also those who have slow browsers or slow internet. A good description of the element will help see what might not show up on other’s screens.
“Href”- This code is where you would link to whatever source you’d like to. Be this an outside source, a video, a different page in your course, or even a destination on the same page.
“Target”- The target tag in the code will help dedicate where the link will open at. In a new tab, same tab, or different window.
“Style”- This tag is used to determine the size of an element in your code, or even the dimensions of it.
Buttons can make your page look more appealing. By using the button HTML codes shown below, you can add some emphasis to your course links. You can also edit the size of your buttons.
Depending on what button style you desire, look at the code and corresponding button bellow. Copy and paste the code into the HTML editor. Then, within your button code, fill in the correct button name, link and title.
To change the title of the button where where the current title of the button is, for example, >Info Button<. The image bellow highlights the area you will change.
To change the title of the button, in the code look for title="Front Page", change the "Front page" to the right title of the button. Keep the quotation marks.
To change the link, look for, href="link", delete the word link and paste your URL inbetween the two quotation marks.
To change the button's size, insert the following code infront of the "title" section of the code. The image bellow illustrates this. You can adjust what ever percent you desire by changing the number.
style="width: 100%;"
<p><a class="btn btn-primary" title="Front Page" href="link">Primary Button</a></p>
<p><a class="btn btn-info" title="Front Page" href="link">Info Button</a></p>
<p><a class="btn btn-success" title="Front Page" href="LINK">Success Button</a></p>
<p><a class="btn btn-warning" title="Front Page" href="LINK">Warning Button</a></p>
<p><a class="btn btn-inverse" title="Front Page">Inverse Button</a></p>Colors can make your course more appealing and easier to navigate.
Make sure to follow color code accessibility guidelines when designing your course. You can check your color pallets with this Color Safe website.
This color scheme editor can help you begin to organize your color pallet choice. Select from their list of colors to be transported to a list of Complimentary Colors, Brighter Colors, Darker Colors, Mix of Black, and Mix of White.
You can also provide your own HTML code, or drag along the color diagram to find your personal color.
To use a color picker for a more specific color choice from an image, use this website, Color Code Picker, upload your image, and drag over the color you desire, click your mouse, and to the right, your color HTML code will be generated next to "HEX Code." Copy and paste that into what you desire to be colored.
You can combine these methods to create a visually appealing and accessible color pallet.
The image title is the little box with a description it when your cursor hovers over an image and button. This is important for instances where the image gets broken, or the image doesn't load. It can explain what the image is, or where the button links to. You will learn how to insert and edit this code into the HTML editor.
title="TITLE GOES HERE"When you embed an image into your page, go into the HTML editor, and paste the title code directly after the "image" text in the code.
With this HTML code, you can embed a PDF and Word Document right into the page to reduce the amount students need to download. You will need to manually type in, "auto_open" in the HTML code to do this.
First create the content of your page, and in the editor section to the right you will see a dialogue box, select the "Files" tab. Find the file you are looking for, select it, and it will appear in your editor as a link.
Now go into the HTML editor and locate the file name within the code.
In the highlighted secion above, where is says, <p><span><a class="instructure_file_link instructure_scribd_file", insert the code "auto_open" (without the quotation marks) after file. Your code will look like this, <p><span><a class="instructure_file_link instructure_scribd_file auto_open"
Select save and now your document will open up on the page.
Line separators are a great way to visually organize content from one section to the next.
This code will allow you to create a rectangle that can hold it's own messege. The color can also be edited. The code for this seperator is bellow.
<div style="background: #30759b;">
<p style="text-align: right; color: #ffffff;"> <br /><i class="icon-arrow-right"></i> Make sure you reviewed both the Readiness and Netiquette information above before clicking "Next" <br /> </p>
</div>To change the color, where the code says, "background: #30759b" replace the color code (the number before the hashtag) to any HTML color code. To find color codes, follow this link to the HTML generator.
You can change the text and color of the text in the Rich Content Editor. Simply click the default text, delete it and retype what you need. To change the color, highlight the text, the in the editor tool bar, select "text color".
This code is thin and a nice visual seperator between information. This code's color and size can also be changed.
<hr style="border: 1px solid #919299;" />To change the color, use any HTML color code. To get a color code, go to this HTML color code generator.
In the code where it says, "#919299", replace the number with the color you choose.
To change the width of the seperator, within the code where it says, "boarder: 1px", change the "1px" to the number you would like it to be.
You will learn how to make your links open in a new web browser window using HTML code.
1. After you have created your link within the Rich Content Editor, go to the HTML editor and find your link which will look similar to this:
<a href="websitename.com">2. Insert this code with a space after the website link:
target="_blank" rel="noopener noreferrer"3. Your final HTML code will look like this:
<a href="websitename.com" target="_blank" rel="noopener noreferrer">Tabs are another way to organize your page to reduce scrolling. This guide will show you how to input the HTML code for tabs, add more tabs, and input your content into the code.
First, create content into a temporary page. Then, copy and paste the tab HTML code below and paste it into the HTML editor, located at the top of the page.
<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1"><span>Online Readiness</span></a></li>
<li><a href="#fragment-2"><span>Netiquette</span></a></li>
</ul>
<div id="fragment-1">
content</div>
<div id="fragment-2">
Content
</div>In the image bellow, locate where it says "Tab 1" and "Tab 2." Delete this and label the tabs what you desire.
Next, as seen in the image bellow, locate where it says "CONTENT." Delete this, and instead replace it with the content you created in the other page. Copy and paste the code for your content, and paste it where you deleted "CONTENT."
To add more tabs, you will need two more parts of the TAB code,
<li><a href="#fragment-1"><span>Tab 1</span></a></li>
and
<div id="fragment-1">CONTENT</div>
First, copy the code listed bellow, and paste it under the area highlighted in the image bellow. Adjust the "fragment" number to the appropriate tab number.
<li><a href="#fragment-4"><span>Tab 2</span></a></li>
Next, copy and paste the code bellow, into the next section shown in the image bellow. Once again, change the "fragment" number to match the appropriate tab number.
<div id="fragment-1">CONTENT</div>
Your tabs should now represent the amount of tabs desired. Follow the steps listed above to edit the tab header as well as the content within the tab.
Adding a Table of Contents allows students to directly navigate to the sections of the Content Page they would like to read and refer back to, without having to scroll through the entire page.
There are two ways to do this. The first option involves creating separate Pages per section of information. The second option is to add HTML code to link to sections of information. Using html code allows all content to be "housed" on one Page.
Powerpoint documents can take up a lot of your storage space in Canvas. One of the ways to avoid this, is to use your Powerpoint as a Google Slide, and embed the presentation right into a Content Page.
First you'll need to upload your Powerpoint into Google Slides. This link shows you how to do this.
- In your Google Slide, go to file < publish to web
- Select embed on the pop up
- Select Publish
- Copy Embed code
Nextstep would be to paste the code you just copied into a Content Page. If you need help knowing how to embed content into a page, follow this Canvas link.
The Canvas tutorial is about embedding a video into Canvas, however, it's the same process with any embed code.