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, a CSS editor can then be used to search for the elements and changes can be made to the Theme's CSS.

How to Install Firefox

  1. Go to
  2. Click the green download button.
  3. Follow the installation instructions.
  4. 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, the CSS can be edited using a text editor.

  1. Click Brands and Themes from the Administrator Panel.
  2. Click Theme and Palette Catalog.
  3. Or 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 yor theme a name and a reference name. Add a description if desired.
  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.