Adobe Dreamweaver CS3 - Manual (Page 460)

DREAMWEAVER CS3
User Guide
453
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.
You can also locate the rule by selecting the Accordion widget, and looking in the CSS Styles panel (Window > CSS).
Make sure the panel is set to Current mode.
2 Add a width property and value to the rule, for example width: 300px; .
Working with the Menu Bar widget
About the Menu Bar widget
A Menu Bar widget is a set of navigational menu buttons that display submenus when a site visitor hovers over one
of the buttons. Menu Bars let you display a large amount of navigational information in a compact space, and also
give visitors to the site a sense of what is available on the site without having to browse it extensively.
Dreamweaver lets you insert two kinds of Menu Bar widgets: vertical and horizontal. The following example shows
a horizontal Menu Bar widget, with the third menu item expanded:
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 accor-
dion panel .AccordionPanelOpen .Accordion-
PanelTab 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 .Accordion-
PanelTabHover color: #555555; (This is the default
value.)
September 4, 2007