Tutorial - Completely Custom AutoIndex
Posted: 07. August 2009 10:36Hello! This is going to be a step-by-step tutorial on how I went about creating a completely custom looking AutoIndex. Huge thanks out to Wiedmann, the Global Moderator here. Without his help, this would have never been done.
1. Fresh XAMPP Install
2. Set Up Your .Htaccess File
3. Setting Up Your Header.html
4. Setting Up Your Footer File, Aka "Readme.Html"
5. Time for Some Style.Css fun!
Have fun guys! If you have any questions please post them in a reply in this thread. I will try to answer them ASAP!
1. Fresh XAMPP Install
- Download XAMPP from Here
Extract the XAMPP Folder that came inside the zip, into the directory of your choice
Once extracted, run the "Setup_Xampp.Bat" file, located in the XAMPP folder
On to step 2!
2. Set Up Your .Htaccess File
- Open Notepad, or your favorite file web editor program
- Code: Select all
Options Indexes
IndexOptions FancyIndexing SuppressDescription SuppressHTMLPreamble
HeaderName /header.html
ReadmeName /readme.html
IndexIgnore header.html readme.html .htaccess style.css
Grab the code below from my .htaccess file. NOTE* you may modify this however you'd like, this is setup for the header and readme to be put into the root dir :
Save this file to your root directory, make sure it is .htaccess with no associated file type
3. Setting Up Your Header.html
- Header.html Description : This file will hold all the information that happens BEFORE the autoindex is generated. In other words, if you want any links at the top of the page before the Directory is viewed, this is where the html for that would go.
- Code: Select all
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<p align="center"><b><font size="5">Hello! Welcome to "Harry's site!" Please use
the links below to navigate. Enjoy your stay!</font></b></p>
<p align="center"><b><a href="funngames.html">Fun and Games</a> -
<a href="Networking.html">Networking</a> </b></p>
<p> </p>
<p> </p>
Here is the example code I have made to show you what I mean in demonstration :
As you can see, it's nothing more than a very basic HTML template. You can put anything in here, and all your directories generated by AutoIndex, will use this HTML template. You can also put images in here, Just be sure when specifying the image folder to prepend with a backslash. In other words, if you are on your home index, and you see a folder in the index called "beta", and once you navigate to that page all of a sudden your images from the header.html no longer work
YOU MUST MAKE THE LINKS TO ALL IMAGES AND HYPERLINKS SET TO THE RELATIVE PLACEMENT OF THE FOLDER
So, if images is in your root directory, you would set all images to /images/example.gif, rather than just images/example.gif
Save this file to your Root Directory, as "Header.html"
4. Setting Up Your Footer File, Aka "Readme.Html"
- ReadMe.html Description : This file will hold all the information that happens AFTER the autoindex is generated. In other words, if you want any links at the bottom of the page after the Directory is viewed, this is where the html for that would go. By default, what usually goes here is server information such us the Version of Apache, the server port being used etc.
- Code: Select all
<p align="center"><b>THANKS FOR VISITING! You can also return to the
<a href="index.html">Home</a> page if you would like.</b></p>
</body>
</html>
Again, here is an example code of what the Footer (ReadMe.html) would look like :
Save this file as "ReadMe.html" and place it in the folder along with the .htaccess file
5. Time for Some Style.Css fun!
- The following code is the Style.Css I have been using to edit my files. It handles every part of the AutoIndex thus far that I have found :
- Code: Select all
body
{
padding:0;
margin:0;
background : #EEEEEE;
font-family: Arial;
font-size:12px;
color : #DDDDDD;
}
hr
{
border:none;
background:transparent;
color : #f5f8fb;
}
pre
{
background : #121212;
margin:20px;
padding-bottom:5px;
padding-left:10px;
border:0px solid #ffffff;
padding-bottom:15px;
font-family: ;
}
pre img
{
margin-top:10px;
margin-bottom:-10px;
border:none;
}
A,
A:link,
A:active
{
font-weight:bold;
color : #5d9dba;
}
A:visited
{
color : #3e7e8f;
}
A:hover
{
color : #c0d3dc;
}- Code: Select all
<link rel="stylesheet" href="/style.css" type="text/css" />
Save the file as "Style.Css", or whatever you'd like, in the root directory
When pointing to this file via your header file, be sure to prepend the directory. Like this :
Notice the / before the "style.css"
Place the above code into the "HEAD" section of your Header.Html file
Have fun guys! If you have any questions please post them in a reply in this thread. I will try to answer them ASAP!