[phpBB 3.0.x] Améliorer l'apparence des fichiers joints
Posté : mar. 29 déc. 2009 23:16
» Améliorer l'apparence des fichiers joints
Vous souhaitez donner un petit coup de neuf à l'apparence des fichiers joints? Nous allons vous y aider à l'aide de cette documentation et après , vous pourrez personnaliser comme bon vous semblera.
Nous vous recommandons de télécharger ces icônes car elles vont bien avec cette documentation. Pour les coins, vous pouvez télécharger le pack ci-dessous. Ces derniers sont à placer dans le dossier « styles/{VOTRE_THEME}/theme/images/ »
» Créer des classes CSS
Afin de rendre plus esthétique notre bandeau plus esthétique et afin de respecter un minimum les normes, nous allons définir ici les classes qui seront utilisées plus loin dans la documentation.
Ouvrez le fichier « styles/{VOTRE_THEME}/theme/colours.css ».
A la fin, ajoutez:
» Modifier l'apparence du fichier joint de type « archives »
Maintenant que nous avons défini nos classes CSS, il ne nous reste plus qu'à les mettre en application. Pour ce faire, procédons comme suit:
Ouvrez le fichier « styles/{VOTRE_THEME}/template/attachment.html ».
Cherchez:
Remplacez par:
» Rafraîchissement et vidage du cache
N'oubliez pas de rafraîchir le template et le thème (onglet Styles) et de vider le cache (onglet Général) afin que vos modifications soient prises en compte.
» Résultat
Si vous avez respecté à la lettre cette documentation, vous aurez le résultat suivant:
Vous pouvez définir vous-même la couleur du bandeau de téléchargement et l'effet de survol.
Vous souhaitez donner un petit coup de neuf à l'apparence des fichiers joints? Nous allons vous y aider à l'aide de cette documentation et après , vous pourrez personnaliser comme bon vous semblera.
Nous vous recommandons de télécharger ces icônes car elles vont bien avec cette documentation. Pour les coins, vous pouvez télécharger le pack ci-dessous. Ces derniers sont à placer dans le dossier « styles/{VOTRE_THEME}/theme/images/ »
» Créer des classes CSS
Afin de rendre plus esthétique notre bandeau plus esthétique et afin de respecter un minimum les normes, nous allons définir ici les classes qui seront utilisées plus loin dans la documentation.
Ouvrez le fichier « styles/{VOTRE_THEME}/theme/colours.css ».
A la fin, ajoutez:
Code : Tout sélectionner
/* Attachments // Fichiers joints */
.file-color {
background-color:#4a8aaf;
margin-bottom:4px;
padding:0 10px;
width:350px;
color:#000;
}
.file-color:hover {
background-color:#5a99bd;
margin-bottom:4px;
padding:0 10px;
width:350px;
color:#000;
}
.file-attachment {
color: #FFFFFF;
}
span.corners-file {
margin:0 -10px;
background-image:url('{T_THEME_PATH}/images/corners/corners_left.png');
background-position:0 0;
background-repeat: no-repeat;
display:block;
font-size:1px;
height:5px;
line-height:1px;
}
span.corners-file2 {
background-image:url('{T_THEME_PATH}/images/corners/corners_right.png');
background-position:100% 0;
background-repeat:no-repeat;
display:block;
font-size:1px;
height:5px;
line-height:1px;
}
span.corners-file3 {
margin:0 -10px;
background-image:url('{T_THEME_PATH}/images/corners/corners_left.png');
background-position:0 100%;
background-repeat:no-repeat;
display:block;
font-size:1px;
height:5px;
line-height:1px;
clear:both;
}
span.corners-file4 {
background-image:url('{T_THEME_PATH}/images/corners/corners_right.png');
background-position:100% 100%;
background-repeat:no-repeat;
display:block;
font-size:1px;
height:5px;
line-height:1px;
}
Maintenant que nous avons défini nos classes CSS, il ne nous reste plus qu'à les mettre en application. Pour ce faire, procédons comme suit:
Ouvrez le fichier « styles/{VOTRE_THEME}/template/attachment.html ».
Cherchez:
Code : Tout sélectionner
<!-- IF _file.S_FILE -->
<dl class="file">
<dt><!-- IF _file.UPLOAD_ICON -->{_file.UPLOAD_ICON}<!-- ENDIF --> <a class="postlink" href="{_file.U_DOWNLOAD_LINK}">{_file.DOWNLOAD_NAME}</a></dt>
<!-- IF _file.COMMENT --><dd><em>{_file.COMMENT}</em></dd><!-- ENDIF -->
<dd>({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>
</dl>
<!-- ENDIF -->
Code : Tout sélectionner
<!-- IF _file.S_FILE -->
<div class="file-color" onclick="window.location.href='{_file.U_DOWNLOAD_LINK}';" style="cursor: pointer;">
<span class="corners-file"><span class="corners-file2"></span></span>
<dl class="file-attachment">
<dt><!-- IF _file.UPLOAD_ICON --><div style="float: left; padding-top: 2px; padding-right: 10px;">{_file.UPLOAD_ICON}</div><!-- ENDIF --> <div style="padding-top: 5px;">{_file.DOWNLOAD_NAME}</div></dt>
<!-- IF _file.COMMENT --><dd><em>{_file.COMMENT}</em></dd><!-- ENDIF -->
<dd>({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>
</dl>
<span class="corners-file3"><span class="corners-file4"></span></span>
</div>
<!-- ENDIF -->
N'oubliez pas de rafraîchir le template et le thème (onglet Styles) et de vider le cache (onglet Général) afin que vos modifications soient prises en compte.
» Résultat
Si vous avez respecté à la lettre cette documentation, vous aurez le résultat suivant:
Vous pouvez définir vous-même la couleur du bandeau de téléchargement et l'effet de survol.