Brightspace by D2L Tips: Content Templates
Using content templates on your HTML pages in D2L is a great way to keep a consistent design while creating visually-pleasing content as well as adding interactivity. The templates provided by D2L, which use the Bootstrap framework, allow you to create content pages without typing any code. These templates can also be customized to add your institution's colors and logo.
I have updated these templates to include more accessibility and interactivity, including flip cards and simple knowledge checks. They can be found at the d2l-content-templates repository.
Using Templates in D2L
Here are a few other things to keep in mind while using templates:
- Content templates can only be added to HTML pages within Content. They cannot be added to the description areas of modules or items. (Only inline code is possible in description areas.)
- They are not templates in the sense that updating an HTML file in one place will automatically update another HTML file. Applying a template in D2L is more like making a copy of the original template file.
- The templates use Bootstrap 4 and Font Awesome 5, which means you can copy and paste from the Bootstrap and Font Awesome sites to easily change layouts and add more components.
- Even though Bootstrap has some accessibility built in, it is always a good idea to check your pages with the axe DevTools extension for any accessibility issues that need to be addressed before making them available to students. For example, the colors included in Bootstrap are NOT accessible.
- CSS files cannot be edited within D2L, so if you plan to add custom CSS, you will need to create the file on your computer and upload it to D2L. (Note that D2L does not have any version control, so it may be better to code everything on your computer, track changes with Git, and then upload to D2L.)
Edit Images in D2L
Using the Attributes menu, which is found under the + sign in the D2L toolbar when editing HTML pages, you can add some Bootstrap classes to images to change their appearance. These changes do not edit the original image file, and can be undone by deleting the classes from Attributes. In the Class box, paste in rounded-lg for rounded corners, rounded-circle to make a square image a circle (or a rectange image an oval), and img-thumbnail to add a gray border with some padding around the image. If you'd like to use more than one class on an element, separate them by a space.
Responsive Videos and Microsoft Embeds
The video lecture page that is included with the templates contains some code that will make videos reponsive on the page, meaning they will expand to fill 100% of the containing element they are within. You can use this same code to make Microsoft embeds responsive, such as PowerPoint, Excel, or Word embeds using the Web version of these apps. Simply surround the iframe element with a div that includes the responsive classes, similar to the following code:
<div class="embed-responsive embed-responsive-16by9"> <iframe> </iframe> </div>
Change Accordion Behavior
You can also add extra code to change the behavior of accordions. In the current templates, all accordion panels are closed on page load and each accordion panel can be opened regardless of how many others have also been opened. It is possible that only one panel is open on page load and only one panel can be opened at a time. (i.e. as soon as a new panel is opened, the previously opened panel will automatically close).
One Panel Open by Default
Add the class
show to the div tag that has the class
collapse for the panel that you want to be open on page load. The code should look like the following:
Then add the following line of JQuery code to the end of the scripts.min.js file so that the correct arrow icon will show:
<div class="collapse show">
One Panel Open at a Time
data-parent="#accordion_" plus the number of the accordion to every
div tag that has the class of
collapse. For example, every
div for the first accordion on the page would look like the following, while the second accordion on the page would use the number 2, and so on:
<div class="collapse" data-parent="#accordion_1">
Interactive Knowledge Checks
I have created some interactive knowledge checks that can be pasted into HTML pages using the content templates. These exercises are not tracked or graded, but provide students a chance to quickly check their progress as they advance through the course content.
View examples of these knowledge checks and download the code from GitHub. I presented on these interactive additions to the content templates, as well as other accessibility additions, at D2L Fusion in July 2022. All of my updated content template files can be found at the d2l-content-templates repository.