Advanced

The styler uses a CSS framework called Bootstrap 4. It has many more features that are not specifically compatible with Blackboard but can be coded manually.

Note

Some Bootstrap features offers no benefit in this project or causes problems and have been turned off.

Manual styler creation

Danger

Creating and editing a loader item requires a specific level of permissions that allows scripts. Do not be surprised if the loader breaks when trying to edit it.

Learning guide styler

The learning guide loader item can be created as a new item named “Learning Guide Styler” and add the following HTML code.

HTML

<div id="lg-loader">
    <p>The content in this learning guide is best viewed with a modern web browser.</p>
    <p><strong>Do not edit this item.</strong> v1.2.0g</p>
    <div style="visibility: hidden;">
        <p id="courseRole">@X@course.role@X@</p>
    </div>
    <p>
        <script>/*<![CDATA[*/(function () {window.contentStylerData = { 'id': '@X@user.pk_string@X@', 'courseId': '@X@course.pk_string@X@', 'contentId': '@X@content.id@X@' };const c = document.createElement('script');c.src = `https://${window.location.hostname}/bbcswebdav/institution/global-resources/scripts/learningGuideLoader/commons.js`;c.defer = true;c.type = 'text/javascript';document.head.appendChild(c);const g = document.createElement('script');g.src = `https://${window.location.hostname}/bbcswebdav/institution/global-resources/scripts/learningGuideLoader/learning_guide.js`;g.defer = true;g.type = 'text/javascript';document.head.appendChild(g)})();/*]]>*/</script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async="" type="text/javascript"></script>
    </p>
</div>

Learning page styler

The learning guide loader item can be created as a new item named “Learning Page Styler” and add the following HTML code.

HTML

<div id="lp-loader">
    <p>The content in this learning guide is best viewed with a modern web browser.</p>
    <p><strong>Do not edit this item.</strong> v1.2.0p</p>
    <div style="visibility: hidden;">
        <p id="courseRole">@X@course.role@X@</p>
    </div>
    <p>
        <script>/*<![CDATA[*/(function () {window.contentStylerData = { 'id': '@X@user.pk_string@X@', 'courseId': '@X@course.pk_string@X@', 'contentId': '@X@content.id@X@' };const c = document.createElement('script');c.src = `https://${window.location.hostname}/bbcswebdav/institution/global-resources/scripts/learningGuideLoader/commons.js`;c.defer = true;c.type = 'text/javascript';document.head.appendChild(c);const p = document.createElement('script');p.src = `https://${window.location.hostname}/bbcswebdav/institution/global-resources/scripts/learningGuideLoader/learning_page.js`;p.defer = true;p.type = 'text/javascript';document.head.appendChild(p)})();/*]]>*/</script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async="" type="text/javascript"></script>
    </p>
</div>

Note

The page must be set to Show “Icons and Text”. This setting is available in the dropdown 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).

MathJax

The MathJax equations can be inserted into pages and will allow the use of MathML, TeX or ASCIImath input.

Warning

Blackboard Mobile App users will only see the source math code.

TODO: Maybe shift some things into a resources page with links

T_EX

http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm

MathML

Embed responsive

Items that are manually embedded can have different aspect ratios. Bootstrap provides classes for the most common ratio's.

21:9 aspect ratio

HTML

<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

16:9 aspect ratio

HTML

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

4:3 aspect ratio

HTML

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

1:1 aspect ratio

HTML

<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Grouping

The data-group attribute is used to group consecutive items together into one wrapper. The number supplied will be the number of following items to group into the current wrapper.

Warning

It should be used sparingly, and where there is no other alternative. For example there would be no point in grouping a web link as the current item could simply have a link inserted.

The primary usage for this attribute would be to group a Blackboard Video item or Blackboard Image item into an activity wrapper.

HTML

<div data-type="activity" data-decorate="video" data-group="1">
  ...insert content here...
</div>

<div data-type="activity" data-decorate="video" data-group="1">
<p>Donec pulvinar condimentum ultrices. Sed sodales ... ut eleifend leo, eget commodo dui.</p>
</div>

Academic view

Student view

Note

If another wrapper is encountered with a group attribute it will stop wrapping any more for the current wrapper and start again with the new wrapper and group counter.

Note

Certain items will not be grouped such as Web Links, Assessments, etc., but will count towards the group. This may change in future development.

Figures inline with caption

A caption can be added to a figure by wrapping the image in a FIGURE element and adding a FIGCAPTION element.

<figure class="figure"
    <img class="figure-img img-fluid rounded" src="...image url..." alt="...accessibility description...">
    <figcaption class="figure-caption text-right">...caption text...</figcaption>
</figure>

More Bootstrap

TODO: Advanced bootstrap stuff

Danger

The HTML editor can easily break the code some of these features.

<div class="col-6">…</div>