Getting Started
The Learning Guide Styler consists of two Blackboard items. The first is used to format a navigation page, and the second is for formatting page content.
- Learning content styler
- Learning page styler
These styler items will insert scripts and stylesheets, which format the content of the page, but are not shown in student view.
Tip
Toggling off edit mode will show what the site will look like for students.
Learning guide loader#
The learning content styler creates navigation pages for learning content. It will reformat “Content Folder” items into a card layout. The title of the content folder will become the title of the card. Optionally, a description becomes a summary, and an image can be added as a banner on the card. Finally, a View button is included that links to the contents within that folder.
Academic view
Student view
Setup#
The learning guide styler item can be copied from the sample pages or existing pages in your study material. The advanced section of this documentation has instructions on creating the item manually.
The learning guide styler item should be added as an item on the initial study material landing page. Any content folders added to this page will be transformed into cards. Standard “Content Items” and banner components can be added to this page, but they will ony receive minimal formatting. You will not be able to use any other styler components on this page.
Danger
Editing the loader item requires a specific level of permissions that allows inserting scripts into items. Do not be surprised if the loader breaks if you try to edit it. If this happens, you will need to delete the broken loader item and make a new copy from a working loader item.
Each content folder must contain a title. A description is optional but preferred. The description should be a short summary of the content contained within the folder. A banner image for the card can be added by inserting one (and only one) image into the description field.
When inserting an image to be used as the card banner, it is important to place the image on a new line.
Example
<p><img alt="" src="/path/to/image/xid" width="600" height="242" /></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
The width and height values shown in the example are not important as the image will be automatically resized to fit the card width, and it will be cropped top and bottom to 200 pixels in height. The image should be optimised according to the specifications for a card banner image.
Note
The card banner images are usually decorative and do not need an ALT message for accessibility. Leaving the ALT field empty will tell most electronic readers to ignore the image.
Learning page loader#
The learning page styler is an item that formats the content on the page into a clean structure and will reformat specially marked items with additional component formatting.
Academic view
Student view
Setup#
The learning page styler item can be copied from the sample pages or existing pages in your study material. The advanced section of this documentation has instructions on creating the item manually.
The page must be set to Show “Icons and Text”. This setting is available in the dropdown menu next to the page title, or can be set for the entire site from the Style Settings page (Site Management → Customisation → Style Settings → Default Content View).
Danger
Editing the loader item requires a specific level of permissions that allows inserting scripts into items. Do not be surprised if the loader breaks if you try to edit it. If this happens, you will need to delete the broken loader item and make a new copy from a working loader item.
Warning
If using MathJax equations, unsupported browsers and Blackboard Mobile App users will only see the source math code.
Navigation#
Navigation arrows are automatically added to a learning page based on information gathered from preceding content pages. These arrows will allow the student to jump between sections/concepts/pages sequentially without having to return to the contents page.
Multiple contents pages are allowed, but it is important to remember that the navigation added to the bottom of the page is constrained to consecutive cards.
Consecutive cards#
Cards grouped together on the preceding learning guide styler page define navigation groups for learning pages.
Example
Example 1: A learning guide page with cards “Module 1” to “Module 3”, a description item, and then cards “Module 4” to “Module 6” would only allow navigation between Modules 1 through 3 and Modules 4 through 6 but you would not be able to navigate between Module 3 and Module 4 without returning up to the top contents page.
A sub-contents page of concepts would have it’s own navigation group (C1–C3).
Example 2: A learning guide page with cards “Module 1” to “Module 6” would allow navigation from Module 1 through Module 6.
A sub-contents page of concepts would have it’s own navigation group (C1–C3).
