Lo que quiero conseguir es que mis archivos se vean con un color distinto dependiendo de la extensión que tengan o si son un directorio o un simple fichero. No sé realmente si se puede hacer, o hay que hacerlo a mano o algo así.
Lo que quiero conseguir es:
CarpetaA ---- Rojo
CarpetaB ---- Rojo
pdf -------- Azul
png -------- VerdeO también serviría
CarpetaA ---- Rojo
CarpetaB ---- Rojo
pdf --------- Azul
png --------- AzulHe estado buscando pero no he encontrado nada, tengo conocimientos básicos en html y css.
index.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Docs Externos</title>
<link rel="stylesheet" href="./.style.css">
<script src="./.sorttable.js"></script>
</head>
<body>
<div id="container">
<h1>Docs Externos</h1>
<table class="sortable">
<thead>
<tr>
<th>Nombre Fichero</th>
<th>Tipo</th>
<th>Tamaño</th>
<th>Fecha de modificación</th>
</tr>
</thead>
<tbody>
<?php
// Opens directory
$myDirectory=opendir(".");
// Gets each entry
while($entryName=readdir($myDirectory)) {
$dirArray[]=$entryName;
}
// Closes directory
closedir($myDirectory);
// Counts elements in array
$indexCount=count($dirArray);
// Sorts files
sort($dirArray);
// Loops through the array of files
for($index=0; $index < $indexCount; $index++) {
// Decides if hidden files should be displayed, based on query above.
if(substr("$dirArray[$index]", 0, 1)!=$hide) {
// Resets Variables
$favicon="";
$class="file";
// Gets File Names
$name=$dirArray[$index];
$namehref=$dirArray[$index];
// Gets Date Modified
$modtime=date("M j Y g:i A", filemtime($dirArray[$index]));
$timekey=date("YmdHis", filemtime($dirArray[$index]));
// Separates directories, and performs operations on those directories
if(is_dir($dirArray[$index]))
{
$extn="<Directory>";
$size="<Directory>";
$sizekey="0";
$class="dir";
// Gets favicon.ico, and displays it, only if it exists.
if(file_exists("$namehref/favicon.ico"))
{
$favicon=" style='background-image:url($namehref/favicon.ico);'";
$extn="<Website>";
}
// Cleans up . and .. directories
if($name=="."){$name=". (Current Directory)"; $extn="<System Dir>"; $favicon=" style='background-image:url($namehref/.favicon.ico);'";}
if($name==".."){$name=".. (Parent Directory)"; $extn="<System Dir>";}
}
// File-only operations
else{
// Gets file extension
$extn=pathinfo($dirArray[$index], PATHINFO_EXTENSION);
// Prettifies file type
switch ($extn){
case "png": $extn="PNG Image"; break;
case "jpg": $extn="JPEG Image"; break;
case "jpeg": $extn="JPEG Image"; break;
case "svg": $extn="SVG Image"; break;
case "gif": $extn="GIF Image"; break;
case "ico": $extn="Windows Icon"; break;
case "txt": $extn="Text File"; break;
case "log": $extn="Log File"; break;
case "htm": $extn="HTML File"; break;
case "html": $extn="HTML File"; break;
case "xhtml": $extn="HTML File"; break;
case "shtml": $extn="HTML File"; break;
case "php": $extn="PHP Script"; break;
case "js": $extn="Javascript File"; break;
case "css": $extn="Stylesheet"; break;
case "pdf": $extn="PDF Document"; break;
case "xls": $extn="Spreadsheet"; break;
case "xlsx": $extn="Spreadsheet"; break;
case "doc": $extn="Microsoft Word Document"; break;
case "docx": $extn="Microsoft Word Document"; break;
case "zip": $extn="ZIP Archive"; break;
case "htaccess": $extn="Apache Config File"; break;
case "exe": $extn="Windows Executable"; break;
default: if($extn!=""){$extn=strtoupper($extn)." File";} else{$extn="Unknown";} break;
}
// Gets and cleans up file size
$size=pretty_filesize($dirArray[$index]);
$sizekey=filesize($dirArray[$index]);
}
// Output
echo("
<tr class='$class'>
<td><a href='./$namehref'$favicon class='name'>$name</a></td>
<td><a href='./$namehref'>$extn</a></td>
<td sorttable_customkey='$sizekey'><a href='./$namehref'>$size</a></td>
<td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
</tr>");
}
}
?>
</tbody>
</table>
</div>
</body>
</html>style.css
* {
padding:0;
margin:0;
}
body {
color: #FF0000;
font: 14px Sans-Serif;
padding: 50px;
background: #eee;
}
h1 {
text-align: center;
padding: 20px 0 12px 0;
margin: 0;
}
h2 {
font-size: 16px;
text-align: center;
padding: 0 0 12px 0;
}
#container {
box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
position: relative;
background: white;
}
table {
background-color: #FFFFFF;
border-collapse: collapse;
width: 100%;
margin: 15px 0;
}
th {
background-color: #FF0000 ;
color: #FFF;
cursor: pointer;
padding: 5px 10px;
}
th small {
font-size: 9px;
color: black;
}
td, th {
text-align: left;
}
a {
text-decoration: none;
color: black;
}
td a {
color: black;
display: block;
padding: 5px 10px;
}
th a {
padding-left: 0;
color: #FFE800;
}
td:first-of-type a {
background: url(./.images/file.png) no-repeat 10px 50%;
padding-left: 35px;
}
th:first-of-type {
padding-left: 35px;
}
td:not(:first-of-type) a {
background-image: none !important;
}
tr:nth-of-type(odd) {
background-color: #FFFFFF;
}
tr:hover td {
background-color:#DF2727;
}
tr:hover td a {
color: #000;
}
/* images */
table tr td:first-of-type a[href$=".jpg"],
table tr td:first-of-type a[href$=".png"],
table tr td:first-of-type a[href$=".gif"],
table tr td:first-of-type a[href$=".svg"],
table tr td:first-of-type a[href$=".jpeg"]
{background-image: url(./.images/image.png);}
/* zips */
table tr td:first-of-type a[href$=".zip"]
{background-image: url(./.images/zip.png);}
/* css */
table tr td:first-of-type a[href$=".css"]
{background-image: url(./.images/css.png);}
/* docs */
table tr td:first-of-type a[href$=".doc"],
table tr td:first-of-type a[href$=".docx"],
table tr td:first-of-type a[href$=".ppt"],
table tr td:first-of-type a[href$=".pptx"],
table tr td:first-of-type a[href$=".pps"],
table tr td:first-of-type a[href$=".ppsx"],
table tr td:first-of-type a[href$=".xls"],
table tr td:first-of-type a[href$=".xlsx"]
{background-image: url(./.images/office.png)}
/* videos */
table tr td:first-of-type a[href$=".avi"],
table tr td:first-of-type a[href$=".wmv"],
table tr td:first-of-type a[href$=".mp4"],
table tr td:first-of-type a[href$=".mov"],
table tr td:first-of-type a[href$=".m4a"]
{background-image: url(./.images/video.png);}
/* audio */
table tr td:first-of-type a[href$=".mp3"],
table tr td:first-of-type a[href$=".ogg"],
table tr td:first-of-type a[href$=".aac"],
table tr td:first-of-type a[href$=".wma"]
{background-image: url(./.images/audio.png);}
/* web pages */
table tr td:first-of-type a[href$=".html"],
table tr td:first-of-type a[href$=".htm"],
table tr td:first-of-type a[href$=".xml"]
{background-image: url(./.images/xml.png);}
table tr td:first-of-type a[href$=".php"]
{background-image: url(./.images/php.png);}
table tr td:first-of-type a[href$=".js"]
{background-image: url(./.images/script.png);}
/* directories */
table tr.dir td:first-of-type a
{background-image: url(./.images/folder.png);}
