Respuestas WordPress

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Cambiar color dependiendo del tipo de fichero

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

O también serviría

      CarpetaA ---- Rojo
      CarpetaB ---- Rojo 
      pdf --------- Azul
      png --------- Azul

He 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="&lt;Directory&gt;";
                $size="&lt;Directory&gt;";
                $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="&lt;Website&gt;";
                    }

            // Cleans up . and .. directories
                if($name=="."){$name=". (Current Directory)"; $extn="&lt;System Dir&gt;"; $favicon=" style='background-image:url($namehref/.favicon.ico);'";}
                if($name==".."){$name=".. (Parent Directory)"; $extn="&lt;System Dir&gt;";}
        }

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

1 Respuesta

0voto

Peter Puntos7750

No se puede.

Si los archivos se mostraran dentro de un HTML o PHP en donde puedes incluir CSS, podrías cambiarlo a tu gusto.

Como lo que muestras es el directorio sin más, el que se encarga de cómo se muestran los archivos es el Navegador y no puedes modificar su comportamiento.

Saludos.

0voto

Lilii comentado

Se muestran dentro de un php, al principio tenía la interfaz que le daba la web, y conseguí cambiarlo usando de plantilla uno de internet, pero no sé cómo indica la clase que le pertenece dependiendo de la extensión que tenga

0voto

Peter comentado

Por favor edita tu pregunta y agrega el código que estás utilizando para mostrar los archivos y con qué clases cada uno de ellos.

Así viéndolo te puedo decir como cambiar los estilos.

1voto

Lilii comentado

Ya está editada

1voto

Peter comentado

¿De casualidad lo tienes en linea? Así lo puedo editar directo y darte el código hecho.

Tienes que aplicarle una clase a cada tipo de archivo para poder darle estilo a cada uno de ellos por separado.

<td><a class="TU-CLASE-AQUI" href='./$namehref'>$extn</a></td>

Y con eso ya directo en tu CSS pones los estilos como quieras.

1voto

Lilii comentado

Vale, eso podría hacerlo, muchas gracias! Me pongo manos a la obra :D

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Podcasts WordPress


...
Respuestas WordPress es un espacio de Preguntas y Respuestas entre usuarios WordPress.

Conecta