Operation Manual

403
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_spryaccordion_custom.
All CSS rules in the following topics refer to the default rules located in the SpryAccordion.css file. Dreamweaver saves
the SpryAccordion.css file in the SpryAssets folder of your site whenever you create a Spry Accordion widget. This file
also contains commented information about various styles that apply to the widget, so you might find it helpful to
consult the file as well.
Although you can easily edit rules for the Accordion widget directly in the CSS file, you can also use the CSS Styles
panel to edit the accordion’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 Accordion widget text
You can style the text of an Accordion widget by setting properties for the entire Accordion widget container, or by
setting properties for the components of the widget individually.
❖ To change the text styling of an Accordion widget, use the following table to locate the appropriate CSS rule, and
then add your own text styling properties and values:
Change Accordion widget background colors
❖ To change the background colors of different parts of an Accordion widget, use the following table to locate the
appropriate CSS rule, and then add or change background color properties and values:
Constrain the width of an accordion
By default, the Accordion widget expands to fill available space. You can constrain the width of an Accordion widget,
however, by setting a width property for the accordion container.
1 Locate the .Accordion CSS rule by opening up the SpryAccordion.css file. This is the rule that defines properties
for the main container element of the Accordion widget.
Text to change Relevant CSS rule Example of properties and values to add
Text in the entire accordion (includes both
tab and content panel)
.Accordion or .AccordionPanel
font: Arial; font-size:medium;
Text in accordion panel tabs only
.AccordionPanelTab
font: Arial; font-size:medium;
Text in accordion content panels only
.AccordionPanelContent
font: Arial; font-size:medium;
Part of widget to change Relevant CSS rule Example of property and value to add or
change
Background color of accordion panel tabs
.AccordionPanelTab
background-color: #CCCCCC; (This is the
default value.)
Background color of accordion content
panels
.AccordionPanelContent
background-color: #CCCCCC;
Background color of the open accordion
panel
.AccordionPanelOpen
.AccordionPanelTab
background-color: #EEEEEE; (This is the
default value.)
Background color of panel tabs on hover
.AccordionPanelTabHover
color: #555555; (This is the default value.)
Background color of open panel tab on hover
.AccordionPanelOpen
.AccordionPanelTabHover
color: #555555; (This is the default value.)