Here it goes:
<style type="text/css"> body { text-size: 9px; font-family: arial, helvetica, tahoma, times, sans-serif;} .1 a, .2 a, .3 a { border-bottom: 1px solid #fff; width: 500px; padding-left: 2px; text-decoration: none;} .1 a:hover, .2 a:hover, .3 a:hover { text-decoration: line-through;} .1 a{ background-color: #222222; color: #ffffff;} .2 a{ background-color: #ab0000; color: #ffffff;} .3 a{ background-color: #e3e3e3; color: #222222;} </style>
This is our CSS-code, the style we'll implement on the different rows. .1 is the class for the first row, .2 is the class for the second row, and .3 is the class for the third row. This css can be saved in a .css-document, and then included in our php-document, but I'm not going to do that in this tutorial. If you do want to do this, just paste this code at the top in your .php-document:
<link rel="stylesheet" href="urltoyourcss.css" />
Now on to the php:
<?php $directory = "blah"; $opendirectory = opendir($directory); $num = 1; while ($file = readdir($opendirectory)) { if ($file != "." && $file != "..") { $num = ($num > 3 ? '1' : $num ); print ("<div class=\"$num\"><a href=\"$directory/$file\">$file</a></div>"); $num++; } } closedir($opendirectory); ?>
This is a short code, but I'll explain it anyway.
$directory and $opendirectory: The first variable just sets the directory to be opened, in this case "blah". Just replace "blah" with the name of the directory you want the contens of. The $opendirectory basicly opens the directory using the opendir-function, and the directory will later on be closed by the closedir-function. Easy, or what?
$num: Just a variable that contains a number. The standard value of number is set to 1, and when a file has been listed it adds 1 to the number like this: $num++.
while ($file = readdir($opendirectory)): This is quite simple too, the readdir-function reads the content of our opened directory as long as there are files in it.
if ($file != "." && $file != ".."): These two are basic folders, and don't need to be listed. If you do want them to be listed, just remove this if. Then, our code would be:
while ($file = readdir($opendirectory)) { $num = ($num > 3 ? '1' : $num ); print ("<div class=\"$num\"><a href=\"$directory/$file\">$file</a></div>"); $num++; }
$num = ($num > 3 ? '1' : $num );: This one might be a bit tricky, but I'll try to explain it properly. If the value of the variable is greater than 3, set it back to 1. If it's not greater than 3 (in this example, 1, 2 or 3), don't change it. Ex: If the variable is set to 2, this command checks if the number 2 is greater than 3. Since it's not, the varibles value remains 2.
print ("<div class=\"$num\"><a href=\"$directory/$file\">$file</a></div>");: The last line I'll explain. This prints the style of the div, which is a number. If the variable $num is set to 1, then assign the class .1, and so on. Then, it produces a link to the file, so the file can be opened. If the name listed is a directory, you wont see a file extension.
Final code:
<style type="text/css"> body { text-size: 9px; font-family: arial, helvetica, tahoma, times, sans-serif;} .1 a, .2 a, .3 a { border-bottom: 1px solid #fff; width: 500px; padding-left: 2px; text-decoration: none;} .1 a:hover, .2 a:hover, .3 a:hover { text-decoration: line-through;} .1 a{ background-color: #222222; color: #ffffff;} .2 a{ background-color: #ab0000; color: #ffffff;} .3 a{ background-color: #e3e3e3; color: #222222;} </style> <?php $directory = "backstage"; $opendirectory = opendir($directory); $num = 1; while ($file = readdir($opendirectory)) { if ($file != "." && $file != "..") { $num = ($num > 3 ? '1' : $num ); print ("<div class=\"$num\"><a href=\"$directory/$file\">$file</a></div>"); $num++; } } closedir($opendirectory); ?>
If you test this out, you'll get a directory listing with some nice grey and red squares, not just boring text.
If you want more or less different styles, then just change the number 3 to something else. Just make sure that if you for example change the number to 5, make two more classes to, named .4 and .5.
I hope this tutorial might come in handy for somebody out there, just let me know if you find any ways to improve it or if you need any help