map((lambda idea:blog),me)

When browsing several Internet sites, we certainly have come across some commonly-formatted web pages. Lots of them are automatically generated by the Web server. Apache web server has a dedicated module to generate directory indexes. theses indexes are often “ugly” simple pages.

Here’s some steps to get around this starchy formattin, and don’t worry, I’m not gonne advice you to edit the module’s source code and recompile it. The hack is based on CSS and DOM manipulation using JavaScript, and some tips when configuring the server. First, we have to enhance the default settings of the directive IndexOptions of the httpd-autoindex.conf file as follows :

Then, within the same file, we set the directive ReadmeName to /README.html (which is the default setting). This way, the README.html file wich is appended by Apache after each directory indexing will be used to host the CSS/JavaScript code used to impropuve the index formatting. This is the CSS dirctives I’ve included in my README.html file :

H1 {font-size:18px;font-family:Arial;font-weight:normal;color:#EEEEEE;text-align:center;background-color:#777777;margin-bottom:30px;}
BODY {margin-top:0px;margin-left:0px;margin-right:0px;background-color:#d8d8d8}
A {color:#3300cc; font-family:Arial; font-size:13px;text-decoration:none;}
A:hover {color:#330000; font-family:Arial; font-size:13px;text-decoration:underline;}
TD {font-family:Arial; font-size:12px;}
SPAN.GT {
color:orange;
font-weight:bold;
position:relative;
top:1px;
}

then, just after the <style> bloc, I’ve added the following JavaScript code :

<script langage="javascript">
if(document.getElementsByTagName)
{
t=document.getElementsByTagName("table").item(0)
t.setAttribute("align","center")
t.setAttribute("cellpadding","2")
t.setAttribute("border","0")
t.setAttribute("style","border-width:0px;border-style:solid;border-color:black;")
}
d=document.createElement("div");
d.setAttribute("style","width:500px;border-style:solid;border-width:1px;border-color:black;margin-top:20px;padding:20px");
d.appendChild(t)
h=document.getElementsByTagName("h1").item(0);
d.insertBefore(h,t)
c=document.createElement("center");
c.appendChild(d);
s=document.getElementsByTagName("script").item(0);
s.parentNode.insertBefore(c,s);
document.getElementsByTagName("h1").item(0).innerHTML=document.getElementsByTagName("h1").item(0).innerHTML.replace("Index of /" , "").replace(/\//g , " <span class=\"GT\">&amp;amp;gt;</span> ");
document.getElementsByTagName("tr").item(0).setAttribute("style","display:none;");
document.getElementsByTagName("tr").item(1).setAttribute("style","display:none;");
document.getElementsByTagName("tr").item(document.getElementsByTagName("tr").length-1).setAttribute("style","display:none;");
_tds=document.getElementsByTagName("td");
for(i=0,__loop=_tds.length;i<__loop;i++){
if( _tds.item(i).innerHTML == "  - "  )
document.getElementsByTagName("td").item(i).innerHTML="&amp;amp;nbsp;";
}
</script>

The above script basically creates an empty centered div tag inside of wich it places the generated html table, the index title and removes unwanted others hedares or tables headers (some <tr> elements). The final result looks much more pretty: