[phpBB 3.0.x] Créer une bulle de message

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

[phpBB 3.0.x] Créer une bulle de message

Message par Dakin Quelia »

» Créer une bulle de message

A l'aide de cette documentation, vous allez pouvoir donner un certain look à vos messages. Style bande dessinée.

Avant de suivre la documentation, je vous recommande de faire une sauvegarde de vos fichiers.

Sommaire:
bulles.zip
(10.18 Kio) Téléchargé 298 fois

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

Modifications CSS

Message par Dakin Quelia »

» Modifications CSS

Ouvrez le fichier « styles/{VOTRE_THEME}/theme/content.css ».

Cherchez:

Code : Tout sélectionner

.postbody {
	padding: 0;
	line-height: 1.48em;
	color: #333333;
	width: 76%;
	float: left;
	clear: both;
}
Remplacez par:

Code : Tout sélectionner

.postbody {
    padding: 0;
    line-height: 1.48em;
    color: #333333;
    width: 78%;
    float: right;
    clear: both;
}
Cherchez:

Code : Tout sélectionner

.postprofile {
	/* Also see tweaks.css */
	margin: 5px 0 10px 0;
	min-height: 80px;
	color: #666666;
	border-left: 1px solid #FFFFFF;
	width: 22%;
	float: right;
	display: inline;
}
Remplacez par:

Code : Tout sélectionner

.postprofile {
    /* Also see tweaks.css */
    margin: 5px 0 10px 0;
	margin-left: -5px !important;
    min-height: 80px;
    color: #666666;
    width: 18%;
    float: left;
    display: inline;
}
A la fin du fichier, ajoutez:

Code : Tout sélectionner

/* New style of postbody */
.bubble-global {
	width: 100%;
}

.bubble-middle div.content {
	padding: 15px 15px 15px 0;
}

.bubble-content {
	padding-top: 15px;
}

.bubble-top {
	height: 34px; 
	background: url("{T_THEME_PATH}/images/bubble/bubble-top.png") no-repeat; 
	margin: 4px -12px 0 0; 
	padding: 10px 30px 0 25px;
	z-index: 70;
}

.bubble-middle {
	height: auto; 
	background: url("{T_THEME_PATH}/images/bubble/bubble-middle.png") repeat-y; 
	margin: -10px -12px 0 15px;
	padding: 10px; 
	color: #001b28; 
	z-index: 50;
}

.bubble-bottom {
	height: 5px; 
	background: url("{T_THEME_PATH}/images/bubble/bubble-bottom.png") no-repeat; 
	margin-left: 15px; 
	margin-right: -12px; 
	margin-bottom: 4px;
}

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

Modifications templates

Message par Dakin Quelia »

» Modifications des templates

Ouvrez le fichier le fichier template « styles/{VOTRE_THEME}/template/viewtopic_body.html ».

Cherchez:

Code : Tout sélectionner

					<!-- IF postrow.S_IGNORE_POST -->
						<div class="ignore">{postrow.L_IGNORE_POST}</div>
					<!-- ELSE -->
Avant, ajoutez:

Code : Tout sélectionner

			<div class="bubble-global">
				<div class="bubble-top">
Cherchez:

Code : Tout sélectionner

					<!-- IF postrow.S_POST_UNAPPROVED or postrow.S_POST_REPORTED -->
						<p class="rules">
							<!-- IF postrow.S_POST_UNAPPROVED -->{UNAPPROVED_IMG} <a href="{postrow.U_MCP_APPROVE}"><strong>{L_POST_UNAPPROVED}</strong></a><br /><!-- ENDIF -->
							<!-- IF postrow.S_POST_REPORTED -->{REPORTED_IMG} <a href="{postrow.U_MCP_REPORT}"><strong>{L_POST_REPORTED}</strong></a><!-- ENDIF -->
						</p>
					<!-- ENDIF -->
Après, ajoutez:

Code : Tout sélectionner

				</div>
				<div class="bubble-middle">
Cherchez:

Code : Tout sélectionner

					<div class="content">{postrow.MESSAGE}</div>
Remplacez par:

Code : Tout sélectionner

					<div class="content bubble-content">{postrow.MESSAGE}</div>
Cherchez:

Code : Tout sélectionner

						<!-- IF postrow.SIGNATURE --><div id="sig{postrow.POST_ID}" class="signature">{postrow.SIGNATURE}</div><!-- ENDIF -->
					<!-- ENDIF -->
Après ajoutez:

Code : Tout sélectionner

				</div>
				<div class="bubble-bottom"></div>
			</div>

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

Rafraîchissement et résultat

Message par Dakin Quelia »

» Rafraîchissement et résultat

Une fois que toutes les modifications précédentes furent faites, n'oubliez pas de rafraîchir le template, le thème (onglet Styles) et de vider le cache (onglet Général).

Résultat visible:

Image

Verrouillé

Qui est en ligne

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