Templates Explanation

This page offers a simple explanation for some of the template pages, and the choices that were made.

Template Instructions

Alongside the additional Screensteps created to guide teachers, each template includes a banner at the top labeled Instructions, which the teacher must remove before publishing the page.

Banner Images

All templates include a banner image. These images have been optimized in both dimensions and file size to ensure faster loading, especially on slower internet connections.

A few additional banner images have also been added for specific templates (sourced from the Hanze Marketing portal).

Basic Template & Additional Information

01-ENG-Lesson-Basic.html and 02-NL-Lesbeschrijving.html are exact copies of 15-ENG-Additional-Information.html and 16-NL-Extra-Informatie.html. The only difference is that Lesson Basic uses the CSS (paars) color, while Additional Information uses CSS (donkergroen).

This distinction was made to align with the Hanze course template structure: Course Information Unit is green (groen) and Learning Material Unit is purple (paars). This color can be easily adjusted via CSS, without modifying the template itself.

Course Description / Vakbeschrijving

03-ENG-Course-Desc.html and 04-NL-Vakbeschrijving.html are new page templates developed based on feedback. They replicate the style and structure of the ECTS Course Catalogue, with the banner colored CSS (donkergroen) to match the "Course Information" unit.

Planning

05-ENG-Planning.html and 06-NL-Planning.html remain largely unchanged, except for the table, which now includes color styling and additional text blocks beneath it.

Contact Information / Contactgegevens

07-ENG-Contact-Information.html and 08-NL-Contactgegevens.html now use a card-based, two-column layout to accommodate more teachers on the page. There are 22 cards in total, plus one coordinator card at the top. Additional cards cannot be added directly via the visual editor, as the layout breaks — they must be added via the HTML editor.

A detailed Screensteps guide is available for both Contact-Information-Template (English) and Contactgegevens-Template (Dutch). These guides should be published as separate articles due to the lengthy instructions for changing profile pictures, which are not included in the template itself.

Currently, the default image is the new Hanze logo.

Assessment Information / Toetsinformatie

No major changes have been made to 09-ENG-Assessment-Information.html and 10-NL-Toetsinformatie.html beyond styling and minor element reorganization.

Literature / Literatuur

11-ENG-Literature.html and 12-NL-Literatuur.html now present sources as cards, enhanced with larger icons for clarity.

Portflow

13-ENG-Portflow.html and 14-NL-Portflow.html are new templates designed to allow teachers to share Portflow template codes with students.

The template includes an editable section for inserting code. Below the code block are two accordions explaining how to import a template and how to submit a Portflow snapshot.

This template uses CSS (donkerblauw), matching the blue used in the "Submission Point" unit.

Elements

17-ENG-Elements.html and 18-NL-Elements.html are collections of web elements that teachers can copy and paste into the 19-Blank.html template or any other template for customization.

Brightspace's orginial templates were separate templates for features like "Accordion", "Images", and "Tabs". These have now been consolidated into a single template for easier access and use.

The custom elements include:

• Accordion (1 to 6 groups)
• Tabs (2 to 4 groups)
• Lead text
• Blockquote
• Jumbotron
• Alert
• Two Column Panel
• Image sample

A screensteps guide, including video instructions, is also available, demonstrating how to copy/paste elements into the editor.

Blank

19-Blank.html is a redesigned blank template. It contains only a paragraph of placeholder text (lorem ipsum) but includes the custom dependencies to ensure any copy-pasted content functions correctly.