Affichage du profil du "joueur" sur un post

[Honoka Shizuka]

Bonjour, voici comment j'aimerais que s'affiche le profil du joueur positionner a gauche de son post :


J'aimerais aussi avoir un code pour pouvoir changer les couleurs...

Pouvez-vous m'aidez ?

Cordialement,

[Olivier-Design]

Bonjour,

Pour la couleur du pseudo, ajoutez ceci à votre css

Code:

.name{
color: #"code hexadécimal de la couleur";}

Où vous remplacerez "code hexadécimal de la couleur" par un ensemble de 6 caractères (FFFFFF pour blanc, 000000 pour noir etc). Un code hexadécimal requiert toujours un # devant. Faites aussi attention à ne pas oublier le ; après le code de la couleur afin de terminer la présentation de l'attribut color.



Pour la couleur du rang, aller dans Panneau d'administration > Utilisateurs et groupes > Administration des rangs

Pour chaque rang dont vous souhaitez changer la couleur,

Titre du rang :

Code:

<color="#code hexadécimal de la couleur voulue">Titre du rang</color>

Où vous remplacerez "code hexadécimal de la couleur voulue" par le même procédé que plus haut et "Titre du rang" par le rang que vous souhaitez avoir.


Pour les informations du profil (nombre de message etc), ajoutez ceci à votre css

Code:

.postdetails poster-profile{
color: #"code hexadécimal de la couleur"; }

Où vous remplacerez "code hexadécimal de la couleur" comme plus haut.

[Honoka Shizuka]

Bonsoir, et pour le tour de mon avaar qui encadre le pseudo,le rang et l'avatar, quel code je dois mettre ??

Corrdialemnt,

[Olivier-Design]

Bonjour


Dans le template viewtopic_body, repérez ceci :

Code:

<tr class="post">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <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 />
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Remplacez par ceci

Code:

<tr class="post">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"><BR>
            <TABLE border="1" border-style="solid" border-color="#000000" cellspacing="0" cellpadding="5" bgcolor="#FFFFFF">
                                  <TR>
                                    <TD>
                                      {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                                      <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 />
                                      </TD>
                                          </TR>
                                      </TABLE><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 />
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Reprenons donc

Code:

<TABLE border="1" border-style="solid" border-color="#000000" cellspacing="0" cellpadding="5" bgcolor="#FFFFFF">
                                  <TR>
                                    <TD>
                                      {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                                      <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 />
                                      </TD>
                                          </TR>
                                      </TABLE><BR>

Vous pouvez modifier des valeurs dans ce code. Ces valeurs se trouvent dans la balise <table>.

border="1" = la taille de la bordure en px (à 0 la bordure est invisible)

border-style="solid" = le style de la bordure (vous pouvez voir les attributs possibles en consultant ce lien (Ces attributs sont valables pour le html aussi il vous suffit de remplacer "solid" par "nom de l'attribut que vous voulez".

border-color="#000000" = la couleur de la bordure (#000000 c'est noir)

cellspacing="0" = l'espacement entre les cellules (à 0 c'est mieux selon moi)

cellpadding="5" = les marges dans la cellule du tableau

bgcolor="#FFFFFF" = la couleur du background du tableau (si vous ne voulez pas que le background du tableau soit d'une couleur différente que le fond de votre forum, supprimez cet attribut complètement)

[Honoka Shizuka]

Bonjour,

Comment faire pour que les bord soit arrondit ?

[Olivier-Design]

Voici ce que vous avez afin de déclarer le tableau.

Code:

<TABLE border="1" border-style="solid" border-color="#000000" cellspacing="0" cellpadding="5" bgcolor="#FFFFFF">
                                  <TR>
                                    <TD>
                                      {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                                      <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 />
                                      </TD>
                                          </TR>
                                      </TABLE><BR>

Ajoutez ceci dans la balise <TABLE>

Code:

class="table-avatar"

Ce qui vous donnera

Code:

<TABLE border="1" border-style="solid" border-color="#000000" cellspacing="0" cellpadding="5" bgcolor="#FFFFFF" class="table-avatar">

Maintenant, on change d'endroit. Aller dans Panneau d'administration > Affichage > Couleurs > Feuille de style CSS

Ajouter ce code à votre CSS

Code:

.table-avatar{
border-radius: XXpx;
-moz-border-radius: XXpx;
-webkit-border-radius: XXpx;}

Remplacez les "XX" par le chiffre de votre choix. Ce chiffre indiquera la courbe de l'arrondi. À vous de faire des tests selon ce que vous souhaitez.

À noter par contre, ce code ne fonctionne pas sous Internet Explorer car ce dernier ne supporte pas les arrondis. Également, le contenu de votre tableau ne s'arrondira pas lui, donc il est possible que les avatars de vos membres dépassent du tableau légèrement.