Dernière news le 19/04/2012

PHPBoost

Support

Téléchargements

Développement

Communauté

Annonces
Question aléatoire

Comment se passe l'intégration d'un module ?
Livre d'or

Par aircrack

Super CMS, super staff une équipe génial!
Plein de possibilité d'avenir et on attend tous la 4.0

Livre d'or

Mini sondage
Etes-vous satisfait du support PHPBoost ?










Résultats

 
Forum : Barre de lien verticale
 



Cet article va vous permettre de transformer :


En ceci :


En gros :
- Tous les liens du bas (MP, mail, MSN, Yahoo et modération) sont déplacés sur une colonne à droite du post.
- La signature apparaît maintenant dans le cadre du post, et non plus en dessous.

Tout ceci dans un soucis d' esthétique, de linéarité et gain d' espace (moins d' espace entre les posts).

Commençons :

Ouvrez votre fichier "forum/templates/forum_topic.tpl"et allez à la ligne 271.
Remplacez toute cette partie :
Code TPL :
<div class="msg_contents{msg.CLASS_COLOR}">
						<div class="msg_contents_overflow">
							# IF msg.L_FORUM_QUOTE_LAST_MSG # <span class="text_strong">{msg.L_FORUM_QUOTE_LAST_MSG}</span><br /><br /> # ENDIF #
 
							{msg.FORUM_MSG_CONTENTS}
 
							# IF msg.C_FORUM_USER_EDITOR # 
							<br /><br /><br /><br /><span style="padding: 10px;font-size:10px;font-style:italic;">
							{L_EDIT_BY}
								# IF msg.C_FORUM_USER_EDITOR_LOGIN # 
							<a class="small_link" href="../member/member{msg.U_FORUM_USER_EDITOR_LOGIN}">{msg.FORUM_USER_EDITOR_LOGIN}</a>
								# ELSE #
							<em>{L_GUEST}</em>
								# ENDIF #
							{L_ON} {msg.FORUM_USER_EDITOR_DATE}</span>
							# ENDIF #
						</div>
					</div>
				</div>
			</div>	
			<div class="msg_sign{msg.CLASS_COLOR}">				
				<div class="msg_sign_overflow">
					{msg.USER_SIGN}
				</div>			
				<hr />
				<span style="float:left;">
					{msg.USER_PM} {msg.USER_MAIL} {msg.USER_MSN} {msg.USER_YAHOO} {msg.USER_WEB}
				</span>
				<span style="float:right;font-size:10px;">
					 
					# IF msg.C_FORUM_MODERATOR # 
					{msg.USER_WARNING}%
					<a href="moderation_forum{msg.U_FORUM_WARNING}" title="{L_WARNING_MANAGEMENT}"><img src="../templates/{THEME}/images/admin/important.png" alt="{L_WARNING_MANAGEMENT}" class="valign_middle" /></a>
					<a href="moderation_forum{msg.U_FORUM_PUNISHEMENT}" title="{L_PUNISHEMENT_MANAGEMENT}"><img src="../templates/{THEME}/images/readonly.png" alt="{L_PUNISHEMENT_MANAGEMENT}" class="valign_middle" /></a>
					# ENDIF #
				</span> 
			</div>	
		</div>
		# END msg #


par :
Code TPL :
<div class="msg_menu">
					{msg.USER_PM} {msg.USER_MAIL} {msg.USER_MSN} {msg.USER_YAHOO} {msg.USER_WEB}
					</br></br>
					# IF msg.C_FORUM_MODERATOR # 
					{msg.USER_WARNING}%
					<a href="moderation_forum{msg.U_FORUM_WARNING}" title="{L_WARNING_MANAGEMENT}"><img src="../templates/{THEME}/images/admin/important.png" alt="{L_WARNING_MANAGEMENT}" class="valign_middle" /></a>
					<a href="moderation_forum{msg.U_FORUM_PUNISHEMENT}" title="{L_PUNISHEMENT_MANAGEMENT}"><img src="../templates/{THEME}/images/readonly.png" alt="{L_PUNISHEMENT_MANAGEMENT}" class="valign_middle" /></a>
					# ENDIF #
					</div>
					<div class="msg_contents{msg.CLASS_COLOR}">
						<div class="msg_contents_overflow">
							# IF msg.L_FORUM_QUOTE_LAST_MSG # <span class="text_strong">{msg.L_FORUM_QUOTE_LAST_MSG}</span><br /><br /> # ENDIF #
 
							{msg.FORUM_MSG_CONTENTS}
 
							# IF msg.C_FORUM_USER_EDITOR # 
							<br /><br /><br /><br /><span style="padding: 10px;font-size:10px;font-style:italic;">
							{L_EDIT_BY}
								# IF msg.C_FORUM_USER_EDITOR_LOGIN # 
							<a class="small_link" href="../member/member{msg.U_FORUM_USER_EDITOR_LOGIN}">{msg.FORUM_USER_EDITOR_LOGIN}</a>
								# ELSE #
							<em>{L_GUEST}</em>
								# ENDIF #
							{L_ON} {msg.FORUM_USER_EDITOR_DATE}</span>
							# ENDIF #
						</div>
						<div class="msg_sign_overflow">
							{msg.USER_SIGN}
						</div>	
					</div>
				</div>
			</div>		
		</div>	
		</br>
		# END msg #


Je vous explique les grosses lignes :
Code TPL :
					<div class="msg_menu">
					{msg.USER_PM} {msg.USER_MAIL} {msg.USER_MSN} {msg.USER_YAHOO} {msg.USER_WEB}
					</br></br>
					# IF msg.C_FORUM_MODERATOR # 
					{msg.USER_WARNING}%
					<a href="moderation_forum{msg.U_FORUM_WARNING}" title="{L_WARNING_MANAGEMENT}"><img src="../templates/{THEME}/images/admin/important.png" alt="{L_WARNING_MANAGEMENT}" class="valign_middle" /></a>
					<a href="moderation_forum{msg.U_FORUM_PUNISHEMENT}" title="{L_PUNISHEMENT_MANAGEMENT}"><img src="../templates/{THEME}/images/readonly.png" alt="{L_PUNISHEMENT_MANAGEMENT}" class="valign_middle" /></a>
					# ENDIF #
					</div>


Ici on place directement à l' aide d' un <div> avec une class nommée "msg_menu" les images concernés et les liens (MP Mail, avertissements tout ça) avant même d' avoir inséré le contenu du message. On le mettra en forme plus tard avec un CSS.

Ensuite, le reste reprend à peu près le tpl d' origine excepté :
Code TPL :
						<div class="msg_sign_overflow">
							{msg.USER_SIGN}
						</div>


On place directement la signature du membre sans avoir fermé le div du message. Ainsi la signature apparaît dans le cadre et pas en dessous.

Et enfin à l' avant dernière ligne, on va placer (ce n' est pas obligatoire, vous pouvez le supprimer) un </br> afin d' avoir un espace entre 2 posts.

