This article discusses the use of a content styler that improves the visual design and function of modules created for unit learning sites. This enhances the student experience of self-access unit materials delivered using the Southern Cross Model.

What is the Content Styler?

The Content Styler is a script that styles the content placed into Blackboard unit modules. It provides an engaging and modern look that improves the functionality of learning sites, including linking module pages with navigation buttons and improving accessibility and support for mobile devices. The styler contains a content styler script item, images, and placeholder content to help build your unit modules.

The Content Styler must be imported into your learning site through an importing process. After this is complete, the styler will appear under Unit Content in the learning site menu.

Figure 1: Content Styler location in a unit learning site

Please check your content styler version

In January 2023, an updated version of the content styler was released that improves loading speed, browser compatibility, and accessibility. The second version is not backward compatible with the original version. The following support article covers the new content styler version 2. The previous version will still function in existing unit sites, but is no longer recommended for use with new units.

You can verify which version of the content styler is being used in your unit learning site by turning Edit Mode Off, clicking on Unit Content, and then looking for "Content Styler v2" in the Site Management panel. If this text is not showing, you are using the original version.

Please contact ctl@scu.edu.au if you need help with the transition of preexisting unit site content into the new content styler.

What can the Content Styler do?

The content styler includes a number of features that improve the visual appeal and functionality of Blackboard sites, by applying modern web design standards. The content styler will automatically adjust for different screen sizes and viewports, ensuring that videos, images, and text dynamically resize to suit the device automatically. These changes improve readability which aids student retention of information and better supports panning and scanning module content.

Figure 2: The Content Styler adapts to mobile and desktop screens automatically.

Test out your learning site on mobile!

Did you know that more than 30% of Southern Cross University students access their unit learning sites using a mobile device? Use your mobile device to try out the styler!

Advanced features

The Content Styler also includes other advanced features, including progress bar tracking, control over the spacing of items, removing main headings, and changing icons for activities. You can learn more about the features of the content styler in the following article: Features of the Content Styler.

Getting started

Where you are developing a new unit site and are interested in using the content styler to develop Blackboard unit modules, your CTL Educational Designer can assist you with the learning design and development process. If you do not currently have an Educational Designer, you can send a support request to ctl@scu.edu.au, and someone will contact you.

Choose a modern web browser

Any modern browser, including Google Chrome, Microsoft Edge, Firefox, or Safari are suitable for use with the content styler. The styler may, not function as intended with older browsers (such as Internet Explorer) and is not compatible with the Blackboard mobile application.

How do I get access to the styler?

Where you have been allocated a CTL Educational Designer, they will import the content styler into a unit site for you. If you need access to the styler urgently, you can also contact ctl@scu.edu.au with the unit code and term of the unit that requires the content styler.

If you need help with the transition of older unit site content into the new content styler, it is essential to contact ctl@scu.edu.au to manage this for you.

Viewing the Content Styler

The Content Styler works by loading a script from a Blackboard item called the 'content-styler', which is located by default at the top of each page located in the unit content area. Every Blackboard page that requires the styler must have this content-styler item present. You can find the styler in your unit site (after it has been imported) by clicking Unit Content in the learning site menu. Students are unable to see this content-styler item, they will only see the activated and styled page content.

Figure 3: The Content Styler item located inside a Unit Content folder.

Do not edit, move or hide the content styler item

To avoid breaking the content styler, it is essential that you DO NOT EDIT the content-styler item. DO NOT change the name of the "content-styler" item, and DO NOT hide it from students or it will not activate.

You can safely minimise the content-styler item to save space by clicking on the collapse arrow at the top right (circled in green below).

The content styler script only activates when Blackboard edit mode is turned off, or student view mode is active. You can access these modes from the top right of a Blackboard learning site.
Note: when activated, the styler script item will automatically load, and after a few seconds, the page will be styled.

Figure 4: Activated Content Styler reformats the page when Edit Mode is turned OFF.

Activate the Content Styler

You can preview the styler by clicking Edit Mode until it turns OFF, and you can view the page as a student by clicking Student View.
It can be helpful to login with two different browsers/devices to help swap between edit modes faster.

Mode	Function
	The content styler is not active and the content can be edited
	The content styler is activated and the page is restyled
	The content styler is activated and the page is restyled showing only the content available to students

How does the content styler format content?

The Content Styler changes the formatting of content items created in the Unit Content area of a Blackboard learning site. These Blackboard Items are created using the Build Content menu. By default, the Content Styler automatically will format text and headings automatically, resize and embed Clickview, Mediasite and YouTube videos, and turn web and site links into clickable buttons.

Figure 5: The Build Content menu in Blackboard.

Avoid these content types!

It is advised to avoid using Learning Module and Blank page since the styler provides better navigation and functionality, which supersedes these Blackboard content types. In addition, any content placed inside these content types cannot be styled.

How do I customise the Content Styler?

When the content styler is activated, in addition to identifying standard Blackboard content types, it scans for wildcards that identify specific item formatting changes. Wildcards are simply symbols that represent the different styler options, such as making activity boxes, changing icons or choosing a background colour. Watch the following short video which illustrates the customizations possible using the Content Styler wildcards.

How do Wildcards work?

Wildcards are placed within square brackets [ ] and added to the Blackboard Item name. These wildcards can be combined together to format an item in a range of ways (e.g. specify colour, an icon to use, spacing between items, or removing an item heading). A common wildcard, for example, is an asterisk * that can be used to create activity boxes.

The process of creating an activity box (using an asterisk * wildcard) would be as follows:

Create a New Item using Build Content > Item
Name the Blackboard Item with a title e.g. Revision Activity, and then add the activity wildcard in square brackets [*]
Add the details of the activity, and then click Submit to save the item.
Turn Edit Mode OFF to activate the styler. The activity box is styled around the item.

What wildcards can I use?

You can view and print this handy cheatsheet that lists the most commonly used wildcards and how they can be combined to style items.

What if I have a problem with the Content Styler?

In the first instance, you can check the Troubleshooting the Content Styler v2 guide, which covers issues that you may encounter using the content styler. If you are still unable to resolve your issue you can request further assistance through ctl@scu.edu.au.

Further information about the Content Styler

Please see the following articles to learn more about how the Content Styler functions, what wildcards can do, and steps involved in troubleshooting issues with the content styler.