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

Toutes les documentations phpBB seront ici.
Verrouillé
Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 563
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

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

Message par 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é 303 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:
Image

Vous pouvez définir vous-même la couleur du bandeau de téléchargement et l'effet de survol.

Verrouillé

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 3 invités