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. We currently ship six themes with the product:

BB Learn (default theme)
Bb Classic (BB 8.0)
WebCT Classic 1 (WebCT Vista)
WebCT Classic 2 (WebCT CE4)
Brushed Metal
Schoolhouse

Themes are located in Bb/LS/mainline/base/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.