Access Keys:
Skip to content (Access Key - 0)

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.

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.

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.

Themes Showcase

Share with us what you have done!

NG Playground: Green
NG Playground: Yellow
Virtual School
ProEd Theme
  1. 02 Nov 2010

    Rick Dijs says:

    Dear Blackboard specialist, Blackboard 9.1 is (as I understood) Firefox complia...

    Dear Blackboard specialist,

    Blackboard 9.1 is (as I understood) Firefox compliant, but what we notice:
    If you create a Course with "menu-buttons" the alignment of these buttons is NOT ok.

    While if you look at the same course in IE the alignment is ok.
    Is there any easy way to solve this, within the CSS files?

    Buttons in Internet Explorer:

    Buttons in Firefox:

    I hope you have a solution for me.
    With gratitude and regards,
    Rick Dijs
    Avans University of applied sciences Breda the Netherlands.

Adaptavist Theme Builder (4.1.3) Powered by Atlassian Confluence 3.3, the Enterprise Wiki