Version en ligne

Tutoriel : Personnaliser le skin de son FTP

Table des matières

Personnaliser le skin de son FTP
Comment ?
Le fichier .htaccess
Le code complet

Personnaliser le skin de son FTP

Comment ?

Si vous aussi vous voulez modifier l'affichage de votre FTP, vous avez trouvé le bon tutoriel :) .

Comment ?

Le fichier .htaccess

En général, votre FTP ressemble à ceci :

Image utilisateur

Je vais vous expliquer comment le modifier de façon à donner quelque chose de plus "joli", comme ceci par exemple :

Image utilisateur

Pour obtenir ce résultat, nous allons devoir modifier (ou créer) le fichier .htaccess qui se trouve à la racine de votre espace Web. La mise en page se fera en HTML. Et je vous le dis tout de suite, votre code ne sera pas valide, parce que le code HTML que génère Apache pour afficher le squelette de l'arborescence est invalide (il y a des balises dans un élément PRE).


Le fichier .htaccess

Le fichier .htaccess

Comment ? Le code complet

A la racine de votre hébergement (dans le dossier de base), créez un fichier .htaccess. Si vous en avez déjà un, nous allons le modifier.

Commencez par écrire ces 2 lignes :

HeaderName /ftp/head.htm
ReadmeName /ftp/foot.htm

head.htm contiendra le code de la page à placer avant l'arborescence, et foot.htm, ce qui vient après.

Je ne comprends pas bien à quoi servent ces deux fichiers... tu peux expliquer ?

Quand vous naviguez dans votre FTP, Apache génère la liste des fichiers du répertoire que vous visitez. Cette liste va alors être ajoutée au code de head.htm. A tout cela, le code de foot.htm sera ajouté, ce qui donnera au final une page complète. Voici ce que ça peut donner :

<!--  code de head.htm -->

<PRE>Code du listing généré par Apache</PRE>

<!-- code de foot.htm -->

