Dreamweaver CS3  |  Go to CS4 Help

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 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;.

Comments

Comments are no longer accepted for Dreamweaver CS3. Dreamweaver CS4 is the current version. To discuss Dreamweaver CS3, please use the Adobe forum.

Comments

Can you make content scroll vertically

Hi! I´ve got a tabbed panel with diferent background images in each tab, Is there´s a way to make the tabbed panels to behave like a roll over effect with different images background for the tabs states (hover, selected) using css with ID instead of classes. Thanks in advace!

re: miguelalas' POST

I am trying to add in "sub-navigation" to the existing "main" navigation built into the Tabbed Panels Framework_

Like Miguelalas - I want to use different background images for Links_ Specifically - One for ALL main links_ And also one for ALL sublinks_

It proving difficult_ As the code wants to force the BG Image for the 'main' Links onto the background for the 'sublink' that is active [SELECTED]_

Any variation or help with this would be awesome_

You can check the more detailed Spry help on the web -- specifically, the Tabbed Panel customization topic at http://livedocs.adobe.com/en_US/Spry/1.4/WSA1243514-F58C-440a-8ADE-1A1AA9DE4AFD.html.

[b]re: chucknado[/b]

Thanks for the link_

However - I have already read thru ALL of this_ And Any specific "Help" information Adobe has via Dreamweaver Help or the Supplemental Webpage equivilants_

The link you mentioned is not what I am trying to do_

I am looking for a way to add in sub-navigation [similar to the 'sub-nav' available in the 'Menu Bar Framework'] - except that I want to implement the "concept" into a Vertical orientation of the Tabbed Panels Framework_