OK, let’s say you’ve just used Dreamweaver’s Spry tab and inserted a horizontal Spry menu to your page. At this point you are trying to save the document. The first time you save after adding Spry, DW copies the files (a spry javascript “.js” file and a CSS file named SpryMenuBarHorizontal.css) into your SpryAssets folder in this site. DW doesn’t ask you anything about the save, it just uses the default file name for those files and drops them into your SpryAssets folder. AND, what’s more, DW automatically adds lines to your document’s <head> section to point to those two files. (Remember to upload those SpryAssets files along with your page when it’s time to publish your website.)
You then spend several minutes (hours?) adjusting the style (colors, etc.) for that horizontal menu. Good work! Looks great! Those changes were all automatically entered into the file SpryMenuBarHorizontal.css mentioned above. Thanks, Dreamweaver, for knowing where to save my stylin’ work!
Now imagine this…. what if you wanted to create several pages with horizontal-style Spry menus. DW doesn’t remember you’ve previously added one elsewhere, so it goes ahead and copies the files into the SpryAssets folder each time. But DW doesn’t know you spent all that time adjusting the file. It doesn’t know enough to name each new instance differently, so the second time you add a horizontal-type menu, DW would actually overwrite the files that were saved there from the first time you inserted that style of menu…. unless you RENAME the first spry files BEFORE YOU SAVE the second document (remember, DW copies those files in there at the point of “Save”).
Summarizing the above:
- Upon first save, DW saves a file called SpryAssets/SpryMenuBarHorizontal.css
- That’s the stylesheet for this one menu.
- Next time you add a horizontal menu (“SpryMenuBarHorizontal”), DW is going to want to save a copy of that file AGAIN.
- To avoid overwriting the first CSS horizontal menu file when you place a second horizontal menu, you should rename the CSS file you used for the first one.
I’d rename it something that will really identify it for you in the future, like “SpryMenuBarHorizontalGreenPage.css” (something that tells you which page in your site that particular horizontal menu is on).
AND THEN, you also have to change the <link href=”../SpryAssets/etc… reference to that file in the HTML code in the <head> section of your document, so that DW knows which stylesheet you want this page to use (among the several that will eventually be collecting in your SpryAssets folder).
A couple of notes to follow up on this.
(1) EXCEPTION: You don’t have to rename the CSS file, just let DW do its thing each time IF you do not plan to change even one little thing in the menu’s stylesheet. That is, you can just keep letting DW overwrite that CSS file IF really do want ALL the horizontal-type spry menus exactly the same in this site — the original Spry default design (i.e., fairly ugly in my opinion).
(2) If you plan to have IDENTICALLY STYLED horizontal-style menus throughout your site, but you want to customize the style (colors, etc), you must still rename your SpryMenuBarHorizontal.css file before you save another page that contains a newly placed horizontal-style menu. Why? Again, so that your changes to the CSS file don’t get overwritten. In this case, you could rename it something like SpryMenuBarHorizontalPhotoSite.css. (This time I’m naming it to identify which whole site it’s being used on, rather than which page.)
AND THEN…
Each time you place a new instance of the Spry Horizontal Menu on any of your pages, all you’d have to do is go to the <head> section of the document and change the name of the CSS file in this tag: <link href=”../SpryAssets/SpryMenuBarHorizontalPhotoSite.css” rel=”stylesheet” type=”text/css” />
Dreamweaver is powerful in the many things it does for us automatically, but it’s like having any good assistant, we have to sometimes make small adjustments to the work it does for us. Working together, hand in hand, with DW.
Great job Kate. You always write so well. Would you be willing to add a link to one of your pages with a Spry menu? An example would really nicely augment your explanation.
Well Bean, thanks for the complement, and I’m also honored that you’d ask me to show people one of my Spry menus. I confess that when I review my DW-CS3-Level 1 homework pages, the menus still have problems. (I always meant to go back and fix them, but haven’t.)
One successful spry menu is on the index page where I list all the homework sites for courses I’ve taken online at LVS. It’s a simple, vertical menu with no sub-menus, but I like the colors & border thing I managed to accomplish.
http://www.ibritt.com/flamingo/studies/
Kate
Kate, great write up. I do have another Spry question though. In Safari, there are no problems with Spry tabbed panels locking top align to my cell, however, Firefox and IE are different stories. Not matter the vertical alignment I assign to the panels, they still float center in the cell. I can lock the panels, using CSS, a certain fixed distance from the top of the page, but the page doesn’t expand with the collapsible panels I have built with the tabs. How, if possible, can I get the page to expand vertically with collapsible panels?
Anthony can you provide us with a link to take a gander at? It helps if we can see your page and CSS to guide you. Depending on the tweaking that you have done with the CSS style sheet, the actual style attributes that need to be altered can appear deceiving.
Hi Kate,
Well it seems I should have read your lesson above before building my first spry validation form. I have made the mistake that you warn against above!
I am now wondering how to get my original .css textfield and text area style sheets back!
Any suggestions would be great!
Thanks
Hi Kate,
I think I found out that you can create a “new site” and then the original css are retrieved from the source.
Thank You and Keep up the great Website! Good Work!