Makeover for your File Directories!
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"-->© Your Site YEAR – <!--#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/
