Was this helpful?

Suggest Improvements

Note: the IDEAS team doesn't provide tech support for custom HTML and CSS, but we know that some instructors already use this, so we have included this information as a resource.

If you are already comfortable editing HTML and CSS code, this section is for you. Here are instructor guides on how to access HTML and which code is allowed in Canvas.

Tips

Before you edit the HTML code, copy the original code and save it in a a text editor like Notepad or TextEdit in case you need to revert back to the original.
If the code you edited doesn't work and you need to restore a previous version of the page, go to the 3 dots (Options) next to the Edit button, then select View Page History.

Table of Contents with Links to Each Section

Help students find things quickly in long pages by inserting a table of contents with links to each section. For example, these links jump down to the sections below:

Floating Boxes
Accordion Menus
Buttons
Other Advanced Techniques
Watch InstructureCon Recording

Get the code and instructions on how to insert a table of contents with links to each section.

Floating Boxes

You may have noticed the floating box in the top right corner of this page that asks "Was this helpful?" This was created using HTML and CSS.

Floating boxes can be used for important reminders, links to resources, or to emphasize due dates.

Floating Boxes: Get the code here

The code below will produce a floating box with the title "Important Note." After you insert the code, you can edit the text and add links through the Canvas Rich Content Editor:

<div class="border border-trbl border-round" style="color: #edeeef; float: right; width: 270px; border: 2px solid #a2aaad; background-color: #f7f7f7; padding: 0 16px 8px 16px; margin: 0 0 10px 10px;">
<h3 style="color: #881c1c; text-align: center;"><strong><span style="font-family: 'trebuchet ms', geneva;">Important Note</span></strong></h3>
<p style="text-align: center;"><strong><span style="color: #000000;">Insert brief note</span></strong></p>
</div>

Accordion Menus

Here is an example of an accordion drop-down menu. Once you insert the code, you can edit the text and insert images from the Canvas Rich Content Editor. Learn how to insert an accordion menu and get the code here.

What is HTML?

HTML stands for Hypertext Markup Language. It is a standard markup language used to create web pages and applications.

What is CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation and visual layout of HTML and other structured documents.

What does Div mean?

"Div" is a commonly used HTML element that stands for "division" or "divider". It is a container element that allows you to group related elements together and apply styles and formatting to them as a group.

Buttons

Buttons are a great way to help students navigate your course and find things quickly. In your Sandbox you have a variety of buttons that use images. The buttons here were created using code:

Home Modules Get Help with Canvas

Buttons: Get the code here

Maroon Button:
<strong><a class="btn btn-large btn-primary" href="https://your-URL-here">your-text-here</a>

Black Button:
<strong><a class="btn btn-large btn-info" href="https://your-URL-here">your-text-here</a>

Other Advanced Techniques

Check out the module "How to create interesting pages in Canvas" in Dr. Sean Nufer's course "How to Canvas." Dr. Nufer also has video tutorials on his website.

Watch: InstructureCon Recording

Jump to top of page