Styling Pages and Assignments

Rationale and brief explanation

I often want a “header” and “footer” across all of my content in a course. Using vanilla Canvas, this is unwieldly, because if I want to change the header and footer, I have to do it in every piece of content – this is error prone, time consuming, and maddening.

So, I wrote a styling system that provides two sets of headers and footers:

  • HTML at the very top and bottom

  • markdown inside that

Essentially, the content gets stacked in this order:

  1. header.html

  2. header.md

  3. source.md

  4. footer.md

  5. footer.html

Making a style

A style in markdown2canvas is a folder containing four files. Their names are important:

  • header.html

  • header.md

  • footer.md

  • footer.html

I hope they’re self-documenting in purpose and content. Here’s what’s in the header.html file for my DS710 course:

<link href="https://media.uwex.edu/app/droplets_v3/css/droplets.css" rel="stylesheet">
<script href="https://media.uwex.edu/app/droplets_v3/script/droplets.js" type="test/javascript"></script>


<div id="uws-droplets-page">

<!-- Droplets elements and components -->

The footer simply closes the div I opened in the header:

</div>

Default style

You can specify a default style to apply to all content for which the style is not directly specified in the meta.json. It’s easy.

Just make a key-value pair in _course_metadata/defaults.json:

"style": "_styles/generic",

The key says the default style is… and the value is the path to the default style FOLDER relative to root of the course.

Custom style

Content can override which style is used, say in case you want all your assignments of a certain type to use one style, and the pages of another type to use their own. It’s easy.

In the meta.json for the content you want to use the non-default style, specify the key-value pair ‘style’:’path/to/style’. For example:

"style":"_styles/programming_assignments",