HowTo Create Pretty Directory Listings with Apache

There are many times that serving content such as files and other media with a basic apache directory listing is enough. But the default directory listing is not very pretty and also has a limit in the length of the number of characters in the filename that is displayed thus making it harder to read. This HowTo will show you how to add a header and a footer and style the directory listing to your hearts content.

# DIRECTORY CUSTOMIZATION
<IfModule mod_autoindex.c>
# SET INDEX OPTIONS
IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble
# SET DISPLAY ORDER
IndexOrderDefault Descending Date 
# SPECIFY HEADER FILE
HeaderName /dirlist/header.shtml
# SPECIFY FOOTER FILE
ReadmeName /dirlist/footer.html
</IfModule>

As is commented above, we also add a header and a footer page. These are just standard html fragments that shall be appended to the top and bottom of the directory listing. They must be accessible by the client thus it should be inside your document root.

# CHANGE ICONS
AddIcon /dir/icons/blank.gif ^^BLANKICON^^
AddIcon /dir/icons/dir.gif ^^DIRECTORY^^
AddIcon /dir/icons/image.gif .jpg .png .gif .jpeg .tif .tiff .psd .ai .eps .bmp
DefaultIcon /dir/icons/doc.gif

These statements are just replacing Apache’s default icons with icons that you upload to your server. I’ve set up a custom icon for images, and associated it with the above filetypes. Then I’ve set up a default icon for any unknown type. I’ve given the folders an icon (directory), and provided a blank icon for that little weird and useless icon that appears next to the column headings.
As far as the template files themselves, there’s not much in my footer, but here’s a simplified version of my header:

<!DOCTYPE HTML>
<html>
    <head>
        
        <style type="text/css">
        
        h1 { font-family:'OmnesLight',arial; font-weight:normal; text-transform:uppercase;}
        pre { font-family: "Andale Mono", "Monotype.com", monospace; font-size:12px; }
        a { color: #121212; text-decoration:none;}
        a:hover { color: #ff1c30;}
        hr { border:0; border-bottom: 1px solid #b3b3b3;}

        </style>
    </head>

    <body>
        <h1><!--#echo var="REQUEST_URI" --></h1>
    </body>

You’ll notice the file was saved with a .shtml extension - that is so apache can present dynamic information within the template. In my template above, I am using an apache echo statement to print out the dynamic folder structure, so users know where they are within my FTP server. A full list of variables can be found here.

Also, notice that the font I used was Andale Mono - in order to get the columns to line up properly, you have to use a mono spaced font, and web safe monospaced fonts are pretty limited, so I went with the lesser of the readily available evils.