Makeover for your File Directories!

**Coastercraze** · 31 January, 2010, 22:20 PM

If you ever want to turn your directories into this:
Index of /images/cats/

Insert this code into your .htaccess (make one if you don't already have one)

Code:

Options +Indexes
ReadmeName /footer.shtml
HeaderName /header.shtml

Next, create two files, footer.shtml and header.shtml

In header.shtml put this:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Index of <!--#echo var="REQUEST_URI"--></title>
<style>
* {
    color: #CCC;
}
body {
    clear: both;
    width: 90%;
    margin: 0 auto;
    background: #181818;
}
.tbody { background: none; }
#hDiv {
    float: left;
    width: auto;
    height: auto;
    display: inline;
    margin: 10px 50px;
}
.l {
    float: left;
    width: 8px;
    height: 44px;
    background: url() top left no-repeat;
}
.r {
    float: left;
    width: 8px;
    height: 44px;
    background: url() top right no-repeat;
}
h1 {
    float: left;
    color: #CCC;
    width: auto;
    height: 42px;
    margin: 0px; padding: 0px;
    background-color: #555;
    border-top: 1px solid #305C9F;
    border-bottom: 1px solid #305C9F;
}
p {
    color: #AF5B29;
    font-size: 14px;
    line-height: 1.2em;
}
tr:nth-child(even) {
    background: #5069AD top left repeat-x;
}
tr:nth-child(odd) {
    background: #2F4066 top left repeat-x;
}
th {
    border: none;
    background: none;
}
hr {
    height: 30px;
    display: none;
}
a {
    color: #CCC;
}
a:hover, a:active {
    color: #FFF;
}
a:link, a:visited {
    color: #CCC;
}
table {
    width: 100%;
    background-color: #305C9F;
}
td {
    text-align: center;
}
</style>
</head>
<body>
<div id="hDiv">
<div class="l"> </div>
<h1>www.yoursite.com<!--#echo var="REQUEST_URI"--></h1>
<div class="r"> </div>
</div><br /><br />

As you can tell this is very customizable. Tons of different CSS options around here. Even and odd are the rows (1 is odd 2 is even etc) l and r are left and right sides

In your footer.shtml put this code:

Code:

<address style="position:relative;left:5px;"><!--#config timefmt="%Y"-->&copy; Your Site YEAR &ndash; <!--#echo var="DATE_LOCAL"--></address>
</body>
</html>

Upload these to your site's root (public_html) and go to a directory on your site and see how it lists the files!

Preview here:
Index of /images/cats/

**5starpix** · 31 January, 2010, 22:21 PM

That's quite nice actually

We can even edit the colors

**MikeDVB** · 23 February, 2010, 04:18 AM

Interesting... but I've always found it better to turn off indexing. I guess you could do it on a directory by directory basis if you wanted the contents visible.