Данная информация применима только к традиционному представлению.

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.

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.
  6. Open the theme.css file using a text editor.
  7. Make the appropriate changes and save the CSS files.
  8. Compress the contents back into a ZIP file on your 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 building blocks

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

Information about whether a building block contains tool-specific style sheets is available on the Administrator Panel. In the Integrations 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 default Learn themes, the theme handles will be listed on this page.