Pretty-up Ugly Default Apache Directory Listings

If you've got a site that allows people to see the contents of a web server directory without accessing a specific page, you know that the listing Apache creates is ugly. Here's how to fix that.

Apache, Server, FancyIndex

The company I work for uses an FTP server to post all of its files for client review. In ways, it's a good solution because all you have to know is how to connect to a server, and how to drag and drop, so anyone can manage what's posted. The drawback is that apache default directory listings are stuck in the dawning days of the internet, so everything looks really ugly. Luckily, there's a pretty easy way to change this simply by modifying your htaccess file.

The first thing you should do is protect your htaccess file, which, supposedly, you can accomplish with this code, though I'm no expert on it:



#HTACCESS PROTECTION

 order allow,deny
 deny from all

Then you can add the specific directives to modify the appearance. Note that autoindexing must be configured in Apache for all of this to work:



# DIRECTORY CUSTOMIZATION

# SET INDEX OPTIONS
IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble
# SET DISPLAY ORDER
IndexOrderDefault Descending Date

FancyIndexing really isn't all that fancy, but it allows you to customize icons for the different filetypes you'll post to FTP, and modify the fonts and things, so it's important to enable this. FoldersFirst just puts folders before files in the list, regardless of how things are sorted. The width statements ensure that Apache adjusts the column widths for file information based on the length of the content. Otherwise you get cut off titles and things (...). SuppressHTMLPreamble is used for the next set of statements:


# SPECIFY HEADER FILE
HeaderName /apache/header.shtml
# SPECIFY FOOTER FILE
ReadmeName /apache/footer.html



These directives allow you to insert a custom html header and footer before the actual file listings on your page, and the SuppressHTMLPreamble statements ensures that you don't end up with a duplicate set of etc tags in your code. I'll explain the actual template files in a minute.


# 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.

If you want to know more about customizing directory listings, check out this URL