Customize the Tabbed Panels widget



Although the Property inspector enables you to make simple edits to a Tabbed Panels widget, it does not support customized styling tasks. You can alter the CSS rules for the Tabbed Panels widget and create a widget that is styled to your liking.

For a quick reference on changing the colors of the Tabbed Panels widget, see David Powers’s Quick guide to styling Spry tabbed panels, accordions, and collapsible panels.

For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprytabbedpanels_custom.

All CSS rules in the topics below refer to the default rules located in the SpryTabbedPanels.css file. Dreamweaver saves the SpryTabbedPanels.css file in the SpryAssets folder of your site whenever you create a Spry Tabbed Panels widget. This file also contains useful commented information about various styles that apply to the widget.

Although you can easily edit rules for the Tabbed Panels widget directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.

Style Tabbed Panels widget text

You can style the text of a Tabbed Panels widget by setting properties for the entire Tabbed Panels widget container, or by setting properties for the components of the widget individually.

 To change the text styling of a Tabbed Panels widget, 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

 To change the background colors of different parts of a Tabbed Panels widget, use the following table to locate the appropriate CSS rule, and then add or change background color properties and values to your liking:

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. You can constrain the width of a Tabbed Panels widget, however, by setting a width property for the accordion container.

  1. Locate the .TabbedPanels CSS rule by opening the SpryTabbedPanels.css file. This rule defines properties for the main container element of the Tabbed Panels widget.
    You can also locate the rule by selecting the Tabbed Panels widget, and looking in the CSS Styles panel (Window > CSS Styles). Make sure the panel is set to Current mode.
  2. Add a width property and value to the rule, for example width: 300px;.