Save Your Own Copy of the Style Sheet

Unless you're supremely confident that you're not going to make any mistakes, it's a good idea to make a copy of the style sheet and work on the copy. That way you can start again with a fresh copy of the original.

In the Files panel, locate SpryMenuBarHorizontal.css (or SpryMenuBarVertical.css for a vertical menu bar) in the SpryAssets folder, and double-click the file name to open the style sheet in the Document window.

CSS File Save

Select File > Save As and save the style sheet with a different name in your own styles folder. I created a folder called SpryAssets under the root folder which will hold all my spry assets.

Spry CSS Saved

Click Yes when Dreamweaver asks if you want to update the links:

Update Links

Close the original SpryMenuBarHorizontal.css (or SpryMenuBarVertical.css) to avoid making any changes to it accidentally. To close the original css style sheet return to the design view Design View in Dreamweaver. Open the CSS Styles panel and click the All button at the top left of the panel, and select SpryMenuBarHorizontal.css (or SpryMenuBarVertical.css) in the All Rules section. Click the trash can icon at the bottom right of the panel to remove the existing style sheet:

Delete Spry Menu

As soon as you remove the style sheet, the menu bar is converted into a series of unordered lists. Don't worry. This will be put right as soon as you attach the renamed style sheet from your own styles folder.

Click the icon that looks like a chain link Link Style Sheet at the bottom of the CSS Styles panel. This opens the Attach External Style Sheet dialog box.

In the dialog box, click the Browse button and navigate to the renamed style sheet that you created in the step above. When you have selected the style sheet, click OK (or Choose) to return to the Attach External Style Sheet dialog box. Then click OK to close the dialog box.

Attach Style Sheet

Your webpage should now look like it did before and your style sheet should appear on the tab that used to house the original menu.

CSS Style Sheet

CSS Layout