Skip to content

Changing the appearance of the content#

Why and What?#

Required knowledge

Using this feature requires technical knowledge and resources, including:

  • Ability to use Cascading Style Sheets (CSS) to style HTML.
  • A public web server on which to host a new CSS file.

To display Word documents on the web, the Content Interface converts Word styles (e.g. Quote; Activity; Reading; Blackboard Content Link etc) into HTML elements. Each of these HTML elements come with an existing style. For example, Figure 1 shows the default styling for the Activity style.

Figure 1 - Default Activity style

The default styles may not be appropriate for your purpose. The following shows how you can change these default styles. For example, rather than the default styling of Activity shown in Figure 1, you might prefer the styling of Activity shown in Figure 2.

Figure 2 - A different styling for the Activity style

Separation of content and presentation

This change in the presentation (look/style) of your content does not require any change to the content. This is an example of the benefits of the separation of content and presentation.

How to do it#

The default appearance of how content is displayed is defined by the default CSS file – gu_study.css. To change the appearance, you will be changing or replacing this CSS file.

1. Create your own Content Interface CSS file#

While there are other options, the current recommendation is that you create your own CSS file for the Content Interface. A simple way to start would be to copy the gu_study.css file and make changes.

You can choose to replace all or part of the existing styling. For example, the CSS file used in Figure 2 has only modified the .activity and .activityImage CSS styles to change the appearance of the Activity Word style

If you’re new to CSS, there is a plethora of tutorials and other guidance available on the Web. For example, this tutorial for getting started with HTML and CSS.

Those with good HTML/CSS knowledge will know that there are options.

2. Make it available via a web server#

To work with the Content Interface, your newly created CSS file needs to have a URL that can be accessed by the people viewing your content.

For example, the CSS file used in Figure 2 has this URL https://djon.es/gu/css/com14_study.css

3. Add it to a Content Interface page#

All that’s left to do is to tell the Content Interface that it should not use the default CSS file. Instead, it should use your new CSS file.

To do this you add a Web Link item to the Content Interface page in Blackboard with the following details

  • Name – exactly cssURL.
  • URL – the URL for your new CSS file.

For example, see Figure 3.

Figure 3 - Create a cssURL web link