The KSU Document Template for D2L Brightspace
About D2L Brightspace Document Templates
Desire2Learn Brightspace document templates are skeleton files from which other files can be created. They're called document templates to distinguish them from course templates. Document templates are different from something like a Dreamweaver template in that changes to the template's HTML do not propagate to pages that derive from the template. An HTML change will require editing every page. Changes to the CSS do propagate, because the CSS files are incorporated by linking.
You can find instructions for using document templates here: https://documentation.desire2learn.com/en/using-html-document-templates-in-content. There is a collection of document templates here: https://documentation.desire2learn.com/en/accessible-html-templates.
The "KSU" Document Template
The "KSU" document template is derived from the D2l "Neutral" template. The template.css file is unchanged. The background image and KSU logo were added to the images directory. The following changes were made to the theme.css file:
- A comment for the color "KSU gold" was added.
- A style for "#ksulogo" was added
- The img and iframe elements are styled "max-width: 100%;" for better mobile device support.
- The a (anchor) element was reset to font weight normal and the border removed from the "focus pseudo-class for standard handling of links.
- The font-family property was set to "Verdana, Arial, Helvetica, sans-serif;" to take advantage of the Verdana font if present.
- The font-size property was set to 90%, color to black, and background-color and background-image properties were added to the "html" selector.
- Padding on "body" was moved to the div with the ID "content."
- An "@media print" section was added to make the KSU logo non-printing.
HTML Changes
Strictly speaking, these changes should have all been made in the CSS, leaving the HTML unchanged. The absence of hooks, especially for the header, made that impossible, at least for me. To make this work, I added an empty <div> with the ID "ksulogo" immediately after the <body> tag. I avoided the HTML5 <header> element in case the D2L people add a styled header in the future.
Given that I had to touch every HTML file anyway, I also added
<meta name="viewport" content="width=device-width,initial-scale=1">
to the head of every document, the better to allow mobile access.
Exchanged the "Go to top" paragraph for a table to make it easy to add other footer information. This table does the horrible thing of using inline styles because of the way D2L styles tables.
Adding Copyright Information
If you would like to add copyright information, or something else, to the document footer, each time you create a new file, replace the "copyright goes here" comment with your copyright or footer information. It will show up right-aligned on the same line as the "Go to top" link. (You could also edit the template HTML files so that you do this only once.)
Installing the Template
If you have no templates installed in your course, navigate to "Manage Files" (It's in "Site Resources" under "Edit Course.") Upload the zip file and unzip it. Done!
If you have other templates installed, unzip the file on your local computer. Then sign on to D2L, navigate to "html_templates," which should be in root directory of "Manage Files" and create a "KSU" directory. Within "KSU" create directories "css" and "images." Upload the files in "css" and "images" from your local computer to the corresponding directories you just created. Then upload the files from "KSU" on your local computer to the "KSU" directory under "html_templates."
