Styling Apache2 Directory Listings

Introduction

I am a PHP Guy and was trying very hard to style the Apache2 Directory Listing index page, but miserably failed because of obvious reasons, which Apache2 would troll upon us. Finally I was able to style them and these are the steps I tried. Do let me know if I can improve my way of self learning and hacking via the replies. And yeah, I suppose this would be useful to someone, who needs to style them for the first time, and they can refer to this post, so that it would be a cakewalk for them.

I am addressing two problems here:

1. Fixing the broken /icons/, which always throws a HTTP 403 Forbidden or HTTP 404 Not Found errors.
2. Styling the default Index of page, which shows up when there is no default file in the path and apache2 is configured to show the directory listing.

Step 1: Install WAMPServer

Install the latest version of WampServer from their WampServer, la plate-forme de développement Web sous Windows - Apache, MySQL, PHP. Install it preferably under C:\WAMPServer\ or C:\Wamp\. We are going to use the latter.

Step 2: Start the WAMP Server

You can start the WAMP Server in two ways, either by locating the program in your Start Menu or by executing the file C:\Wamp\wampmanager.exe. This starts the WAMPServer and a small icon comes up in your taskbar, with a W icon.
Just to make sure, left click on the W icon and navigate to Apache » Service and make sure that it is started. Just for the sake of testing, please do the same for the MySQL service too.

Step 3: Fixing the icons bug in the default installation

By default, the installation provided from their WampServer, la plate-forme de développement Web sous Windows - Apache, MySQL, PHP has issues like icons won't be displayed and throws a status code HTTP 403 Forbidden. It is because they may not have included the httpd-autoindex.conf to thier deployment list for installer to modify it accordingly. So their development path is fixed static in it.

We need to correct that to display the icons, which are shown when we use the mod_autoindex, i.e., on the Index of page, which lists the available files and folders present in the particular directory or path.

To do this, please open the file httpd-autoindex.conf from C:\Wamp\bin\apache\Apache2.2.21\conf\extra folder. You can open it with any of your favourite text editor like Notepad, or Sublime Text. PS: Even vim works!

Now you need to find the Alias /icons/ "somepath" line and change it to Alias /icons/ "icons/". Also you need to change the directory permissions this way:

    Options Indexes FollowSymLinks MultiViews
    AllowOverride all
    Order deny,allow
    Allow from all

This is a simple fix for having the icons to be displayed, rather showing a HTTP 403 Fobridden.

Step 4: The Styling

If you are really good in CSS and you can style it directly in pure CSS (without changing the HTML Mark-up), without any HTML change, good. And it is easier here too! First we need to include the CSS file to the index page, which gets displayed in the event where no default page is found and when directory listing is allowed.

The Skeleton CSS

First thing is to create an apachestyle.css file and start writing the rules. A typical stylesheet should look this way, covering all the elements in the index page:

body {}
body h1 {}
body table {}
body table tr {}
body table tr th {}
body table tr th img {}
body table tr th a {}
body table tr th hr {}
body table tr td {}
body table tr td img {}
body table tr td a {}

No other elements are present other than these. My stylesheet looks this way:

* {font-family: "Segoe UI", sans-serif;}
body {font-size: 62.5%;}
a {text-decoration: none; color: #09f;}
a:hover {text-decoration: underline; color: #f00;}
table {width: 100%;}
table tr th hr {border: 0; border-bottom: 1px solid #ccc;}

After adding the styles and completing the stylesheet, place the apachestyles.css file inside the \icons\ folder, directly under the bin folder of Apache2, just for easy access.

Adding the CSS to the Index page

Now once the CSS is done, we need to add this to the index page. This can be done using the IndexStyleSheet directive in the httpd-autoindex.conf file. At the end of the file, add this line:

IndexStyleSheet "/icons/indexstyle.css"

Step 5: Restart Apache Server

This is one of the very important step after making changes to the server's configuration files. You need to restart the apache2 listener. To do this, click on the same W icon in the taskbar, navigate to Apache » Service and select the option Restart Service.

Now open a path that has no default index page and see if you are able to get the styles, which you just wrote! Happy hacking the apache2 server! 😀