Customize the Tabbed Panels widget

The SpryTabbedPanels.css file provides the default styling for the Tabbed Panels widget. You can, however, easily customize the widget by changing the appropriate CSS rule. The CSS rules in the SpryTabbedPanels.css file use the same class names as the related elements in the tabbed panel’s HTML code, so it’s easy for you to know which CSS rules correspond to the different sections of the Tabbed Panels widget. Additionally, the SpryTabbedPanels.css file contains class names for widget behaviors (for example, hovering and clicking behaviors).

The SpryTabbedPanels.css file should already be included in your website before you start customizing. For more information, see Prepare your files.

Note: Internet Explorer up to and including version 6 does not support sibling and child contextual selectors (for example, .TabbedPanels + .TabbedPanels or .TabbedPanels > .TabbedPanels).

Style an Tabbed Panels widget (general instructions)

Set properties for the entire Tabbed Panels widget container, or set properties for the components of the widget individually.

Open the SpryTabbedPanels.css file.
Locate the CSS rule for the part of the tabbed panel to change. For example, to change the background color of the tabbed panels’ tabs, edit the TabbedPanelsTab rule in the SpryTabbedPanels.css file.
Make your changes to the CSS rule and save the file.

You can replace style-related class names in the SpryTabbedPanels.css file and HTML code with class names of your own. Doing so does not affect the functionality of the widget.

The SpryTabbedPanels.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file.

Style Tabbed Panels widget text

Set properties for the entire Tabbed Panels widget container, or set properties for the components of the widget individually.

Use the following table to locate the appropriate CSS rule, and then add your own text-styling properties and values.

Text to change	Relevant CSS rule	Example of properties and values to add
Text in the entire widget	.TabbedPanels	font: Arial; font-size:medium;
Text in panel tabs only	.TabbedPanelsTabGroup or .TabbedPanelsTab	font: Arial; font-size:medium;
Text in content panels only	.TabbedPanelsContentGroup or .TabbedPanelsContent	font: Arial; font-size:medium;

Change Tabbed Panels widget background colors

Use the following table to locate the appropriate CSS rule, and then add or change background-color properties and values.

Color to change	Relevant CSS rule	Example of property and value to add or change
Background color of panel tabs	.TabbedPanelsTabGroup or .TabbedPanelsTab	background-color: #DDD; (This is the default value.)
Background color of content panels	.Tabbed PanelsContentGroup or .TabbedPanelsContent	background-color: #EEE; (This is the default value.)
Background color of selected tab	.TabbedPanelsTabSelected	background-color: #EEE; (This is the default value.)
Background color of panel tabs when the mouse pointer moves over them	.TabbedPanelsTabHover	background-color: #CCC; (This is the default value.)

Constrain the width of tabbed panels

By default, the Tabbed Panels widget expands to fill available space. To constrain the width of a Tabbed Panels widget, set a width property for the tabbed panel container.

Locate the TabbedPanels CSS rule in the SpryTabbedPanels.css file. This rule defines properties for the main container element of the Tabbed Panels widget.
Add a width property and value to the rule, for example width: 300px;.

Change tabbed panels height

By default, the height of tabbed panels expands according to content. To set a specific height for panels, add a height property to the TabbedPanelsContent rule.

Locate the TabbedPanelsContent CSS rule in the SpryTabbedPanels.css file.
Add a height property and value to the rule, for example height: 300px;.

Change tabbed panels behaviors

The Tabbed Panels widget includes predefined behaviors. These behaviors consist of changing CSS classes when a particular event occurs. For example, when a mouse pointer hovers over a panel tab, Spry applies the TabbedPanelsTabHover class to the widget. (This behavior is similar to a:hover for links.) The behaviors are blank by default; to change them, add properties and values to the rules.

Open the SpryTabbedPanels.css file and locate the CSS rule for the tabbed panels behavior to change. The Tabbed Panels widget includes four built-in rules for behaviors.

Behavior	Description
.Tabbed PanelsTabHover	Activates when hovering over the panel tab
.Tabbed PanelsTabFocused	Activates when a tab has keyboard focus
.Tabbed PanelsTabSelected	Activates on currently selected tab
.TabbedPanelsContentVisible	Activates on content area of currently selected tab

For examples, see the Tabbed Panels sample file located in the samples directory of the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

Add CSS rules for any of the behaviors you want to enable.

Note: You cannot replace behavior-related class names in the SpryTabbedPanels.css file with class names of your own because the behaviors are hard coded as part of the Spry framework. To override the default class with your class names, send the new values as arguments to the tabbed panels constructor:

<script type="text/javascript">
	var TP1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { tabHoverClass: "hover", panelVisibleClass: "open", tabSelectedClass: "selected", tabFocusedClass: "focused" });
</script>