Community Publishing

Quick guide to styling Spry tabbed panels, accordions, and collapsible panels

The Spry widgets in Dreamweaver CS3 and CS4 come with predefined style sheets, but working out how to make them fit in with the rest of your design can be a challenge if you're not a CSS whizzkid. The following cheat sheets should make life easier for you.

As soon as you save a Spry widget, Dreamweaver copies the necessary style sheet and external JavaScript file to the SpryAssets folder in your site. The first thing you should do is to open the style sheet, and save it with a different name in the same folder as you keep your other styles. Then attach the renamed style sheet to your page, and remove the original one that Dreamweaver linked to your page.

Let's say you want to use a Spry tabbed panels widget. Use the following steps:

1. Position your cursor in the page where you want the tabbed panels to go, and select the Spry Tabbed Panels button in the Insert panel/bar (or use the menu option Insert > Spry > Spry Tabbed Panels).
2. Save the page, and click OK when Dreamweaver displays a message about copying dependent files (this message is displayed only the first time you add this type of widget to a site).
3. Open SpryAssets/SpryTabbedPanels.css, and select File > Save As (Ctrl+Shift+S/Cmd+Shift+S) to save the style sheet to your own styles folder with a different name, such as mytabbedpanels.css.
4. Switch back to the page that you inserted the tabbed panels into.
5. Attach the new style sheet to the page. You can do this by clicking the icon that looks like two chain links at the bottom right of the CSS Styles panel.
6. Select SpryTabbedPanels.css in the CSS Styles panel in All mode, and click the trash can icon to unlink it from the page, as shown in the following screenshot.

Now make all the changes to the styles of the Spry widget in your renamed style sheet. The advantage of doing this is that you preserve the default style sheet created by Dreamweaver. So, if you make a mess of things, you still have the original to go to. It also allows you to style the same widget independently for different parts of your site.

Note: If you have already messed up the original stylesheet, don't despair. Just delete it from the SpryAssets folder, and insert another widget of the same type in a blank page. When you save the new page, Dreamweaver sees that the default style sheet is missing, and creates a new one. This time, make sure you work with a copy rather than the original.

The following cheat sheets list the hexadecimal color values used by Dreamweaver. The Replacement column has been left empty for you to fill in the colors you want to use. Open the style sheet, and use Find and Replace (Ctrl+F/Cmd+F) to change the colors. Simple.

Spry tabbed panels

Save a copy of SpryTabbedPanels.css to your your styles folder, and give it a new name before making any changes.

Spry accordion

Make the changes to your renamed copy of SpryAccordion.css.

Note that SpryAccordion.css uses the CSS keywords, gray and black, rather than hexadecimal color values for the borders.

If you don't want special colors for the title bars when the accordion has focus, use the same colors as for closed and open title bars.

Spry collapsible panels

Make the changes to your renamed copy of SpryCollapsiblePanel.css.

About the contributor 

David Powers is an Adobe Community Expert and Adobe Certified Instructor for Dreamweaver. He is the author of The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP, and other books on PHP and web design.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License