DrainHole Templates

August 11th, 2011

Listing the contents of a Drain Hole hole with nested file structure

Drain holes normal list template only lists the files in the hole without showing the nested file structure. It is as if all files are on the same level. I wanted to list files such that the file structure is visible, somewhat the way you can view the structure in the left pane of Windows Explorer. This template uses icons from FatCow and DoxDesk.

I supply two variants of the template. After following the short instructions below, you use the template by writing

[drain hole 3 show structured_show_hole]

in a page. The number 3 is just an example, it should be the ID number of your Drain Hole hole.

A variant with inline CSS code.
This is the simplest variant. The generated HTML code includes inline CSS code for styling the list. All you need to do to use this template with Drain Hole is to download it, unzip it and place the contents of the resulting folder in a folder named view/drain-hole in your theme’s folder. The folder named icons contains used icons in PNG format. You can add your own icons here for unsupported file extensions. If the file extension is foo, then the icon should be called foo.png.

A variant with separate CSS code.
This variant uses separate CSS code, which gives you more flexibility. Download the template, unzip it and place the contents of the resulting folder it in a folder named view/drain-hole in your theme’s folder. The folder named icons contains used icons in PNG format. The CSS file structured_show_hole.css contains definitions of LI-classes corresponding to file extensions. You should make sure that this CSS file is included at least on the pages where you use the template. You can add your own LI-class for unsupported file extensions. If the file extension is foo, then the LI-class should be called foo.

The WordPress plugin Easy JS and CSS support can be useful to include the CSS file on the pages where you use the template.

Version history:

v.1.0

2010-04-27

First attempt. Seemed to work well.

v.1.1

2010-04-29

Fixed bug that made it impossibe to show more than one Drain Hole hole on the same page.

v.1.2

2010-04-30

Fixed URLs in CSS code so that no manual editing of URLs is necessary.