Adobe 38040334 - Dreamweaver CS3 User Manual page 470

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
Text in the entire widget
Text in panel tabs only
Text in content panels only
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
Background color of panel tabs
Background color of content panels
Background color of selected tab
Background color of panel tabs
when the mouse pointer moves over
them
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
Relevant CSS rule
.TabbedPanels
.TabbedPanelsTabGroup or .Tabbed-
PanelsTab
.TabbedPanelsContentGroup or
.TabbedPanelsContent
Relevant CSS rule
.TabbedPanelsTabGroup or .Tabbed-
PanelsTab
.Tabbed PanelsContentGroup or
.TabbedPanelsContent
.TabbedPanelsTabSelected
.TabbedPanelsTabHover
width: 300px;
September 4, 2007
Example of properties and values
to add
font: Arial; font-size:medium;
font: Arial; font-size:medium;
font: Arial; font-size:medium;
Example of property and value to
add or change
background-color: #DDD; (This is the
default value.)
background-color: #EEE; (This is the
default value.)
background-color: #EEE; (This is the
default value.)
background-color: #CCC; (This is the
default value.)
.
DREAMWEAVER CS3 463
User Guide