10 Replies Latest reply on Apr 3, 2010 12:47 AM by Tamutka

    Spry Tabbeed Pannels



      I am only a user from outside, so I do no know almost nothing about codes.

      I used a Spry tabbed Pannel and customize it for one "page". But when I tried to customize it for another "page", the first one changed also.

      And now I have the latest changes for both pages.

      Can anyone tell me, please:

      1. how to have back the deafult Spry Tabbed pannel (so I can start all over again)

      2. How to customize and then save the changes for each pannel separately. Is this possible at all?


      Thank you. I hope I was clear :-)


      bets regards, Natasa

        • 1. Re: Spry Tabbeed Pannels
          hans-g. Adobe Community Professional & MVP

          Hi Natasa,


          you should store your Spry tabbed Pannel as a separate file, for example MenuBarIncl.php. Open your DW here (it's my German DW) and:



          store it for example MenuBarIncl02.php. Now you can use either the one or the other and integrate them into the website in question.


          To use them on different sites it's useful to use the include function. And if you woul like to use them look here, it's the best tutorial you will find: http://forums.adobe.com/message/2538973#2538973.



          1 person found this helpful
          • 2. Re: Spry Tabbeed Pannels
            Tamutka Level 1

            Hi, Hans,

            Thank you for the reply. I will explore:-)

            But I still do not know how to restore the pannel to default?

            I have reistalled the DW, but it didn't help

            Regards, Natasa

            • 3. Re: Spry Tabbeed Pannels
              Tamutka Level 1

              HI, Hans,

              I tried, but how to save with another name?

              The new name appeared in design wiew, but in CSS styles window there is only SpryTabbedPannels as it was before.

              Thank you


              • 4. Re: Spry Tabbeed Pannels
                Tamutka Level 1


                Sorry, I found out how to save, thanks!.

                But still do not know how te get the default one.


                Regards, Natasa

                • 5. Re: Spry Tabbeed Pannels
                  hans-g. Adobe Community Professional & MVP

                  Hi Natasa,


                  you should separate the pure DW commands of your Spry tabbed Pannels in files like these:


                  <?php include("includes/MenuBarIncl01.php"); ?>
                  <?php include("includes/MenuBarIncl02.php"); ?>


                  In the following I will give you  David_Powers's recipe (http://forums.adobe.com/message/2538973#2538973how) to use includes. I only can say try it, it pays, although at it first glance it appears very complicated.


                  Using server-side includes is like working with a jigsaw puzzle. When everything fits together, it should create a single object. There should be nothing left over. In other words, you cannot use a complete web page as an include. It must be only part of a page - the missing piece of the jigsaw, as it were.


                  The other point about server-side includes is that internal links no longer work if you use document-relative links. You must change the links in the include file to use site-root-relative links.


                  The way to convert a Spry menu bar into a server-side include is as follows:


                  1. Make sure you are in Code view. If you are in Design view, Dreamweaver will automatically delete important code that you need to preserve.
                  2. Click anywhere inside the menu in Code view, and select <ul#MenuBar> (the name might be slightly different) in the Tag selector at the bottom of the Document window.
                  3. Press Ctrl+X/Cmd+X to cut the menu to your clipboard.
                  4. Dreamweaver will probably warn you about a missing widget, and ask if you want to remove the related code. You must click NO.
                  5. Create a new page. Open it in Code view, and delete ALL code. The page must be completely blank.
                  6. Paste the menu from your clipboard into the blank page in Code view.
                  7. Return to the original page from which you cut the menu.
                  8. Scroll down to the bottom of the page, select the following code, cut it to the clipboard, and paste it below the menu code in the include file:



                  <script type="text/javascript">
                  var MenuBar2 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});



                  1. In the include file, change all links to site-root-relative. For example, change <a href="Neuanf.php" to <a href="/Neuanf.php". The leading slash makes it site-root-relative. This is necessary for the link to work correctly.
                  2. Include the menu, using quotes around the file name, e.g., <?php include("includes/menu.inc.php"); ?>.
                  3. Make sure that each page has links in the head to SpryAssets/SpryMenuBar.js and SpryAssets/SpryMenuBarHorizontal.css.
                  4. If existing pages have the script shown in item 8 above, remove it. The menu will use the script in the include file.





                  • 6. Re: Spry Tabbeed Pannels
                    Tamutka Level 1

                    Thank you!

                    I am almost there :-)

                    I will explore this "include", which is an unknown planet for the time. (Bad english and bad code knowing)

                    Thanks, you  helped me a lot!!

                    • 7. Re: Spry Tabbeed Pannels
                      hans-g. Adobe Community Professional & MVP

                      Hi Natasa,


                      in addition to what I said above, I recommend this course and the hints in it:




                      and especially the subject of "widgets".





                      What's your native language?

                      • 8. Re: Spry Tabbeed Pannels
                        Tamutka Level 1

                        Thank you very much, I just have found this some minutes ago

                        My language is Slovene.


                        Regards, Natasa

                        • 9. Re: Spry Tabbeed Pannels
                          hans-g. Adobe Community Professional & MVP

                          Dober večer, Nataša!


                          No, deluje že! Vse najboljše in veliko uspeha! Servus in salue, Hans-G.


                          P.s. Pardon prevod je seveda Google!

                          • 10. Re: Spry Tabbeed Pannels
                            Tamutka Level 1


                            Pa sem najprej mislila, da sva sonarodnjaka


                            Bom še jaz poskusila prevesti, najbrž v nemščino!


                            Vielen Dank!

                            Also habe ich zunächst gedacht, dass wir Landsleute waren


                            Ich werde versuchen zu übersetzen, wahrscheinlich in Deutsch!



                            Pozdrav, Nataša