❗️IMPORTANT NOTICE: We have now released brand new HTML Templates Version 5.0! 🎉Learn more about this update in our HTML Templates Version 5.0 article, where you'll also be able to access the free download and a link to browse the new templates in the Learning Center.
Create great looking, responsive, accessible, and now interactive content topic pages using the page layouts provided in the attached template package. The included instructor-friendly layouts are designed to be edited using the HTML Editor in the Learning Environment.
To Get Started:
1) Download the template package Brightspace_HTML_Template_v3.zip
2) Follow the step by step instruction document within the package Brightspace_HTML_Template_Guide_v3.0. docx
*Note it can be helpful to upload the templates in a module or unit that is set to draft for Instructors, to help them add elements to the pages they're building. Brightspace Instructors and Administrators can also use the pre-loaded resources in the Learning Center (on one browser tab or monitor) and access the copy code buttons from that environment and paste this interactive code into the page they're creating (in another browser tab or monitor).
Import HTML Templates Version 3.0
Edit and Add Dynamic Elements Using HTML Templates Version 3.0
Known Issues
- These templates are currently not recommended for learning material that is intended for printing and saving outside of the learning environment.
- To create a course back-up or to keep a copy of the course for your own records, it is recommended to store the HTML templates at the course level, and use the Import/Export/Copy Components Tool to Export the course package, and "include course files in the export package," as well as "All Items" under "Course Appearance."
- We recommend adding images into a template page using the "Insert Image" or "Insert Stuff" buttons in the HTML Editor. This makes it easier to add your Alternative Text. If you paste an image inside of the template, you will not be prompted to add the alt text until you run the accessibility checker.
- When adding templates for use in the New Content Experience/ Lessons, it is recommended that you type the file path for the templates in the config variable browser value (step 2, #5 in the Brightspace_HTML_Template_Guide) copying and pasting the file path can lead to formatting problems that will prevent easy access to the templates from within a course.
For customers using the sample HTML v3.0 Templates: Video Lecture page: Please be aware that after the 20.23.03 update, videos hosted in the Brightspace Media Library are responsive automatically without having to insert videos into the video wrapper sections. For Brightspace Media Library videos to display correctly using the sample HTML v3.0 Templates: Video Lecture page, a CSS revision is required. The steps are outlined below.
Note: Customers using the C+ HTML Templates or not using the custom HTML Templates are not impacted.
- In the folder containing your copy of the HTML Templates, go to the _assets/css/ folder
- Edit the custom.css file. The file can be edited:
- Directly in the Manage Files view by selecting the drop-down menu and choosing Edit File.
- By downloading, making edits in a code editor, and reuploading the file.
Add the following code snippet:
.video-wrapper iframe[src*="/d2l/wcs/mp/mediaplayer.d2l"] {
position: relative;
min-width: 100%;
margin: auto;
display: block;
}
.video-wrapper iframe[src*="/d2l/wcs/mp/mediaplayer.d2l"]:not([style]) {
max-width: 100%;
min-height: 340px;
}
.embed-responsive:has(iframe[src*="/d2l/wcs/mp/mediaplayer.d2l"])::before {
display: none;
}
Videos from the Brightspace Media Library will now display correctly in the provided video wrapper section.
What Do They Look Like?
This is just a small sample of the page styles you get in this free download!
You can see a live version of the templates in Brightspace.
Learn More About the Updated Templates in the Learning Center
Stop on by the Learning Center to browse through the templates.
Note: Learning Center Access is provided to Instructors and Administrators who are currently using Brightspace. You must be signed into the Community with your School or Organization's email address to verify your access to freemium and premium Learning Center content.
File Name:
Brightspace_HTML_Template_v3.zip
Date Published: May 2020
Description: This template is designed to help non-developers create responsive, accessible, and interactive content pages using the Brightspace HTML Editor (WYSIWYG editor). This version now includes:
- Interactive elements including accordions and tabs
- Updated Sample page styles
- Template Install Instructions now located outside of the zip package
- Additional resources in the Learning Center including new Copy Code buttons to make it easier to copy and paste elements
Previous Version 2.0
File Name:
Daylight_HTML_Template_v2.zip
Date Published: May 2018
Description: This template is designed to help non-developers create clean, functional, and professional content pages using the Brightspace HTML Editor (WYSIWYG editor). The templated pages are fully responsive and accessible. Moreover, in this version:
- A simplified file structure makes template set-up easier
- Improved CSS makes content editing easier
- Single-column layouts simplify page editing
- Template sample content now contains instructions and best practices to guide users
Client Spotlight
At our Virtual Fusion in December 2020, we were joined by 2 Brightspace Superheroes who shared about their experiences using HTML Templates at their places of learning.
Access the Customized Templates used at Minnesota State College Southeast and generously contributed by John Bayerl, the former Director of Teaching Excellence at Minnesota State College Southeast
Watch the recorded Fusion presentation to hear more about the use HTML Templates from John Bayerl of Minnesota State College Southeast and Jeff Cummings of Wellington Catholic District School Board in Ontario.
Access the Course
📝 You must be a Brightspace client and logged into the new Single Sign on for Community to access this resource
Languages Available: English
Feedback and Support
Although we hope to make additional improvements to HTML Template V3 in the future, at this point D2L is not committed to supporting or maintaining it. Nevertheless, we welcome your feedback and encourage you to share tips, tricks, extensions, etc., with your fellow Community members!
