This example is valid for Static and Dynamic TreeView.
To define a new skin you must before now how the skin is defined:
Each skin has 2 images and 6 css style class.
The images are in the folder dwzTreeView/images folder and
the style class are in the file dwzTreeView/jquery.treeview.css
This folders are in the configuration dreamweaver folder that is located in:
For Vista users:
G:\Users\<User>\ApplicationData\Adobe\Dreamweaver CS4\en_US\Configuration\Shared\DwZone\php\TreeView\
For Xp users:
G:\Document and Settings\<User>\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\Shared\DwZone\php\TreeView\
For example imagine you want create a new skin start from the current red skin and call the new skin "custom", you must:
Duplicate the image
treeview-red-line.gif
the new image name must be treeview-custom-line.gif
Duplicate the image treeview-red.gif
the new image name must be treeview-custom.gif
Open in your graphics program the 2 new images and change the colour of the content
Open the css style file dwzTreeView/jquery.treeview.css and duplicate the lines with the red style class.
This lines:
.treeview-red li { background-image: url(images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); }
.treeview-red li span, .treeview-red span {padding-left:3px;}
.treeview-red li span a, .treeview-red span a { text-decoration:none;}
.treeview-red li span a:hover, .treeview-red span a:hover { text-decoration:underline;}
.treeview-red span{ font-family:Arial, Helvetica, sans-serif; font-size:12px;}
and modify them with the custom reference like:
.treeview-custom li { background-image: url(images/treeview-custom-line.gif); }
.treeview-custom .hitarea, .treeview-custom li.lastCollapsable, .treeview-custom li.lastExpandable { background-image: url(images/treeview-custom.gif); }
.treeview-custom li span, .treeview-custom span {padding-left:3px;}
.treeview-custom li span a, .treeview-custom span a { text-decoration:none;}
.treeview-custom li span a:hover, .treeview-custom span a:hover { text-decoration:underline;}
.treeview-custom span{ font-family:Arial, Helvetica, sans-serif; font-size:12px;}
Now you can open dreamweaver and you will find the new skin in the skin list
