[Skip top navbar]

Andrew Gregory's Web Pages

Sherbrooke Forest, 37°53'3"S 145°21'4"E

-

Brian's Tree

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>

Downloads


Style-In-A-File

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==); }


-