Tutorial - Completely Custom AutoIndex

Problems with the Windows version of XAMPP, questions, comments, and anything related.

Tutorial - Completely Custom AutoIndex

Postby konzine » 07. August 2009 10:36

Hello! 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

    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
    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 :

    Code: Select all
    Options Indexes
       IndexOptions FancyIndexing SuppressDescription SuppressHTMLPreamble
       HeaderName /header.html
       ReadmeName /readme.html
       IndexIgnore header.html readme.html .htaccess style.css

    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.

    Here is the example code I have made to show you what I mean in demonstration :

    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 &quot;Harry's site!&quot; 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>&nbsp;</p>
    <p>&nbsp;</p>


    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.

    Again, here is an example code of what the Footer (ReadMe.html) would look like :

    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>


    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;
    }


    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 :

    Code: Select all
    <link rel="stylesheet" href="/style.css" type="text/css" />


    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!
konzine
 
Posts: 12
Joined: 02. August 2009 13:45

Return to XAMPP for Windows

Who is online

Users browsing this forum: No registered users and 36 guests