Operation Manual

413
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
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.
More Help topics
“The CSS Styles panel in Current mode” on page 121
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:
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:
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;
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.)