Components

Overview

Additional formatting can be applied to items using the HTML editor to add special attributes to a wrapping DIV element.

• data-type
• data-decorate

Tip

Having a basic knowledge of HTML Elements will be useful when using these components. There is plenty of online information on the subject (e.g. HTML Elements).

For example, the following code would result in an activity container with a video icon.

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

The HTML editor is can be accessed by clicking the HTML button in the Blackboard editor toolbar.

The Blackboard HTML editor allows you direct access to code for the item content. You have more control in styling your content.

Warning

Changes made directly to the HTML here can be easily broken if they are edited back in the WYSIWYG editor.

Additionally, the HTML editor tries to guess what you are doing and clean up your code automatically. Sometimes it gets it wrong.

Danger

HTML code is written in plain text format and uses straight quotes (e.g. " "). It doesn't understand smart quotes (i.e. quotes that are automatically formatted into left- and right-hand quote symbols - “ ”).

Activity wrapper

The activity type will wrap the content of the item in an activity box. The title of the item will become the title of the activity box, and by default, it will get a pencil icon.

HTML

<div data-type="activity">
  ...insert content here...
</div>

Example:

Wrap the content of the item in a standard activity box.

<div data-type="activity">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing ... anim id est laborum.</p>
<p>\[\begin{align*} f(x) &= x^2\\ g(x) &= \frac{1}{x}\\ F(x) &= \int^a_b \frac{1}{3}x^3 \end{align*}\]</p>
</div>

Academic view

Student view

A data-decorate attribute can be added to the wrapping DIV to replace the default pencil activity icon with another icon.

• data-decorate="reading" - Book icon
• data-decorate="video" - Video icon
• data-decorate="reflect" - Coffee Cup icon
• data-decorate="link" - Chain link icon
• data-decorate="survey" - Bar Chart icon
• data-decorate="file" - Document icon
• data-decorate="assessment" - Question Mark icon

HTML

<div data-type="activity" data-decorate="reflect">
    ...insert content here...
</div>

Well wrapper

The well type will wrap the content of the item in a bordered box with a grey background.

HTML

<div data-type="well">
  ...insert content here...
</div>

Example:

Wrap the content of the item in a well box.

<div data-type="well">
<p>Morbi porta id est vel ... ut eleifend leo, eget commodo dui.</p>
</div>

Academic view

Student view

A data-decorate attribute with a setting of ‘noheading’ can be added to the wrapping DIV to hide the heading.

<div data-type="well" data-decorate="noheading">

Student view

Alternate wrapper

The alternate type is similar to the well wrapper with the exception that the sides extend to the full width of the page. This can be useful for providing a visual break in the flow of content.

HTML

<div data-type="alternate">
  ...insert content here...
</div>

Example:

Wrap the content of the item in an alternate divider.

<div data-type="alternate">
<p>Lorem ipsum dolor sit amet, consectetur ... fringilla elementum ligula.</p>
</div>

Academic view

Student view

The heading of the alternate item is removed by default.

Accordion wrapper

The accordion type will restyle the item content in an accordion framework.

There are two types of accordions. One allows any or all of the tabs to be open at the same time. This is the default accordion. The second only allows one tab to be open at a time.

The content in an accordion item is divided up by the “Heading” style. Each heading <h4> becomes a tab heading, and the following content is gathered into the hidden container under the tab. This repeats for each heading.

Example:

Wrap the content in the default (multiple open) accordion.

<div data-type="accordion">
    <h4>Item 1</h4>
    <p>Lorem ipsum dolor sit amet.</p>
    <h4>Item 2</h4>
    <p>Errem volumus sadipscing duo ex.</p>
</div>

The heading of the accordion item is removed by default.

Multiple open

The multiple open accordion will add an additional button at the top of the accordion that can be used to collapse or expand all the tabs at the same time. This is the default accordion but a data-decorate="multiple" attribute can be added if you want to make it clear that that is the type required.

<div data-type="accordion" data-decorate="multiple">
...
</div>

Academic view

Student view

Single open

The single open accordion will only allow one tab to be open at any one time. Use the data-decorate="single" attribute to signify that this type of accordion is required.

<div data-type="accordion" data-decorate="single">
...
</div>

Academic view

Student view

No heading decoration

The noheading decorator is a special value of the data-decorate attribute that can be used to hide the heading of an item. It can be used on it's own to provide paragraph text without a heading, or in conjunction with some of the other wrapping attributes to remove the heading for those wrappers.

HTML

<div data-decorate="noheading">
  ...insert content here...
</div>

Example:

Hiding the item title with the noheading decorator.

<div data-decorate="noheading">
<p>Lorem ipsum dolor sit amet, consectetur ... fringilla elementum ligula.</p>
</div>

Academic view

Student view

Note

The ‘noheading’ decorator will not work on items that must retain a heading, for example an activity wrapper. It's primary use is in conjunction with a well type or a default item.

Warning

The headings will still be visible to students who use a browser that doesn't work with the styler. Use a sensible heading name even though you are hiding it. (e.g. "Introduction continued" is a more sensible title of an item than "the bit of introduction after the image")

Sidebar link creator

A link to Blackboard sidebar items can be inserted into content by adding a SPAN element with a data-sidebar attribute. The data-sidebar attribute must contain the exact name used in the Blackboard sidebar.

HTML

<span data-sidebar="Sidebar Link Name">... link title ...</span>

The following example will create a link to the same location as the ‘Assignment’ sidebar link.

<p>Access your <span data-sidebar="Assignment">Assignment list</span> from the navigation menu.</p>

Note: this link will still function when a unit is rolled over as it doesn't use the actual URL. It will break if the name of the sidebar item is changed, that is to say, it no longer matches the name in the data-sidebar attribute.

Top Banner image

A page banner can be created by inserting an image item and setting its name to "top-banner". The image will be moved to the very top of the page and expanded to the outer edges.

The top banner image item can be anywhere in the page, and it will be moved to the top, but keeping the page in a logical order will assist students to make sense of the content if the styler does work for them.

The image should be optimised according to the specifications for a banner image.

A top banner image is often just for decoration you do not need to provide an ALT description (i.e. leave it blank), and most e-readers will ignore the image.

Warning

Only use one top banner image. The styler doesn't know any better, and will just add them all to the top of the page.

Banner image

An inline banner can be added to the page by inserting an image item and setting its name to "banner". A banner image is similar to a top banner, but it will appear in item order on the page. The image will be expanded to the edge of the page.

The image should be optimised according to the specifications for a banner image.

A banner image is often just for decoration you do not need to provide an ALT description (i.e. leave it blank), and most e-readers will ignore the image.

Warning

Inline banners can be used to separate areas or provide a creative break in the content. They should be used sparingly so as not to detract from the flow of content.