Making apache directory index more sexy in 2 steps
11 October 2005
Do you like how my files.myeburg.net looks like ? That is done without any programming in PHP or some other script language. It is just little bit artwork and some extended apache configuration.Here are pictures: That is how it looks on default configuration, my configuration, earlier configuration.
So if you will do something like this, you need to do 2 steps:
- configure your directory index listing and make artwork
- and change default icons by yours.
First Step
Let say your directory, you will show with apache is placed some where here: /www/dirSo you need create new directory there with "." at start,
mkdir /www/dir/.include
now you can place all needed files for you sexy look indexing there. Create header.html, end.html and default.css in this directory.header.html is needed to style your directory ouput look befor file listing, end.hml - after. And default.css is only cascading style sheet file to define how all your pages should look.
You can look to all my files, here i show only major parts of it. So header.hml :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>files.myeburg.net</title>
<link rel="stylesheet" type="text/css" href="/.include/default.css">
</head>
<body>
<div id="hdr">
<div id="logo"><a href="http://screens.myeburg.net/">screens myeburg.net</a></div>
<div id="content">
Now define end.html : </div>
</body>
</html>
So, you see, you declare default.css as default style sheet for this page.Now let get configure our apache. This configuration can be done in general http.conf file (or his includes), or just in .htaccess file under DocumentRoot or in some of the subfolders there.
This is my configuration for whole virtualhost. I dont do any .htaccess files because it can make apache little bit slower.
<VirtualHost *:80>
ServerName files.myeburg.net
DocumentRoot "/www/dir"
HeaderName "/.include/header.html"
ReadmeName "/.include/end.html"
<Directory "/www/dir">
Options Indexes
<IfModule mod_autoindex.c>
IndexOptions FancyIndexing SuppressHTMLPreamble FoldersFirst ScanHTMLTitles
IndexOptions DescriptionWidth=24
IndexOptions NameWidth=48
</IfModule>
AllowOverride None
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
As you See i define Header File and Readmefile and i made some extra tuning for Fancy Indexing 
You can play with this parameters to find your optimal configuration.All files i have in .include you can see here: files.myeburg.net/.include/
After restarting (if configuration was done in http.conf part) apache you should have already this fancy look. But icons are horrible. So go to step two.
Second Step
We need better icons for all file types. I use gnome png mime icon files with 16x16 size, what is not optimal, size don't match font size and as i know Internet Explorer don't understand png transparency. But actually i do not care about users who use buggy software
If you have better solution here, drop me about this in to comments.So we need change http.conf file again to change and add more file definitions and icons which should be used.
Here is complete configuration file you need, and a little part how it looks is here:
<IfModule mod_autoindex.c>
AddIcon /icons/csharp.png .csharp
AddIcon /icons/flash.png .flv .swf
</IfModule>
And now you need upload to you server and replace apache icon files. Thats all you need, now just restart apache and take a look to your sexy site directory listing 
.Addon: my icons files.
Writen by 
SchAmane
| write a comment
