Voir les messages sans réponses | Voir les sujets actifs Nous sommes le Dim 5 Fév 2012 00:50


Poster un nouveau sujet Répondre au sujet  [ 1 message ] 
 Centrer le pseudo au dessus de l'avatar 

Informations
sur l'article

Codage - Forums gratuits
Niveau Moyen
Accès Visiteurs

Auteur

Avatar de l’utilisateur
Gestion
Message  Centrer le pseudo au dessus de l'avatar

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.

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

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

    <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:
    <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 <br /> 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:
    <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:
    <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:
    <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 <b> au lieu de <strong>, 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:
    <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:
    <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 ^^

_________________
Image
Source avatar & signature : illustrations par Diana da Costa


Lun 2 Mai 2011 03:17 Profil Site Internet

Les tutoriels de l'Enae Volare appartiennent à leurs auteurs respectifs et - sauf mention contraire - ne doivent en aucun cas être diffusés, redistribués ou repris de quelque façon que ce soit en dehors de l'Enae, que ce soit en partie ou en totalité.


Merci de créditer l'Enae si ce tutoriel vous a été utile, cela nous aidera à être connus et c'est un juste paiement en retour de nos services ;)

Vous avez un problème avec ce tutoriel, vous voudriez l'adapter à votre cas particulier mais ne savez pas comment vous y prendre ? Créez un nouveau sujet dans le forum Support Tutos !


Vous avez quelque chose à ajouter à ce tutoriel ? Ouvrez un sujet dans les Mises à Jour de Tutos, le staff se chargera de mettre le tutoriel à jour si votre proposition paraît pertinente ;)

Afficher les messages postés depuis:  Trier par  
Poster un nouveau sujet Répondre au sujet   [ 1 message ] 

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité


Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers

Rechercher:
Aller à:  

 
- Design et codage par Koori et 'Christa pour l'Enae Volare exclusivement.
- Forum originellement fondé par Paro - Voir les crédits -
- Propulsé par phpBB © phpBB group - Traduction par phpBB-fr.com
- Optimisation du référencement par phpBB SEO