D2L -Selecting and Using Premade HTML Templates for D2L () Courses (UW-Madison)


UW-Madison is adopting Canvas as the single, centrally supported learning management system, and discontinuing support for Desire2Learn (D2L) and Moodle. Access to D2L and Moodle will permanently end June 1, 2018. For information about retaining materials from D2L or Moodle, please refer to this document.

D2L has provided a number of HTML templates to help you customize your D2L course. Learn how to apply the templates to your course.

Accessible HTML templates

The following template packages were designed by Desire2Learn to make it easier for course instructors to create accessible, professional looking HTML content files.

The templates use a cascading style sheet (CSS) to format the content in HTML files. To use a template effectively, you must save the TemplateFiles folder containing the stylesheet.css file and supporting images in the same root folder as your HTML files and reference the CSS file appropriately.

  • If you upload a template package to the Manage Files area for a course and unzip it, it will be structured properly and the sample files will reference the CSS file correctly.
  • All of the template packages use the same folder structure and folder name "TemplateFiles." This makes it easy to swap out your CSS files for different CSS files if you want to change the appearance of your course content files. However, it also means you should only have one template package saved in Manage Files at a time.

Available templates

To the extent possible under law, Desire2Learn Incorporated has waived all copyright and related or neighboring rights to the accessibility templates listed above.

Add a template package to Manage Files

  1. Save the template package you want to use to your local machine as a zip file.
  2. Go to the Manage Files tool.
  3. At your course root, select  Upload.
  4. Select the template package zip file and click Upload.
  5. Unzip the file.
  6. Use the Manage Files tool to view the HTML files available with the package.
  7. Create copies of the HTML files you want to use as templates in the Content tool.
    • TemplateStyles This file demonstrates each template style
    • TemplateDetails This file provides an overview of accessibility principles related to the different template styles
    • SampleSyllabus This fie contains a sample syllabus using some of the styles
    • SampleContentTopic This file contains a sample content topic using most of the styles

    We suggest that you create copies of the sample HTML files so you always have unedited template files to refer to.

Use a template file in the Content tool

  1. Go to the Content tool.
  2. Create a new Module.
  3. Click New and then Add From Manage Files
  4. Select the copy of the HTML template you want to use as your template and click Add
  5. Next click the downward facing triangle next to the file name and select Edit HTML
  6. Update the file with your course content using the HTML Editor. If you copy, paste and overwrite content in the editor view (WYSIWYG), the style formatting should be maintained.

    NOTE You cannot see all of the template styles and images in the editor. Preview the file periodically to ensure it is formatted as expected.

  7. Click Save.

If you want to create another content topic based on the template topic, you can copy the file you just created or create another new topic based on the copy HTML template file.

Swap CSS files to change the appearance of your HTML content topics

  1. Go to the Manage Files tool.
  2. Open the TemplateFiles folder.
  3. Select and Delete all of the template files.
  4. Save the Desire2Learn template package you want to use to your local machine and unzip it.
  5. Upload all of the files in the TemplateFiles folder of the new package to the TemplateFiles folder in Manage files.

Edit a CSS file to change the appearance of your HTML content topics

  1. Go to the Manage Files tool.
  2. Open the TemplateFiles folder.
  3. Use the context menu to select   Edit File for the stylesheet.css file.
  4. Make your changes and click Save.

Keywords:html, template, css, content, customize, customizing   Doc ID:41783
Owner:Learn@UW Madison .Group:Learn@UW Madison
Created:2014-07-11 11:52 CDTUpdated:2017-12-04 12:29 CDT
Sites:DoIT Help Desk, DoIT Tech Store, Learn@UW Madison
Feedback:  0   0