Voici un code possible pour head.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>FTP Viewer</TITLE>
<SCRIPT TYPE="text/javascript" SRC="/ftp/script.js"></SCRIPT>
<STYLE TYPE="text/css">
    body { padding: 0; margin: 0; background: url("http://nayi.free.fr/ftp/latte.gif") repeat-x top #EEEEEE; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #494949; }
    pre { background: #FFFFFF; margin: 20px; margin-top: 0px; padding-bottom: 5px; padding-left: 10px; border: 1px solid #AAAAAA; padding-bottom: 15px; }
    pre img { margin-top: 10px; margin-bottom: -10px; border: none; }
    img { border: none; }
    hr { display: none; }
    a, a:link, a:active, a:visited { font-weight: bold; color: #494949; }
    a:hover { color: #DAA520; }
    h1 { text-align: center; font-size: 12px; margin: 0; padding: 0; }
</STYLE>
</HEAD>
<BODY>
<H1>.:: FTP Viewer ::.</H1>

Voici un code possible pour foot.htm

</BODY>
</HTML>

Oui, je sais, c'est très long... Le code de l'arborescence sera inséré par Apache entre ces 2 fichiers.

Quelques directives

Maintenant, ajoutez ce code :

IndexIgnore .htaccess Thumbs.db db 
IndexOptions SuppressHTMLPreamble FancyIndexing
IndexOrderDefault Ascending Description

Autres options d'IndexOptions

Je n'ai utilisé que deux options, les plus utiles. Mais il en existe d'autres, les voici :

Ajout d'une icône

Pour ajouter une icône à un type de fichier, il suffit d'utiliser cette directive :

AddIcon (IMG,/ftp/pdf.png) .pdf .PDF

Cette directive définit une icône (/ftp/pdf.png) qui sera attribuée aux fichiers portant l'extension .pdf ainsi qu'à ceux portant l'extension .PDF.

IMG est le texte alternatif affiché si l'image n'est pas chargée.

Ajout d'une description

Dans le listage du contenu d'un répertoire, il y a une colonne Description, qui décrit chaque type de fichier. Voici comment modifier ce texte.

AddDescription "Document Word"       *.doc *.DOC *.docx *.DOCX

Ainsi, tous les fichiers portant l'extension .doc (ou .docx) auront comme description Document Word, au même titre que les fichiers affublés de l'extension, .DOC.

Le cas des dossiers

Et pour un dossier, je fais comment ?

L'icône

Ah, c'est très simple, faites comme ceci :

AddIcon (PAR,/ftp/icons/dir_par.png) ..
AddIcon (DIR,/ftp/icons/dir.png) ^^DIRECTORY^^

La première directive est faite pour les dossiers avec le lien Parent Directory (dont le chemin est ..). La deuxième sert tout simplement pour les dossiers normaux ;)

La description

Voilà pour ajouter une description aux dossiers :

AddDescription "Dossier parent" ..
AddDescription "Répertoire" */

L'icône par défaut

Voici, pour finir, la directive qui permet d'attribuer une icône à un fichier, si il n'en a pas une spécialement définie :

DefaultIcon /ftp/icons/file.png

Comment ? Le code complet

Le code complet

Le fichier .htaccess

Comme je suis gentil, je vais vous donner le code de mon fichier .htaccess :) :

HeaderName /ftp/head.htm
ReadmeName /ftp/foot.htm

IndexIgnore .htaccess Thumbs.db db _notes
IndexOptions SuppressHTMLPreamble FancyIndexing FoldersFirst IgnoreCase
IndexOrderDefault Ascending Description

AddIcon (IMG,/ftp/icons/image.gif) .svg .SVG .wmf .WMF 
AddIcon (IMG,/ftp/icons/gif.gif) .gif .GIF
AddIcon (IMG,/ftp/icons/jpg.gif) .jpg .JPG .jpeg .JPEG
AddIcon (IMG,/ftp/icons/png.gif) .png .PNG
AddIcon (IMG,/ftp/icons/psd.gif) .psd .PSD
AddIcon (IMG,/ftp/icons/ico.gif) .ico .ICO
AddIcon (IMG,/ftp/icons/tif.png) .tif .TIF .tiff .TIFF

AddDescription "Image PNG"       *.png *.PNG
AddDescription "Image JPG"       *.jpg *.JPG
AddDescription "Image BMP"       *.bmp *.BMP
AddDescription "Image SVG"       *.svg *.SVG
AddDescription "Image GIF"       *.gif *.GIF
AddDescription "Image WMF"       *.wmf *.WMF
AddDescription "Image PSD"       *.psd *.PSD
AddDescription "Image ICO"       *.ico *.ICO

AddIcon (VIDEO,/ftp/icons/wmp.png)  .mov .MOV .avi .AVI .mpg .MPG .wmv .WMV
AddDescription "Video QuickTime"    *.mov *.MOV
AddDescription "Video AVI"          *.avi *.AVI
AddDescription "Video MPEG"         *.mpg *.MPG
AddDescription "Video WMV"          *.wmv *.WMV

AddIcon (AUDIO,/ftp/icons/wmp.png) .wma .mp3 .mp4 .midi .mid .WMA .MP3 .MP4 .MIDI .MID
AddDescription "Audio MP3"     *.mp3 *.MP3
AddDescription "Audio MP4"     *.mp4 *.MP4
AddDescription "Audio WMA"     *.wma *.WMA
AddDescription "Audio MIDI"    *.mid *.midi

AddIcon (FLA,/ftp/icons/fla.gif)      .fla
AddIcon (AS,/ftp/icons/as.gif)        .as
AddIcon (FLV,/ftp/icons/flv.gif)      .flv
AddDescription "Fichier Flash Video" *.flv
AddDescription "Projet Flash"         *.fla
AddDescription "Fichier ActionScript"          *.as

AddIcon (SWF,/ftp/icons/swf.png)    .swf
AddDescription "Animation Flash"       *.swf

AddIcon (TXT,/ftp/icons/txt.png) .txt
AddDescription "Fichier de texte brut" *.txt

AddIcon (DOC,/ftp/icons/word.png) .doc .rtf .docx
AddDescription "Document Word" *.doc *.rtf *.docx

AddIcon (DOC,/ftp/icons/powerpoint.png) .ppt .pptx
AddDescription "Présentation PowerPoint" *.ppt *.pptx

AddIcon (DOC,/ftp/icons/excel.png) .xls .xlss
AddDescription "Feuille de calcul Excel" *.xls *.xlsx

AddIcon (PHP,/ftp/icons/php.gif) .php .phtml
AddDescription "Page Web PHP" *.php
AddDescription "Page Web PHP" *.phtml

AddIcon (HTM,/ftp/icons/web.gif) .htm .html .HTM .HTML .xhtml .XHTML
AddDescription "Page Web HTML" *.htm *.HTM
AddDescription "Fichier HTML Compilé" *.chm
AddIcon (HTC,/ftp/icons/chm.gif) .chm

AddIcon (HTC,/ftp/icons/ini.png) .htc
AddDescription "Comportement IExplorer" *.htc

AddIcon (CSS,/ftp/icons/css.png) .css
AddDescription "Feuille de style CSS" *.css
AddIcon (CSS,/ftp/icons/js.png) .js
AddDescription "Fichier Javascript" *.js
AddIcon (CSS,/ftp/icons/xml.png) .xml
AddDescription "Fichier XML" *.xml

AddIcon (EXE,/ftp/icons/exe.png) .exe .EXE
AddDescription "Exécutable" *.exe *.EXE

AddIcon (PDF,/ftp/icons/pdf.png) .pdf .PDF
AddDescription "Document Adobe PDF" *.pdf *.PDF

AddIcon (ARCHIVE,/ftp/icons/archive.gif) .jar .zip .rar .arj .arc .tar .targz .gz
AddDescription "Archive ZIP" *.zip *.ZIP
AddDescription "Archive RAR" *.rar *.RAR
AddDescription "Archive ARJ" *.arj *.ARJ
AddDescription "Archive ARC" *.arc *.ARC
AddDescription "Archive TAR" *.tar *.TAR
AddDescription "Archive JAR" *.jar *.JAR
AddDescription "Archive GZ" *.gz *.GZ
AddDescription "Archive TARGZ" *.targz *.TARGZ

AddIcon (C,/ftp/icons/c.gif) .c
AddDescription "Fichier C" *.c
AddIcon (H,/ftp/icons/h.gif) .h
AddDescription "Fichier d'ent-tête" *.h
AddIcon (VCPROJ,/ftp/icons/vcproj.gif) .vcproj
AddDescription "Projet Visual C++" *.vcproj

AddIcon (PAR,/ftp/icons/dir_par.png) ..
AddIcon (DIR,/ftp/icons/dir.png) ^^DIRECTORY^^
AddDescription "Dossier parent" ..
AddDescription "Répertoire" */

DefaultIcon /ftp/icons/txt.png

Vous pouvez aussi réutilisez les icones que j'utilise. Elles se trouvent ici.

Sinon, voici un aperçu de mon FTP. C'est aussi là que se trouvent les fichiers qui le composent.

Voilà, ayez un beau FTP ;)

Merci à biohazard2 qui m'a aidé à rédiger ce tutoriel ;)


Le fichier .htaccess