So, you think the default directory index in apache is painful to look at? Well, it is. It makes my skin crawl.

Here is something that I can look at:

This page has all the configuration files you need to make your apache directory listings look like that.

configure apache

codetitle. apache configuration

<VirtualHost xxxx>
  ServerName xxxxxxx
  DocumentRoot /var/www/xxxx
  <Directory "/var/www/xxxx">
    Options +FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
    Options +Indexes
    IndexOptions +FancyIndexing +FoldersFirst 
    HeaderName HEADER.html
  </Directory>
  Include /etc/apache2/pretty-dir.conf
</VirtualHost>

codetitle. /etc/apache2/pretty-dir.conf

<IfModule alias_module>
<IfModule autoindex_module>

IndexOptions FancyIndexing VersionSort SuppressDescription FoldersFirst XHTML HTMLTable NameWidth=* IgnoreCase SuppressRules
IndexStyleSheet "/css/style.css"

Alias /icons/ "/var/www/icons/"
Alias /css/ "/var/www/css/"
<Directory "/var/www/icons">
  Options Indexes MultiViews
  AllowOverride None
  Order allow,deny
  Allow from all
</Directory>

<Directory "/var/www/css">
  Options Indexes MultiViews
  AllowOverride None
  Order allow,deny
  Allow from all
</Directory>

AddIconByEncoding (CMP,/icons/compressed.gif) x-compress x-gzip
AddIconByType (TXT,/icons/text-x-generic.png) text/*
AddIconByType (IMG,/icons/image-x-generic.png) image/*
AddIconByType (SND,/icons/audio-x-generic.png) audio/*
AddIconByType (VID,/icons/video-x-generic.png) video/*

AddIcon /icons/application-x-executable.png .bin .exe
AddIcon /icons/package-x-generic.png .tar .rar .zip .bz2 .gz .7z .Z .z .tgz
AddIcon /icons/applications-internet.png .wrl .wrl.gz .vrml .vrm .iv
AddIcon /icons/text-html.png .html .shtml .htm .pdf
AddIcon /icons/text-x-generic.png .txt
AddIcon /icons/text-x-script.png .c .pl .py .php .phps .conf .sh .shar .csh .ksh .tcl
AddIcon /icons/video-x-generic.png .dvi
AddIcon /icons/document-properties.png .uu
AddIcon /icons/format-justify-center.png .tex
AddIcon /icons/dialog-error.png.gif core
AddIcon /icons/go-previous.png ..
AddIcon /icons/accessories-text-editor.png README
AddIcon /icons/folder.png ^^DIRECTORY^^
AddIcon /icons/blank.gif ^^BLANKICON^^

DefaultIcon /icons/image-missing.png
IndexIgnore .??* *~ *# HEADER* README* RCS CVS *,v *,t

</IfModule>
</IfModule>

set up stylesheet

codetitle. /var/www/css/style.css

address {display: none}
table {
  width: 100%;
  border-collapse: collapse;
}
td, th {
  padding: 4px;
  border: 1px solid #CCC;
}
tr {
  background-color: #F2F2F2;
}
th {
  background: #ddd;
}

set up icons