Customize the accordion widget – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 296
Open a panel for editing
Do one of the following:
Move the mouse pointer over the tab of the panel to open it in Design view, and click the eye icon that appears at the right of the tab.
Select an Accordion widget in the Document window, and then click the name of the panel to edit it in the Panels menu of the Property
inspector (Window > Properties).
Change the order of panels
1. Select an Accordion widget in the Document window.
2. In the Property inspector (Window > Properties), select the name of the Accordion panel you want to move.
3. Click the up or down arrows to move the panel up or down.
Customize the Accordion widget
Although the Property inspector enables you to make simple edits to an Accordion widget, it does not support customized styling tasks. You can
alter the CSS rules for the Accordion widget and create an accordion that is styled to your liking.
For a quick reference on changing the colors of the Accordion widget, see David Powers’s
For a more advanced list of styling tasks, see
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.
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:
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;
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:
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.)
289