map((lambda idea:blog),me)

After donwloading and installing wordpress version 2.6.1, and as soon as I went through its consol, it told me that version 2.6.2 is already available for upgrade. I didn’t wait to grab it and upgrade. However, I found it funny to see that the readme file in the 2.6.2 archive still mentionning version 2.6.1. Anyway, wordpress is a great peace of software, with a greate ease-of-use (surely, after one knows how to correctly set the “uploads” folder path and rights). And by the way, Hello Wolrd !

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: