Creating Spry Elements and Alternate Style Sheets - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 448

Trouble? If a dialog box appears, asking for your Adobe ID and Password, enter
them if you have them, and the Customize the Accordion widget Help page will
open. If you do not have an Adobe account, you can create an Adobe account
by opening the Adobe Web site in your browser (adobe.com), clicking the Your
Account link at the top of the page, clicking the Create Adobe Account button,
and providing the required information. Once you have created an account, you
will be able to access the Help system.

◗

3. Read the content in the Adobe Community Help page, including the Style
Accordion widget text, the Change Accordion widget background colors text, and
the Constrain the width of an accordion text.

◗

4. Close Adobe Community Help.

As you learned in the Constrain the width of an accordion panel information, you
change the Accordion widget's width by changing the width property for the accordion
container, which is located in the .Accordion CSS rule. This rule, along with all the other
styles for the Accordion widget, is located in the SpryAccordion.css style sheet, which is
saved in the SpryAssets folder in the local root folder. You will use the CSS Styles panel to
change the widget's width property in the .Accordion rule and its height property in the
.AccordionPanelContent rule. The new dimensions will better fi t the content you added
to the widget.

To change the Accordion widget's dimensions in the CSS Styles panel:

◗

1. Open the Directions Heading North on the New Jersey Turnpike tab, if necessary.
◗

2. Expand the CSS Styles panel , if necessary, and collapse the Insert panel, then, in
the All Rules pane, click the Minus (-) button next to nbf_styles.css to collapse
the site's style sheet and click the Plus (+) button next to SpryAccordion.css, if
necessary, to expand the widget's style sheet. All of the styles in the SpryAccordion.
css style sheet are visible.

◗

3. In the CSS Styles panel, click the Show list view button, if necessary, to switch to
list view.

◗

4. In the All Rules pane of the CSS Styles panel, click .Accordion . The properties for
the selected style appear in the Properties pane. See Figure 8-9.