decloak logo
Cart cart | sign out  
Template and Menu Hot Sauce
MainFeaturesFLASH MoviesFAQCustomersOverview ONDownloadsBuy

1. Support Home
2. Common Error Messages
3. Useful Upgrade Tips
4. URL Path Confusion
5. Setting Keyboard
    Shortcuts
6. Sending Error Messages
7. Find And Replace Tips
8. RollOver Problems
9. Layout vs Standard View
10. Site Definitions
11. Editing Vertical
      Tree Menus
12. Recreate Site List
13. Update Site...
14. Web Page Width
15. Designing for
      Search Engines
16. Adjusting Tree
      Menu Margins
17. Set Focus On
      Text Box
18. Rename Folder
19. Dynamic Page
20. No Valid
      Editable Region
21. No Super
      Template
22. Initialize Folder
23. Initialize Combo Tree
24. Tree Line
      Customization
25. UnBalanced
      Editable Regions
26. Foreign Language
      & Special Characters
27. Adjust Row Menu Height of
      Vertical Tree Menu Items
 

  
utility buttons
 
How are the tree lines made to begin with?
1.   Tree lines are basically made of two (2) parts, an image and a CSS style.

The image part is just the line as you see it.
A horizontal line if it's a Middle tree guide line.
A "L" - shaped line if it's a Bottom tree guide line.
An upside down "L" if it's a Top tree guide line.
An extra tall upside down "L" if it's a Double Line Top tree guide line.

The CSS style, depending if it's a Top, Middle or Bottom line, will use as the CSS style's background another image. This CSS background image can be made to repeat along the Y-axis vertically. Thus causing the line to "STRETCH". This is what's used for the Middle Lines as one doesn't know the number or menu items or if the menu item is two or more lines in height.
 
How can I get "No Lines" for Tree Menus
    Tree Menus with no lines will just use empty spacer images and NO css style.

There is are some preset selections for NO LINES, just use that instead of the one with colors. That is one for the Top, Middle and Bottom menu items
 
Making things easier for maintenance...Library Items
    The images for the tree guide lines are actually part of a Dreamweaver Library Item. Dreamweaver Library Items are typically pieces of code that MAKE SURE and FORCE all webpage that use this Library Item, or piece of code to be the EXACT same copy. Thus, if one were to change the code in the library item, for example the image's height or width, Dreamweaver will change and update all webpages that use that library item to have the new height.

These LIbrary Items are like include files, HOWEVER, all the updating is done on the computer that Dreamweaver is running on, NOT on the web server. Thus, dramatically reducing the load off the web server and ultimately increasing the performance of the web server that hosts your web page by a factor of 2 to 10 times when compared to those page that use include files. (The reason this is so is because since your computer that Dreamweaver is on has updated the pages one time when you hit the update button. Thus, this update doesn't have to happen on the web server every time someone requests a web page on the web server.)
 
Ok, how do I customize the tree lines then?
Inside the folder, images is another folder, TreeLines. There is a file called    TreeLineSamples_01.png

This is a Fireworks file and inside it are the actual tree images with slices that are named to make it easier as well as consistent in exporting.
(sidenote: how to make exporting easier,click here)

NOTE you can just make your own images and just use those. This is just here to give you something to go off of instead of starting from scratch.

Moving on, this Fireworks file. a PNG file wil have the image and you can change the colors to your liking just make a copy of a set of images and give the slice names new ones so you don't overwrite the existing ones.
Next, you can then edit an existing library item to include the new image or create a new library item with the new image. NOTE: if you create a new library item, Dreamweaver has a bad habit of puttng some extra information like a doctype. Please DELETE this and make sure ONLY the IMAGE tag is the only text inside the library item.

Save your changes.

Next, you need to create a new CSS class. Use a existing one and just rename it to your new name. Make sure you don't mix up the Top with the Bottom or Middle css definitions and make sure you correctly point the CSS background image to your new image file.
 
terms of use | privacy policy
copyright © 2003 - decloak, inc. all rights reserved