Sweet Purple
Admin
Messages : 131
Date d'inscription : 12/07/2010
Age : 29
 | Sujet: Viewtopic_Body  Sam 24 Mar - 10:05 | |
| Se qu'il faut mettre pour que le nom de la feuille de style n'apparaissent pas dans le profil
- Code:
-
<span id="rpgone">{postrow.displayed.POSTER_RPG}</span>
<script type="text/javascript">jQuery('#rpgone').html(jQuery('#rpgone').html().replace('Feuille de personnage','')).removeAttr('id')</script> enlever replace('feuille personnage par le nom de la fiche')
| |
|
Sweet Purple
Admin
Messages : 131
Date d'inscription : 12/07/2010
Age : 29
| | Sujet: Re: Viewtopic_Body Sam 24 Mar - 10:08 | |
| Centrer le pseudo au dessus de l'avatar
Requis : accès/modification templates | Comme le titre l'indique, ce tutoriel rapide explique comment centrer le pseudo qui s'affiche au dessus de l'avatar d'un membre, et plus si affinités. Tuto pour Forumactif et Xooit. Attention, il vous faut un compte fondateur pour mettre en pratique ce tutoriel.
Code HTML, Forumactif, Templates, Xooit
Introduction
Ce tutoriel comporte deux parties, elles mêmes divisées en deux parties. La première partie traite du centrage du pseudo voire d'autres éléments du profil sur Forumactif, la seconde fait de même pour Xooit. En cas de problèmes lors de la mise en pratique de ce tutoriel, n'hésitez pas à demander des précisions !
Sur forumactif
Rappelez vous que ces modifications ne marchent (actuellement, du moins) que sur un forumactif en version phpbb2. Les tests ont été fait sur un thème de base, si vos templates ont été modifiés entre temps, il vous faudra repérer les changements potentiellement faits pour vous adapter en conséquence.
Centrer le pseudo seulement
Connectez vous à votre compte fondateur puis allez sur le panneau d'administration de votre forum, sous l'onglet Affichage, dans le menu Templates, cliquez sur Général puis ouvrez le template viewtopic_body.
Cherchez ensuite le bout de code suivant :
Code ▼ Sélectionner le code
- Code:
-
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br />
En réalité, dans le cadre de ce tutoriel, ce qui nous intéresse est plutôt la première ligne, c'est à dire :
- Code:
-
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
Remplacez les deux span par des div, et ajoutez un align="center" comme attribut du bloc. Autrement dit, le code doit devenir :
- Code:
-
<div class="name" align="center"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div>
Et le bout de code complet précédemment cité doit devenir :
Code ▼ Sélectionner le code
- Code:
-
<div class="name" align="center"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div>
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br /> Vous aurez constaté qu'un
a disparu dans l'affaire, ce qui est normal, puisque les span (éléments inline, inclus dans le corps du texte) sont devenus des div (blocs de contenu dans le corps du texte, avec un saut de ligne avant et après)
Centrer le pseudo, le rang et l'avatar
Reprennons ce bout de code de base dans viewtopic_body précédemment cité :
Code ▼ Sélectionner le code
- Code:
-
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br />
Cette fois ci, vous souhaitez centrer non seulement le pseudo, mais aussi l'avatar et le rang, histoire d'équilibrer tout ça.
Vous pourriez tout centrer d'un coup en encadrant tout ce code entre des balises < div align="center" > et < /div >, mais ceci centrerait aussi les indications du profil (âge, nombre de messages, date d'inscription, etc...) et ce n'est jamais très esthétique. La méthode la plus simple consistera simplement à remplacer votre bout de code par ceci :
Code ▼ Sélectionner le code
- Code:
-
<div class="name" align="center"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div> <div class="postdetails poster-profile"> <div align="center">{postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /></div> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </div> Comme vous pouvez le voir, le nom est centré de la même façon qu'avant, mais en plus, un autre spanest devenu un divet cette fois le align="center" a été placé dans un div supplémentaire.
Sur Xooit
Les tests concernant Xooit ont été faits avec le thème par défaut. A noter que les thèmes fournis par Xooit ont, contrairement à ceux de forumactif, des templates qui peuvent radicalement différer les uns des autres. Par conséquent, il vous faudra parfois tâtonner pour trouver le bon réglage.
Centrer le pseudo seulement
De même que pour forumactif, c'est le template viewtopic_body.tpl qu'il vous faudra modifier, plus précisément cette partie du code :
Code ▼ Sélectionner le code
- Code:
-
<span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span><br /><span class="postdetails">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><br />{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</span><br /> Vous noterez qu'elle n'est pas tellement différente de celle mentionnée plus haut (on notera que Xooit utilise encore de vieilles balises HTML actuellement dépassées, comme au lieu de , mais bon...), par conséquent je pense que vous n'aurez qu'à vous référer à l'explication précédente pour plus de détails.
Remplacez cette partie du code par ceci
Code ▼ Sélectionner le code
- Code:
-
<div class="name" align="center"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></div><span class="postdetails">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><br />{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</span><br />
Center l'avatar, le pseudo et le rang
Le raisonnement est le même que pour forumactif, et je suis paresseuse, aussi voici la version du code à utiliser pour obtenir le résultat souhaité !
Code ▼ Sélectionner le code
- Code:
-
<div class="name" align="center"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></div><div class="postdetails"><div align="center">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><br /></div>{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</div>
Et voilà ! Testé et confirmé par moi même, donc tout devrait marcher tant que vous restez dans les clous.
Et ce tutoriel s'achève ici, en espérant vous avoir fourni de quoi obtenir le rendu esthétique de vos rêves ^^ | |
|
