I was having trouble changing the color of the submenus on my first implementation of Dreamweaver’s Spry Menu Bar. I went with the horizontal variety for the site I was working on and futzed around with the provided Spry CSS file for over an hour before I concluded that it was missing something. Here’s the code you need to add to the end of the code in the SpryMenuBarHorizontal.css file if it doesn’t already exist somewhere in your file (change the values to suit, of course):

/* THE FOLLOWING ALLOWS YOU TO CHANGE THE FONT COLOR, BACKGROUND COLOR, ETC. OF THE SUBMENUS */
#MenuBar1 .MenuBarSubmenuVisible a {
color: #333;
background-color: #CCC;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #FFF;
}
#MenuBar1 .MenuBarSubmenuVisible a:hover {
color: #FFF;
background-color: #828788;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #FFF;
}

Happy Dreamweaving.

Much to my frustration, Adobe did not include Sliding panels with the Spry framework that comes with the CS4 version. The javascript and CSS pages are available if you dig deeply enough into their plethora of online support, especially with the help of phone support. I’ve got to hand it to Adobe: they’re much easier to speak with on the phone than the Macromedia folks were. Here’s what I found:

First, for each new site in Dreamweaver, go to Site > Spry Updater… and add the necessary Spry Assets to the site.

For other Spry widgets and assets not included in the updater, like Sliding Panels (and there are a lot of other great useful widgets out there), go to http://labs.adobe.com/technologies/spry/samples/ for samples. Click the Widgets tab if necessary. Play around with the samples; get an idea of what’s available.

Then go to http://labs.adobe.com/ and type the name of the Spry widget in the Search field.

Look for the API result. Click and you should see a .js and .css file.

1. Click on the .js file, select all and copy
2. Open a new JavaScript page in Dreamweaver and paste.
3. Save this file in the folder with your other Spry Asset Files, as well as to the Spry Assets folder in each site in which you intend to use the widget.
4. Repeat this process for the .css file by opening a new CSS page in Dreamweaver.

Instructions for each widget should be included on the same web page where the .js and .css files are found.

The best instruction I found for getting Spry Sliding Panels to work on a page were the video tutorials on lynda.com. However, the tutorial was for CS3 and assumed that the Sliding Panels widget was included in the framework that came with Dreamweaver. Because it’s not, you’ll need to some bits of SprySlidingPanels code:

1. ADD THESE THREE LINES JUST BEFORE THE END OF THE </head> TAG:

<script src=”SpryAssets/SprySlidingPanels.js” type=”text/javascript”></script>
<link href=”SpryAssets/SprySlidingPanels.css” rel=”stylesheet” type=”text/css” />
<link href=”CSS/styles_atw.css” rel=”stylesheet” type=”text/css” />

2. SEE LYNDA VIDEO FOR SETTING UP THE <div> TAGS.

3. ADD THIS CODE ANYWHERE BELOW THE WIDGET BUT INSIDE THE BODY TAG (THIS IS THE CONSTRUCTOR FUNCTION AND IS NECESSARY TO MAKE THE WIDGET FUNCTION):

<script language=”javascript” type=”text/javascript”>var sp1 = new Spry.Widget.SlidingPanels(“detailSlide1″);</script>

4. ADD THIS AFTER <a href=”javascript:;” IN THE <a> TAG:

onClick=”sp1.showPanel(0);”

You can go to the Weejee Media homepage to see one of the things I’ve done with Spry Sliding Panels (click the “nudge” button on the left).

Good luck, and happy Dreamweaving!