Skip to main content
Blackboard Help


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 on how to download and edit a theme and suggested tools to use for editing a theme.

Editing 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.

How to Install Firefox

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

How to Install Firebug

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

How to Use Firebug

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

  1. Open Firefox.
  2. Click on the Firebug icon on the right side of the lower status bar.
  3. Click Inspect.
  4. Use the mouse to hover over the area of the page to inspect.
  5. Click the area to hold your position.
  6. Hover over the XHTML elements in the Firebug console.
  7. Click on 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 by right clicking.
  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.

How to 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. Click Brands and Themes from the Administrator Panel.
  2. Click Theme and Palette Catalog.
  3. For the appropriate theme, access the contextual 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 click Brands and Themes.
  10. Click Theme and Palette Catalog.
  11. Click Create Theme.
  12. Give your theme a name and a reference name. Optionally, add a description.
  13. Click Browse My Computer to locate your new ZIP package.
  14. Click 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 */




.hideme {



h1 { /*Equals 19px*/



h2 {



h3 {



h1,h2,h3 {

margin:1em 0;


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



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. However, 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 the 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. Access the contextual 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 in order 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 SP14, offline packages in the prior package structure will no longer be able to be uploaded - an error message is shown in this case.