Encadrer l'Avatar et le profil dans les messages

Rappel du premier message :

Bonjour !

Là aussi ayant eu de nombreuses demandes (y compris assez "vives" sur le FdF...), je vous donne l'astuce pour afficher un cadre autour de l'avatar profil dans les messages.



Le tout se déroule en deux étapes : la première consiste à poser des divisions dans le templates correspondant à l'affichage des messages (="div"). Ces divisions comporteront un "class" (classe css) qui nous permettront ensuite d'y appliquer une mise en forme par le biais du CSS (second temps) et en particulier un fond, puisque c'est ce qui nous intéresse.


1) Installation TEMPLATES :

Allez dans "Affichage" > Templates > Général, puis sélectionnez le Template "viewtopic_body".

Repérez la partie :

Code:

<!-- BEGIN displayed -->
   <tr class="post">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" max-width="170">


Et mettez votre première division, correspondant au fond du pseudo et donc à votre "tête" de cadre :

Code:

<div class="profil_head">

Refermez cette division juste après :

Code:

<a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong>

Ajoutez donc la fermeture de division :

Code:

</div>

Information : ajoutez au besoin le code correspondant au retour à la ligne pour espacer le pseudo de l'affichage du rang en dessous (selon l'image de fond que vous mettrez).

On va ajouter une autre division qui entourera le pseudo des membres, afin de pouvoir le placer où on veut dans votre division de tête (selon le type d'image de fond).

Ajoutez donc :

Code:

<div class="profil_name">

Juste avant :

Code:

<a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong>

Voici la fin des divisions :

Code:

<div class="profil_body"><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>
</div>
<div class="profil_foot"></div>


Vous observez donc la division "profil_body" qui correspond à l'ensemble "avatar / profil", et qui contiendra un fond qui se répètera verticalement.
Juste après se trouve la division "profil_foot" qui "ferme" votre cadre, c'est votre "pieds".


2) Mise en Forme CSS

Allez ensuite dans la Feuille CSS (Affichage > Images & Couleurs > Couleurs > Feuille CSS) afin que l'on mette en forme tout cela.

Voici un exemple de CSS :

Code:

.profil_head
{
background-image: url(adresse de votre image de fond);
background-repeat: no-repeat;
width: largeur de votre image;
height: hauteur de votre image;
}

.profil_name
{
padding-top: distance du pseudo au bord supérieur;
}

.profil_body
{
background-image: url(adresse de votre image de fond);
background-repeat: repeat-y;
width: largeur de votre image;
}

.profil_foot
{
background-image: url(adresse de votre image de fond);
background-repeat: no-repeat;
width: largeur de votre image;
height: hauteur de votre image;
}


A vous de jouer pour mettre tout ça en forme ! Et merci de RESPECTER le travail que j'ai dû fournir pour vous permettre de faire cela !


Supplément :
Pour ajouter un overflow sur le profil (autrement dit qu'il soit déroulant s'il devient trop long), il suffit d'ajouter dans le CSS (dans la division du corps du profil) :

Code:

.profil_body
{
background-image: url(adresse de votre image de fond);
background-repeat: repeat-y;
width: largeur de votre image;
max-height: hauteur max du profil;
overflow: auto;
}

Ce tuto ainsi que la méthode vient de moi et moi seul, merci donc de ne pas diffuser ce tuto en le copiant. Vous pouvez par contre librement en indiquer le lien direct.

Un tuto très pratique ! Merci !

Merci pour se tutoriel

Merci

Thanks !

Je remercie l'auteur de ce tuto par avance !

merci ^^

Merci beaucoup de partager cela avec nous!

tanks

Merci

Merci du partage

sympastoch

Merci :)

Merci

Merci :) !

Merci ;D

Hey ! Good tuto!

Merci

merci beaucoup ♥

Merci

merci :)

Merci beaucouuup !

Merci :)