[phpBB 3.0.x] Améliorer l'apparence des fichiers joints

[Dakin Quelia]

» 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/ »

corners.zip

(758 Octets) Téléchargé 442 fois

» 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;
}

» 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:

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

Remplacez par:

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

» 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.