Operation Manual

411
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Change Collapsible Panel widget background colors
❖ To change the background colors of different parts of a Collapsible Panel widget, use the following table to locate
the appropriate CSS rule, and then add or change background color properties and values to your liking:
Constrain the width of a collapsible panel
By default, the Collapsible Panel widget expands to fill available space. You can constrain the width of a Collapsible
Panel widget, however, by setting a width property for the collapsible panel container.
1 Locate the .CollapsiblePanel CSS rule by opening the SpryCollapsible Panel.css file. This rule defines properties for
the main container element of the Collapsible Panel widget.
You can also locate the rule by selecting the Collapsible Panel widget, and looking in the CSS Styles panel (Window >
CSS Styles). 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 Spry Tabbed Panels widget
About the Tabbed Panels widget
A Tabbed Panels widget is a set of panels that can store content in a compact space. Site viewers hide or reveal the
content stored in the Tabbed Panels by clicking the tab of the panel they want to access. The panels of the widget open
accordingly as the visitor clicks different tabs. In a Tabbed Panels widget, only one content panel is open at a given
time. The following example shows a Tabbed Panels widget, with the third panel open:
A. Tab B. Content C. Tabbed Panels widget D. Tabbed panel
The HTML code for the Tabbed Panels widget comprises an outer div tag that contains all of the panels, a list for the
tabs, a
div to contain the content panels, and a div for each content panel. The HTML for the Tabbed Panels widget
also includes script tags in the head of the document and after the Tabbed Panel widget’s HTML markup.
Color to change Relevant CSS rule Example of property and value to add
or change
Background color of panel tab
.CollapsiblePanelTab
background-color: #DDD; (This is the
default value.)
Background color of content panel
.CollapsiblePanelContent
background-color: #DDD;
Background color of tab when panel is open
.CollapsiblePanelOpen
.CollapsiblePanelTab
background-color: #EEE; (This is the
default value.)
Background color of open panel tab when
the mouse pointer moves over it
.CollapsiblePanelTabHover,
.CollapsiblePanelOpen
.CollapsiblePanelTabHover
background-color: #CCC; (This is the
default value.)
AB
C
D