CSS Styling Apache Directory Listings.
 |
| Before. |
As part of my website overhaul, I’ve finally gotten round to styling my /files/ directory. I was surprised at how easy it was actually, and the benefits far out way the time taken to set it up, not only does this part of the site now “fit in”, but I can apply analytics tracking and adsense 
I’m sure there probably is a wordpress plugin that can achieve the same thing… probably better, but I find my list of plugins ever growing and since I don’t need on for this I figure if Apache can do it, let Apache do it!
The work can be done in one of two ways either by pasting Apache directives into a .htaccess file (in the directory you want to apply conf to), or in your httpd.conf you can wrap it all up in a <Directory> tag… something like <Directory "/var/www/html/files/"> foobar </Directory>; below is an example of a .htaccess file as that will apply to most people:
RewriteEngine Off
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
Options Indexes Includes
IndexOptions FancyIndexing SuppressHTMLPreamble XHTML IconsAreLinks FoldersFirst SuppressDescription
HeaderName /files/HEADER.shtml
ReadmeName /files/README.shtml
Since my site uses wordpress with “pretty permalinks” enabled, the 1st thing I needed to do is disable mod re-write for the directory where I wanted listing enabled. Now if you check my /files/ page you’ll notice that the page title and tag line under “[LINICKX].com” change depending on what directory you are viewing, this is done with “Server Side Includes” (SSI), so the next two options in the above config set that up.
Now to take a look at the actual directory listing setup, it might be worth you taking a look at the Apache documentation for a full description, but the important ones to note are Options Indexes Includes to enable directory listing and switch on SSI, then you need IndexOptions SuppressHTMLPreamble XHTML to disable the default headers so that we can setup our style sheet and favour xHTML over HTML. Apache 2.2 users also have IndexStyleSheet available, but since I’m using CentOS4 we’ll do it this way. Finally you need the HeaderName, ReadmeName directives to tell Apache which file to look for (by default Apache looks for README.html, but that won’t support SSI)… note how my .shtml files are relative to my web root, these are not absolute paths on the file system, i.e. /files actually maps to /var/www/html/files.
You’re now good to go, HEADER.shtml should contain all the xHTML you want to appear before the directory listing, and README.html is everything after… make sure you include all the correct <html>, <body> and DOCTYPE tags.
Now you’ll want to get working is some dynamic content, for a simple “print current directory” you can use <!--#echo var="REQUEST_URI"--> in your html, further documentation on getting more magic is available here & here, I was able to knock up a simple line of code to print the current year at the bottom of the page….
<!--#config timefmt="%Y"-->
<small>Nick Bettison 2005 - <!--#echo var="DATE_LOCAL"--> © </small>
Cool eh! The trick to watch out for is spaces in the above code, there should be no white space between <!--#echo or with the trailing -->.
 |
| After. |
The final thing you’ll want to look at is those horible default icons! You have a couple of options: You can either simply replace/over-write the default ones (on my flavour of linux they are in /var/www/icons), or you can add AddIcon /icons/tar.png .tar to your htaccess file telling apache to look at tar.png rather than the default tar.gif, I found some deb archives which I extracted with file-roller (rather than trying to install anything) and simply changed the ones I was going to use…. I’m very please with the final result, I think it makes a big difference.
Happy Styling One & All!
[...] Hay dos forma de conseguir que los listados se vean como HTML’s maquetados: [...]
Thanks for nice tip.
[...] Hay dos forma de conseguir que los listados se vean como HTML’s maquetados: [...]
Thanks very much for taking the trouble of publishing this !
Kind regards
Mike and Stephie
thank you! I have been looking for this very long time, good manual i used for my project http://www.c14.cz. I play with this whole day and you can look – how it work – http://www.c14.cz/cad/, thank you very much. Have a nice life.
Great writeup. Thanks a lot!
Well done, well-written.
Do you know if there’s a way to integrate those directory listings into Wordpress Page? That’s actually what I’m looking for.
Hmmm… I loved getting this explained since I’m a complete noob at this, but is teher any way of getting the icons for a stupid windows user? Can’t really find any way of unpacking a .deb file without linux. :S
Hi Sketis, try http://www.7-zip.org/
Will do. Thanks. Winrar finaly let me down, I’m chocked
It worked as a charm. Thanks again
Thanks a ton, this is exactly what I wanted.
Is this just for one spesific directory or for every directory?
Hi Harald,
On my website I have done this for my top level “files” directory and every sub directory has inherited it’s configuration; if you want different styles for different directories then you’ll need a README & HEADER in each dir you want to style.
hth
Thanks for this, I’m going to use this to style our downloads directory. Glad you provided a deb file too, even better.