Changing the appearance of the accordions

What and why?

Figure 1 shows two versions of the same document displayed using the Content Interface. The major difference between the two versions is the “theme” being used to display the accordion interface elements. Note the difference in colour between the different accordion elements.

The left-hand version has grey backgrounds for accordions that are not active. The active accordion element has a white background.

The right-hand version has a blue background for non-active accordions. The active accordion element has a green background.

Figure 1 - Same Content Interface, but different styling

You can choose a theme from an existing collection of themes to change the appearance of the accordions on your page. The following shows how.

Background

The Content Interface uses jQuery – “a fast, small, and feature-right Javascript library” - to implement the accordion interface. jQuery supports the notion of themes, which can be used to modify how interfaces built with jQuery are displayed.

The visible change in colours illustrated in Figure 1 is done by changing the jQuery theme being used.

The jQuery Theme Roller is a website that allows you to create, customise and download jQuery themes – it allows you to roll your own. At least with some technical knowledge.

Rather than explain how to roll your own jQuery theme. The focus here is on choosing for the collection of currently available themes.

Available themes

The jQuery Theme Roller provides a Gallery section (circled in red in Figure 2). It provides a list of all the available themes. Clicking on a particular theme will apply that theme to the rest of the page. Allowing you to try the different themes in action. The following table lists all the currently available themes.

Base	Start	Smoothness	Redmond
Sunny	Overcast	Flick	Pepper Grinder
UI lightness	UI darkness	Le frog	Eggplant
Dark Hive	Cupertino	Blitzer	South Street
Humanity	Hot Sneaks	Excite Bike	Vader
Black Tie	Trontastic	Swanky Purse

Figure - jQuery Theme Roller - Gallery

Changing the theme

The following provides a high-level description of how to customise the Content Interface using jQuery themes.

1. Choose your theme
2. Change the theme in the Content Interface

1. Choose your theme

Use the jQuery Theme Roller (or other means you discover) to create your theme. You can choose from one of the themes available in the Gallery, create your own theme, or customise an existing theme.

See the “Using jQuery UI ThemeRoller” page for more See the “Using jQuery UI ThemeRoller” page for more advice on how to do this.

Each theme has a name. For example, Figure 2 above shows four themes: Base; UI lightness; UI darkness; and, Smoothness (this is the default theme). The following table lists all the available themes.

Base	Start	Smoothness	Redmond
Sunny	Overcast	Flick	Pepper Grinder
UI lightness	UI darkness	Le frog	Eggplant
Dark Hive	Cupertino	Blitzer	South Street
Humanity	Hot Sneaks	Excite Bike	Vader
Black Tie	Trontastic	Swanky Purse

Take note of the name of your theme.

2. Change the theme

You change the theme by adding theme=”name of your theme” to the title of the Content Interface item in Blackboard. For example, see Figure 3 and Figure 4 below.

Figure - Le Frog Theme

Figure - Sunny Theme

To do this, you:

1. Go to a page where the Content Interface has already been set up.
2. Turn Edit Mode on.
3. Edit the Content Interface item and add theme=”name of your theme”