Themes Showcase

About

Blackboard 9.x contains a flexible user interface which can be easily branded to have the look and feel of your institution. This page has been setup for users to share their notes on customizing the themes in Blackboard 9.x. Additionally, please find information for working with Language Packs here.

Before You Get Started ...

Building a custom theme is easy but requires familiarity with CSS programming and design. If you don't have one or the other, peers or students can be good allies and resource.

Getting Started ...

To build your custom theme go to the Admin tab and download the "Bb Learn" theme from the Theme and Palette Catalog in the Brands & Themes page.

See in this step-by-step page how to Customize a Login Page and how to Customize a Theme Page.

What is a Theme?

Overview

A theme in Bb Learn is a collection of stylesheets organized into a folder. It contains all the stylesheets necessary to support layout, look and feel, and other styling aspects of that theme. For Learn 9.1 Service Pack 8, seven themes with the product:

Bb Learn 2008
Bb Learn 2012
Brushed Metal
Schoolhouse
Bb Learn 2012 - added with Service Pack 8

As of 9.1 Service Pack 10, Bb Classic, WebCT Classic 1 and WebCT Classic 2 will be deprecated. New features built for SP10 will not be styled in these three themes, and clients who want to continue to use them will need to include some additional steps in planning their upgrade to SP10.To assist with this planning and any future theme changes, we have created a Theme DIFF Tool. This tool will let you compare two themes side by side and produce a report listing the differences. More information is available on the Theme DIFF Tool page.

Blackboard will continue to support the use of these retired themes in the same way that we support the use of custom themes in the product today. If you plan to continue using one of these themes with your default brand beyond SP9, or if you are Community Engagement client using one of these themes with any of your institution brands, it will be converted on your system to a custom theme. If you are not using one of these themes on your system, the theme will be intentionally removed on upgrade to SP10.
Clients using any of the other themes - Learn 2012, Learn 2008, Brushed Metal, or Schoolhouse - will not be affected by this change. Clients who have customized their system theme will not be affected by this change, regardless of the "source theme" used for the custom theme.

Themes are located in blackboard/docs/themes directory. Note: ignore themes with "_temp" in their folder name. These will be removed eventually.

CSS

Anatomy of a theme

Internal structure is identical for all themes. Every theme contains a folder for theme-specific images and the same number of stylesheets. Although their filenames are identical and they are responsible for styling the same UI areas,stylesheets are not interchangeable between themes.

List of stylesheets (as of Blackboard Learn™, Release 9.1):

Stylesheet	Purpose
`theme.css`	Imports all other stylesheets in the theme folder (except for `theme_rtl.css`)

`theme_defaults.css`	Resets browser defaults and sets theme default styles.
`layout.css`	Controls UI layout.

`utilities.css`	Provides often-used, component-independent styles.

`controls.css`	Contains styles for all kinds of controls.

`page_components.css`	Contains styles for various page components which are uwidely used throughout the application.
`tabs.css`	Styles for all kinds of tabs.
`palettes.css`	Contains styles for side menu palettes.
`modules.css`	Provides styles for portal page modules.
`lists.css`	Contains styles for content area display lists.
`inventory_tables.css`	Contains styles for inventory tables throughout the application.
`dynamic_elements.css`	Styles for dynamically appearing components.

`login.css`	Login page styles.
`data_collection.css`	Styles for data collection page and components specific to that page.
`calendar.css`	Calendar tool page.
`blogs.css`	Blog, journal, and wiki tool styles.
`gradebook.css`	Portion of styles used in gradebook (the rest is in `Bb/LS/mainline/base/docs/ui/styles/ngui/gradebook2.css`)
`reports.css`	Styles used in reports.
`assessments.css`	Assessments tool styles.
`discussion_board.css`	Discussion board styles.
`wizard.css`	Course creation wizard styles.
`outcomes.css`	Outcomes tool styles (the rest is in `Bb/LS/mainline/base/docs/ui/styles/ngui/style_caliper_homepage.css` and `style_caliper_leftnav.css`)

`temporary.css`	Contains new styles specific to features being introduced in a new release. Once cleaned up, styles from this stylesheet are moved to their permanent locations in the files listed above.

CSS

Color Palettes

A color palette consists of a single stylesheet containing mostly color information. Color palettes are designed for use with the default themes. When applied, colors in the color palette stylesheet will override values defined in the theme.

Custom Themes and Color Palettes
Custom themes allow developers to edit existing css attributes and add any number of new ones. Because of these changes color palettes may not work as expected. Attributes in the default color palettes match those found in the default themes and will may not catch newly introduced ones. In this case, custom palettes will need to be created as well.

Color palettes are located in Bb/LS/mainline/base/docs/colorpalettes directory.

Go to the Custom Theme Tips Tricks and Tweaks page to find out hidden secrets and share tips on how to make it work. We've also started a thread in the forum for discussing your ideas.

Resource Files

	Download a Photoshop template to get you started.
	Download a Photoshop template for Content Area to get you started.
	Download Custom Login Page and Theme HOWTO
	Download JWU Case Study and see how you can highly customize Blackboard Learn.