Themes are an important element of the user interface (UI) to ensure a consistent look and feel and to reflect a particular locale. Themes can be edited to incorporate cultural imagery and fonts.

You can add images and change colors through the user interface in other locations as well:

  • Administrators can customize the default brand to reinforce the cultural identity of an Institution.
  • Administrators can use the Theme and Palette Catalog to change the colors that are used throughout Blackboard Learn.
  • Instructors can use the Course Style tool to customize their courses, including the addition of banner images that can reinforce locale.

This section includes detailed information about how to download and edit a theme and suggested tools to use for editing a theme.

Three legacy themes were deprecated in Blackboard Learn SP10: Blackboard Classic, WebCT Classic 1, and WebCT Classic 2. If you continue using one of these themes with your default brand beyond SP9, it will be converted to a custom theme on your system during the upgrade.

Edit themes

Themes downloaded from Blackboard Learn can be edited to change the look and feel of the system. Every theme has a Cascading Style Sheet (CSS) associated with it that determines how the UI appears. Characteristics such as font sizes and types, background images, and other XHTML elements are described by the CSS. Using the Mozilla® Firefox® web browser, and a Firefox add-on called Firebug®, users can easily identify individual CSS elements directly from the UI.

Download and install the latest version of Firefox and Firebug before attempting the following procedures.

Firefox and Firebug

Firefox has a number of programs that have been developed by third parties. One of these is called Firebug and it is used to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Once the elements have been identified, you can use a CSS editor to search for the elements and make changes to the theme's CSS.

Install Firefox

  1. Go to http://www.mozilla.com.
  2. (Optional) Select your language if it's other than English.
  3. Select the green download button.
  4. Follow the installation instructions.
  5. Open Firefox from your desktop.

Install Firebug

  1. Open Firefox.
  2. Open the Tools menu and select Add-ons.
  3. Select Get Add-ons.
  4. Enter Firebug in the search box and select Search.
  5. Select the Firebug icon.
  6. Select Install. Firefox will prompt you to restart the browser after install is complete.
  7. Select Yes.

Use Firebug

Use Firebug to examine the existing CSS and identify all the elements that need to be changed.

  1. Open Firefox.
  2. Select the Firebug icon on the right side of the lower status bar.
  3. Select Inspect.
  4. Use the mouse to hover over the area of the page to inspect.
  5. Select the area to hold your position.
  6. Hover over the XHTML elements in the Firebug console.
  7. Select the XHTML node to expand or minimize the description of the XHTML element.
  8. View the relevant CSS class or ID for the element you have selected on the right side of the Firebug console.
  9. Copy the class or ID name.
  10. Paste the class or ID name into a CSS editor and search for that element.
  11. Make appropriate changes.
  12. Save the CSS when you are finished.

Download and edit the CSS for a theme

Once the CSS elements have been identified, you can edit the CSS using a text editor.

  1. Select Brands and Themes from the Administrator Panel.
  2. Select Theme and Palette Catalog.
  3. For the appropriate theme, open the menu and select Download.
  4. Save the ZIP package.
  5. Open the ZIP package and extract the contents to a safe location.
  6. Open the theme.css file using a text editor.
  7. Make the appropriate changes and save the CSS files.
  8. ZIP the contents back up and save on a local computer.
  9. Return to the Administrator Panel and select Brands and Themes.
  10. Select Theme and Palette Catalog.
  11. Select Create Theme.
  12. Give your theme a name and a reference name. Optionally, add a description.
  13. Select Browse My Computer to locate your new ZIP package.
  14. Select Submit.

Example CSS

Here is a sample of the Schoolhouse theme that is included with Blackboard Learn. The definitions for the heading styles are shown in this example, along with the font family setting.

* {font-family: Cursive, Georgia, Times, serif;}

/* a:focus { Removes focus outline in Firefox (Mozilla) outline:none;

} */

img { /* Centers images vertically and sets borders to 0 */

vertical-align:middle;

border:0px;

}

.hideme {

display:none!important;

}

h1 { /*Equals 19px*/

font-size:148%;

}

h2 {

font-size:123.1%;

}

h3 {

font-size:108%;

}

h1,h2,h3 {

margin:1em 0;

}

h1,h2,h3,h4,h5,h6,strong {

font-weight:bold;

}

System themes and course themes

Course themes were introduced in Service Pack 8 to allow instructors to change the look and feel of there courses. Course themes are separate from system themes. To enable course themes for instructors to use in their course, go to Administrator Panel > Course Settings > Course Themes and Icons and check the box Enable Course Themes.

More on how instructors use course themes

A new system theme needs to have a PNG thumbnail image named after the system theme's reference name. If this file is missing, a missing image symbol will display as the default in the course themes list. The easiest way to create this image in your new system theme is to rename the as_2012.png image provided in the as_2012 theme to your new system theme's reference name. Since the function of the image is indicate that the default course theme is being used and not to show what the theme looks like, renaming the file prevents the missing image symbol from showing in the user interface.

Custom system themes and installing new building blocks

If you have a customized system theme, you may want your customizations to extend to new pages included in a building block that you have installed through Software Updates. Not all building blocks installed this way have their own tool-specific style sheets, but some do.

When installing a building block containing its own style sheets on a system that has at least one custom theme, you will receive an informational receipt during installation. This receipt recommends checking the feature against your custom theme, just as you do when upgrading Learn. You will receive this message when your system has a custom theme already installed, even if that theme is not currently in use.

Information about whether a building block contains tool-specific style sheets is available for any building block in the Administrator Panel. In the Building Blocks section, select Building Blocks, and then select Installed Tools. Open the menu for any building block listed and select View Components. If the Building Block contains tool-specific style sheets for any of the themes that ship with Learn, the theme handles will be listed on this page.

If you manage your custom themes by storing copies of the packages offline, refresh your offline custom theme package by downloading it from the Admin Panel UI after upgrading to SP14 to get a copy with the new package structure introduced in that service pack. No changes to the style sheets themselves will occur, and no other changes to the customization workflow will occur. However, after upgrading to SP 14, offline packages in the prior package structure will no longer be able to be uploaded - an error message is shown in this case.