A fellow by the name of Brian emailed me with some of his work using my Explorer Tree. I thought it was fabulous! So here it is for all to see. I've streamlined his styles a little and put them in a separate file. I've also renamed their class from my default "explorertree" to "folderandfiletree", to turn them into a self-contained "module" that can co-exist with my default Explorer Tree styles (in case you want two trees with different styles on the same page). Here they are:
ul.folderandfiletree li { list-style-image: url(vertbranch.gif); background-image: url(dotted.gif); background-repeat: repeat-y; cursor: pointer; } ul.folderandfiletree li:last-child { background-repeat: no-repeat; list-style-image: url(dottedend.gif); } ul.folderandfiletree li.explorertree-open::before { content: url(folderopen.gif); } ul.folderandfiletree li.explorertree-open { list-style-image: url(minusmid.gif); } ul.folderandfiletree li.explorertree-open:last-child { background-image: none; list-style-image: url(minusend.gif); } ul.folderandfiletree li.explorertree-closed::before { content: url(folderclosed.gif); } ul.folderandfiletree li.explorertree-closed { list-style-image: url(plusmid.gif); } ul.folderandfiletree li.explorertree-closed:last-child { background-image: none; list-style-image: url(plusend.gif); } ul.folderandfiletree a::before { text-decoration: none; content: url(file.gif); } ul.folderandfiletree a[href$=".zip"]::before { content: url(zip.gif); }
The use of the :last-child
selector to handle the bottom
"corners" of the tree is currently only supported by Gecko browsers.
The use of ::before
and content
is only supported by
Gecko and Opera browsers. The use of attribute selectors (the
[href$="..."]
) is currently only supported by Gecko
browsers. I have no idea what the Safari or Konqueror browsers think of any of
this!
The second last last rule provides a default file icon and is the template
for more rules, like the last one for ZIP files, that specify different icons
depending on the filename in the href
attribute. Note that Gecko
browsers appear to be ignoring the text-decoration:none
(Opera is
OK).
The open/closed folder images and file icons must all be the same size.
Applying the styles is no more complicated than:
<ul class="explorertree folderandfiletree"> ... </ul>
A personal wish of mine is that more browsers support data URLs (currently only Gecko and Opera browsers do, I don't know about Safari). That would allow all the small images to be embedded in the style sheet and allow a complete tree style to be contained in a single file, which would not only make for easier management, but also be faster too (only one HTTP request, instead of 12):
ul.folderandfiletree li { list-style-image: url(data:image/gif;base64,R0lGODlhEAALALMAAICAgP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///yH5BAEAAA8ALAAAAAAQAAsAQAQR8MlJq7046827/+ADiOQYehEAOw==); background-image: url(data:image/gif;base64,R0lGODlhEAAIALMAAICAgP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///yH5BAEAAA8ALAAAAAAQAAgAQAQQ8Mn5AL3Y4l351l4ojmT5RAA7); background-repeat: repeat-y; cursor: pointer; } ul.folderandfiletree li:last-child { background-repeat: no-repeat; list-style-image: url(data:image/gif;base64,R0lGODlhEAAJALMAAICAgP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///yH5BAEAAA8ALAAAAAAQAAkAQAQT8Mn5AL3Y6soz/pIFemNpnmgqRQA7); } ul.folderandfiletree li.explorertree-open::before { content: url(data:image/gif;base64,R0lGODlhGAANALMAAAAAAP//AICAgMDAwP///wAAAAAAAAAAAAAAAAAAAP8AAAAAAAAAAAAAAAAAAP///yH5BAEAAAoALAAAAAAYAA0AQARKUElBqbw4X/FG8OAnAKO2dV8aDqV5AXAsx67CrU9V1dzj/78RC1CzPVTIEZEHzBU1HOSg2YLqrpVANXOTpkhb7nGlIi1dWCzMFQEAOw==); } ul.folderandfiletree li.explorertree-open { list-style-image: url(data:image/gif;base64,R0lGODlhEAAJAJEAAICAgP///wAAAP///yH5BAEAAAMALAAAAAAQAAkAAAIgnIGZxhcPA2gMRDjpsFfqHQii6E0Z2J0Nd6lV52nK3BQAOw==); } ul.folderandfiletree li.explorertree-open:last-child { background-image: none; list-style-image: url(data:image/gif;base64,R0lGODlhEAAPALMAAICAgP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///yH5BAEAAAEALAAAAAAQAA8AAAQmMMgZAL0467q7519YAWRJZhaWXivVTq8Uc0Jdc9Y672ivoiYTJQIAOw==); } ul.folderandfiletree li.explorertree-closed::before { content: url(data:image/gif;base64,R0lGODlhGAANALMAAAAAAP//AICAgMDAwP///wAAAAAAAAAAAAAAAP8AAAAAAAAAAAAAAAAAAAAAAP///yH5BAEAAAkALAAAAAAYAA0AQAREMCVBqbw4X/HC8OD3CYC2dWIIkuYFvHAct1MqVhU9oWrKtpye6ge0CXQazmPJbD6IyYetB81wpsYSUCq8aU24cPiriQAAOw==); } ul.folderandfiletree li.explorertree-closed { list-style-image: url(data:image/gif;base64,R0lGODlhEAAJALMAAICAgP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAwAAAAAAAAAAAAP///yH5BAEAAAsALAAAAAAQAAkAAAQhcElAa5V4Zgy2lgLnLR0oep2gqmRbtua3vaGcvfdo7VkEADs=); } ul.folderandfiletree li.explorertree-closed:last-child { background-image: none; list-style-image: url(data:image/gif;base64,R0lGODlhEAAPALMAAICAgP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///yH5BAEAAAEALAAAAAAQAA8AAAQqMMgZAL0467q7519YAWRJZhaWXqswrVT7ooFg25y1yhI8S64eTYUymSgRADs=); } ul.folderandfiletree a::before { text-decoration: none; content: url(data:image/gif;base64,R0lGODlhGAANAIMAAP8AAHt7ew0PEb7d/Vec5OLrpltbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAMAAA8ALAAAAAAYAA0AAARH8MlJq51B6C3COZclDAQRnMbghdVYnkE6CCzlEkYu07U0DsAgkNf7CYPE2q3EnPV8pIJUSnA+XVOqtRjNVpOsTAcmDjzPzwgAOw==); } ul.folderandfiletree a[href$=".zip"]::before { content: url(data:image/gif;base64,R0lGODlhGAANAIMAAAAAAJmZAJmZmczMzP/MM//MZv/Mmf/MzP/M////AP//M///Zv//mf//zP///wAAACH5BAMAAA8ALAAAAAAYAA0AAARE8MkJqgUz6wyG8CC2cdVzXYM4AkmQqJwAa4AbnGU3c21vvybZSFLz+TC6ocn4QwqHuGhKSQN9rjtlNEulCLrQisyijAAAOw==); }