Fini ?

Mouahahaha!! Non.

Nous allons maintenant créer la classe 'msg_menu' afin de mettre en forme notre petite barre verticale.

Ouvrez le fichier 'content.css' de votre thème et insérez ceci n' importe où (mais après .msg_contents_overflow ça fait plus propre ^^) :
Code CSS :
.msg_menu {
width:22px;
float:right;
background: url(images/menu.png) repeat-y;
text-align: center;
font-size:10px;
margin: 10px 0 0 0;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
}


Je vous explique :
'width' : largeur de votre barre verticale. Adaptez selon vos besoins
'float:right' : permet de coller notre barre à la droite du message
'background: url(images/menu.png) repeat-y' : Plusieurs options s' offrent à vous :
-Mettre une image (perso la mienne fait 22px et environ 100px de hauteur)
-Mettre une couleur de fond (dans ce cas mettez 'background: #FFFFFF;' en remplçant FFFFFF par le code de votre couleur
-Ne rien mettre : dans ce cas supprimez la ligne entière
'repeat-y' permet quand à lui de répéter l' image en hauteur.
'margin' : pour décaler votre barre (10px 0 0 0 pour 10px en haut)
les 'moz-border' donnent un effet arrondis aux coins de votre image sous Firefox


Ce n' est toujours pas fini !
Trouvez la ligne de '.msg_contents_overflow' (la ligne dépend des thèmes).
Dans cette classe, modifiez :
Code CSS :
width:100%;

par :
Code CSS :
width:95%;


afin que le texte de votre message ne passe pas sous la fameuse barre.

Envoyez vos fichiers sur votre serveur, rafraichissez le cache et voilà !

 
Cette page a été vue 2282 fois
Annonces