Affichage des rangs/groupes dans la liste des membres

[Elicanto]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Je m'adresse à vous car je n'ai trouvé de solution ou d'explication nulle part sur le problème que je rencontre (ou du moins j'espère ne pas être passé à côté, auquel cas je m'excuse).

Je souhaiterais être en mesure de personnaliser l'affichage d'un membre dans la liste des membres en fonction du groupe auquel il appartient ou du rang qu'on lui a attribué, au niveau des couleurs (fond, etc) ou divers égléments. J'ai déjà un js qui me permet de modifier les posts des utilisateurs et les profils, grâce au rang, et je voulais savoir s'il était possible d'en faire de même avec la liste des membres.

Ma question est donc : est-il possible d'afficher le rang ou le groupe d'un membre dans la liste des membres ?

Mon forum test étant sous awesome bb, j'ai vu que dans memberlist_body se trouve ceci :

Code:

<!-- BEGIN switch_td_group -->
            <td>{memberrow.GROUPS}</td>
            <!-- END switch_td_group -->

Mais je ne comprend pas à quoi cela sert, vu que peu importe ce que je tente, en aucun cas les groupes ne s'affichent. Est-ce que quelqu'un pourrait éclairer ma lanterne à ce-sujet-là, s'il vous plait ?

Merci d'avance de bien vouloir vous pencher sur cette interrogation !

[Elicanto]

Up

[Elicanto]

up

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Elicanto]

Bonsoir, merci du rappel !

Ma question est bien toujours d'actualité !

[Invité]

Hello Elicanto,

voir avant toute intervention, de quelle façon as tu activé le profil dans ton P.A?

Utilisateurs et groupes/Profil/Options générales/Options générales du profil



Si le profil avancé est activé:

Prendre ce script:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
var list=$('form[action="/memberlist"]').length;
if(list)
{
$('td.avatar-mini').find('a[href^="/u"]').each(function(){
var link=$(this).attr('href');
var $this=$(this).closest('tr').find('td.M14_rang');
$.get(link , function(data){
var h= $(data).find('.cp-sidebar .mod-login-rank span').text();
if(h)
{
$this.html(h);
}
});});

}
});

Dans le cas d'un profil simple il faudra prendre ce script:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
var list=$('form[action="/memberlist"]').length;
if(list)
{
$('td.avatar-mini').find('a[href^="/u"]').each(function(){
var link=$(this).attr('href');
var $this=$(this).closest('tr').find('td.M14_rang');
$.get(link , function(data){
var h= $(data).find('#profile-view .profile-rank span').text();
if(h)
{
$this.html(h);
}
});});

}
});

Ensuite on va placer les balises et ajouter un texte par défaut au rang "Aucun" :
Dans le template memberlist_body
Affichage/Templates/Général/memberlist_body


Recherches ceci:

Code:

<th class="interests">{L_INTERESTS}</th>

Juste avant déposes ceci:

Code:

<th> Rang</th>

Ce qui correspond à ceci en visu:




Puis plus bas recherches ceci:

Code:

<td class="mobile-hidden">{memberrow.INTERESTS}</td>

Juste avant déposes ceci:

Code:

<td class="mobile-hidden M14_rang">Aucun</td>

Remplaces si besoin le texte "Aucun" par ce que tu souhaites.

Penses a enregistrer puis à valider en cliquant respectivement sur   puis



Si tu as peur de faire des bêtises, le template dans sa totalité:

Code:

<div class="page-header">
    <h1>{PAGE_TITLE}</h1>
</div>

<form action="{S_MODE_ACTION}" method="get">
    <label>
        <span>{L_ORDER_OR_SELECT}</span>
        <input type="text" class="inputbox" name="username" maxlength="25" size="20" placeholder="{L_USER_SELECT}" value="{L_USER_SELECT_VALUE}" />
    </label>

    <div class="quick-options quick-options-left">
        <div class="option">
            <div class="option-title">{L_SELECT_SORT_METHOD}</div>
            {S_MODE_SELECT}
        </div>

        <div class="option">
            <div class="option-title">{L_ORDER}</div>
            {S_ORDER_SELECT}
        </div>

        {S_HIDDEN_SID}
        <input class="btn btn-default" type="submit" name="submit" value="{L_SUBMIT}" />
    </div>
</form>

<div class="forumbg-table">
    <table class="table1" cellspacing="1" id="memberlist">
        <thead class="mobile-hidden">
        <tr>
            <th class="number">#</th>
            <th class="name">{L_AVATAR} - {L_USERNAME}</th>
            <!-- BEGIN switch_th_group -->
            <th class="group">{L_GROUPS}</th>
            <!-- END switch_th_group -->
            <th> Rang</th>
            <th class="interests">{L_INTERESTS}</th>
            <th class="joined">{L_JOINED}</th>
            <th class="active">{L_VISITED}</th>
            <th class="posts">{L_POSTS}</th>
            <th class="pm">{L_PM}</th>
            <th class="website">{L_WEBSITE}</th>
        </tr>
        </thead>
        <tbody>
        <!-- BEGIN memberrow -->
        <tr class="{memberrow.ROW_CLASS}">
            <td class="mobile-hidden">{memberrow.ROW_NUMBER}</td>
            <td class="avatar-mini">
                <a href="{memberrow.U_VIEWPROFILE}">
                    {memberrow.AVATAR_IMG} &nbsp; {memberrow.USERNAME}
                </a>
                <span class="mobile-visible memberlist-number">
                     #{memberrow.ROW_NUMBER}
                  </span>
                <span class="mobile-visible">
                     <div class="memberlist-info"><b>{L_INTERESTS}:</b> {memberrow.INTERESTS}</div>
                     <div class="memberlist-info"><b>{L_JOINED}:</b> {memberrow.JOINED}</div>
                     <div class="memberlist-info"><b>{L_VISITED}:</b> {memberrow.LASTVISIT}</div>
                     <div class="memberlist-info"><b>{L_POSTS}:</b> {memberrow.POSTS}</div>
                     <div class="memberlist-info"><b>{L_PM}:</b> {memberrow.PM_IMG}</div>
                     <div class="memberlist-info"><b>{L_WEBSITE}:</b> {memberrow.WWW_IMG}</div>
                  </span>
            </td>
            <!-- BEGIN switch_td_group -->
            <td>{memberrow.GROUPS}</td>
            <!-- END switch_td_group -->
            <td class="mobile-hidden M14_rang">Aucun</td>
            <td class="mobile-hidden">{memberrow.INTERESTS}</td>
            <td class="mobile-hidden">{memberrow.JOINED}</td>
            <td class="mobile-hidden">{memberrow.LASTVISIT}</td>
            <td class="mobile-hidden">{memberrow.POSTS}</td>
            <td class="mobile-hidden text-center">{memberrow.PM_IMG}</td>
            <td class="mobile-hidden text-center">{memberrow.WWW_IMG}</td>
        </tr>
        <!-- END memberrow -->
        <!-- BEGIN switch_no_user -->
        <tr class="row1">
            <td colspan="{switch_no_user.COLSPAN_NUMBER}">{switch_no_user.L_NO_USER}</td>
        </tr>
        <!-- END switch_no_user -->
        </tbody>
    </table>
</div>

<div class="pagination">
    <!-- BEGIN switch_pagination -->
    {PAGINATION}
    <!-- END switch_pagination -->
</div>


Puis le script

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.


Déposes dans l'éditeur le script désiré.


Penses à cliquer sur le bouton VALIDER

Et voilou.
a++

[Elicanto]

Bonjour !

Merci du temps que tu as accordé à ma demande, néanmoins j'aurais dû prévenir que j'ai complètement remanié mes deux templates, profile_view_body et memberlist_body. En effet, j'ai enlevé tout les tableaux (je préfère largement l'emploi des div) de ces templates ! J'ai également enlevé la ligne de tableau avec nom/messages/etc de la liste des membres.

De fait, j'ai uniquement ajouté à mon template :

Code:

<td class="mobile-hidden M14_rang">Aucun</td>

Mais peut-être que j'aurais dû tout mettre ?

Ne connaissant pas grand chose en js, j'ai essayé de remanier le tien (sans le profil avancé) de cette manière :

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
var list=$('form[action="/memberlist"]').length;
if(list)
{
$('.membava').find('a[href^="/u"]').each(function(){
var link=$(this).attr('href');
var $this=$(this).closest('tr').find('td.M14_rang');
$.get(link , function(data){
var h= $(data).find('#profile-view .post-rank span').text();
if(h)
{
$this.html(h);
}
});});
 
}
});

Mais cela ne change pas le "aucun", j'imagine que c'est parce que j'ai changé pas mal de choses dans les templates et parce que je ne sais pas vraiment quoi modifier dans le js. As-tu besoin desdits templates ?

Désolé du contretemps, j'espère que ça ne te rajoutera pas trop de travail. Merci encore pour ton aide !

[Invité]

Re,

le script est basé sur des templates non modifié comme toutes aides que tu peux voir sur ce forum.
Si le membre ne donne pas d'information concernant des modifications éventuelles alors on donne les bonnes informations.

Après c'est juste une perte de temps.............

As-tu besoin des dits templates ?

C'est une évidence.
Ainsi que la css associée pour un rendu cohérent .
En tout cas, tu as un très joli forum   .

a++

[Elicanto]

Bonsoir !

Toutes mes excuses, j'étais parti du principe qu'obtenir une réponse positive à cette question relevait du presque impossible (je ne m'attendais pas tellement à ce que ce soit faisable, mais je suis ravi que ce soit le cas), d'où l'absence de template dans mon premier message... à l'avenir j'y penserai, je suis sincèrement désolé pour le temps perdu !

Voilà le template memberlist_body :

Code:

<div class="member-list">
    <!-- BEGIN memberrow -->
    <div class="member">
      <div class="member-icon"><img src="https://image.flaticon.com/icons/svg/1838/1838683.svg"/></div>
      <div class="membim">
        <div class="membava">{memberrow.AVATAR_IMG}</div>
        <div class="pmimg" title="envoyer un mp">
          {memberrow.PM_IMG}
        </div>
      </div>
      <div class="member-bd">
        <div class="member-name"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>
        <div class="membf"><b>XX</b> messages</div>
        <div class="membf"><b>{memberrow.JOINED}</b> inscription</div>
        <div class="membf"><b>{memberrow.LASTVISIT}</b> dernière visite</div>
        <td class="mobile-hidden M14_rang">Aucun</td>
      </div>
    </div>
    <!-- END memberrow -->
  </div>
    <!-- BEGIN switch_no_user -->
    <tr class="row1">
      <td colspan="{switch_no_user.COLSPAN_NUMBER}">{switch_no_user.L_NO_USER}</td>
    </tr>
    <!-- END switch_no_user -->
    <div class="pagination">
      <!-- BEGIN switch_pagination -->
      {PAGINATION}
      <!-- END switch_pagination -->
    </div>
  </div>

Son css :

Code:

.ths-body {
  display: flex;
  flex-direction: column;
}
.memberlist-body {
  display: flex;
  flex-direction: column;
}
.member-search {
  font-family: Karla;
  text-transform: uppercase;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(2,11,25,0.9);
  color: #ccc;
  margin: 20px 0 0;
  padding: 20px;
}
.member-search span {
  flex:1;
  text-align:center;
}
.select, input, input.inputbox {
  max-width: 160px;
  position: relative;
  width: 100%;
  background: #FFF;
  border-radius: 35px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-family: Poppins;
  font-size: 12px;
  border:none;
  text-shadow:none;
  margin-left: 10px;
}
input.inputbox {
  padding: 0 10px;
  margin: 0;
}
.select select {
  padding-right: 22px;
  border: none;
  line-height: 100%;
  margin: 0 20px 0 10px;
  color: #555;
}
input.btn.btn-default, .btn-default, .btn-default:visited {
    background: #B37D4E;
    font-family: Karla;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    margin: 2.5px;
    flex: 1;
    line-height: 100%;
}
.liteoption {
  background: #B37D4E;
  font-family: Karla;
  text-transform: uppercase;
  font-size: 10px;
  color: #fff;
  letter-spacing: 1px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  margin: 2.5px;
  flex: 1;
  line-height: 100%;
  border:none !important;
}
.liteoption:hover, .mainoption:hover {
    -ms-filter: brightness(90%);
    -webkit-filter: brightness(90%);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14), 0 5px 3px -2px rgba(0,0,0,0.2), 0 1px 8px 0 rgba(0,0,0,0.12);
    color: #FFF;
    filter: brightness(90%);
}
.member-list {
  padding: 20px 0 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.member {
    display: flex;
    background-color: #555;
    background: rgba(2,11,25,0.8);
    overflow: hidden;
    background-image: -webkit-gradient(linear,left top,right top,from(#286DA8),to(#B37D4E));
    background-image: linear-gradient(90deg,#286DA8,#B37D4E);
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    height: 250px;
    flex: 1;
    flex-grow: 1;
    border-radius: 5px;
    max-width: calc(50% - 5px);
    min-width: calc(50% - 5px);
    border: 1px solid #000;
    justify-content: space-between;
}
.member:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2,11,25,0.8);
    position: absolute;
    content: "";
}
.member-icon {
  position:absolute;
  right: -5px;
  top: -5px;
}
.member-icon img {
  width: 80px;
  height:80px;
  filter:invert(1);
  opacity: 0.4;
}
.membim {
    background: #fff;
    max-width: 160px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    flex: 1;
}
.membava {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  overflow:hidden;
}
.membava img {
  width:100%;
  margin-right:20px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.pmimg {
  position:relative;
  border-radius:100%;
  border: 2px dotted #fff;
  background: rgba(255,255,255,0.3);
  opacity:0;
  margin-left: -20px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  line-height: 15px;
}
.membim:hover .pmimg {
  opacity: 1;
  margin-left: 0;
  margin-left:0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.membim:hover img {
  filter: blur(3px) grayscale(70%);
  transform: scale(1.1);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.pmimg span {
  color: #fff;
  font-size:20px;
  line-height:22px;
}
.member-bd {
  flex:1;
  text-align:center;
  position:relative;
}
.member-name {
  margin:40px 20px 20px;
}
.member-name a {
  font-family: Poppins;
  text-align: right;
  text-transform: lowercase;
  font-weight: 700;
  border: 2px solid #fff;
  color: #fff;
  padding: 5px 10px;
  letter-spacing: 1px;
  font-size: 16px;
}
.member-name strong {
    color: #fff;
}
.member-stats {
  font-family: Poppins;
  margin:20px;
  font-size:20px;
  font-style: italic;
  text-shadow: -1px 0 #4f5e86, 0 1px #4f5e86, 1px 0 #4f5e86, 0 -1px #4f5e86;
  color: #4f5e86;
  text-align:center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.membf {
  border-bottom: 1px solid #CCC;
  margin:10px 20px;
  padding:0 20px 10px;
  color: #CCC;
  text-align:right;
  font-family: Poppins;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.membf b {
  display:block;
  text-align:left;
  font-size: 10px;
  text-transform: uppercase;
}
.pmimg a i {
  display:none;
}
.pmimg a:before {
  content:'\ebdb';
  font-family:'honeybee';
  color: #fff;
  font-size:20px;
  line-height:22px;
}
.cate-title h2 span, .cate-title h2 i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 25px;
    padding: 20px;
    border: 2px solid #ccc;
    color: #ccc;
    transform: rotate(-45deg);
    margin-right: 20px;
}
.cate-title h2 span:before, .cate-title h2 i:before {
    transform: rotate(45deg);
}
.pmimg:empty {
    display: none;
}

Ensuite le html de profile_view_body :

Code:

<div class="ths-profil">
  <div class="profil-head">
    <div class="profil-filter"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div></div>
    <div class="profil-bann"></div>
      <div class="profil-name">{USERNAME}</div>
  </div>
  <div class="profil-body">
    <div class="profil-left">
      <div class="lefttp">
        <div class="member-lks">
          <!-- BEGIN contact_field -->
          {contact_field.CONTENT}
          <!-- END contact_field -->
        </div>
        <div class="profil-ava"><div class="p-avatar"><span id="avatar_membre">{AVATAR_IMG}</span></div></div>
      </div>
      <div class="pf-quote"><!-- BEGIN profile_field -->{profile_field.CONTENT}<!-- END profile_field --></div>
    </div>
    <div class="profil-right">
      <!-- Tab links -->
      <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'tab1')" id="defaultOpen"><b>Généralités</b></button>
        <button class="tablinks" onclick="openCity(event, 'tab2')"><b>A propos</b></button>
        <button class="tablinks" onclick="openCity(event, 'tab3')"><b>Inventaire</b></button>
      </div>
      
      <!-- Tab content -->
      <div id="tab1" class="tabcontent">
      <div class="tab-top">
        <img src="https://www.zupimages.net/up/19/16/wq32.png"/>
        <div class="pf-infos">
          <!-- BEGIN profile_field -->
          <div class="ink">
            <div class="infos-cont">{profile_field.CONTENT}<div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div></div>
            <div class="infos-label">{profile_field.LABEL}</div></div>
          <!-- END profile_field -->
          <div class="ink" style="display: flex !important;"><div class="infos-label">dernière connexion</div><div class="infos-cont"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>{LAST_VISIT_TIME}</div></div>
          <div class="ink" style="display: flex !important;"><div class="infos-label">actuellement</div><div class="infos-cont"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>{USER_ONLINE}</div></div>
        </div>
        </div>
        <div class="tab-bot">
          <div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>
          <!-- BEGIN profile_field -->
          <div class="persona">
            <div class="perso-label"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>{profile_field.LABEL}</div>
            <div class="perso-cont">{profile_field.CONTENT}</div>
          </div>
          <!-- END profile_field -->
        </div>
      </div>
      
      <div id="tab2" class="tabcontent">
        <div class="tabout">
          <!-- BEGIN profile_field -->{profile_field.CONTENT}<!-- END profile_field -->
          <div class="tab-comment" style="display: block !important;">
            <div class="tige"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div></div>
            <div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>
            <div class="tacom"><!-- BEGIN profile_field -->{profile_field.CONTENT}<!-- END profile_field --></div>
          </div>
        </div>
        <div class="encart">
          <div class="encead"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>Les petits +</div>
          <div class="encb"><!-- BEGIN profile_field -->{profile_field.CONTENT}<!-- END profile_field --></div>
        </div>
        <div class="profil-xp">
          <div class="about-ttl"><span>Expérience</span></div>
          <!-- BEGIN switch_rpg -->
          <!-- BEGIN rpg_fields -->
          {switch_rpg.rpg_fields.F_VALUE_NEW}
          <!-- END rpg_fields -->
          <div class="profil-admin-rpg"><table>{U_ADMIN_RPG}</table></div>
          <!-- END switch_rpg -->
        </div>
      </div>
      <div id="tab3" class="tabcontent">
        <div id="profil-inventaire">
          <img src="https://i.imgur.com/XsaWb0U.png" title="desc" class="pas_obtenue badge_0"/>
          <img src="https://i.imgur.com/sctLvkm.png" title="desc" class="pas_obtenue badge_1"/>
          <img src="https://i.imgur.com/7pi57Ok.png" title="desc" class="pas_obtenue badge_2"/>
          <img src="https://i.imgur.com/Hit9Sqh.png" title="desc" class="pas_obtenue badge_3"/>
          <img src="https://i.imgur.com/kVsKor4.png" title="desc" class="pas_obtenue badge_4"/>
          <img src="https://i.imgur.com/Y1UpeUC.png" title="desc" class="pas_obtenue badge_5"/>
          <img src="https://i.imgur.com/uXIgChL.png" title="desc" class="pas_obtenue badge_6"/>
          <img src="https://i.imgur.com/htqwZQK.png" title="desc" class="pas_obtenue badge_7"/>
          <img src="https://i.imgur.com/OsJWOUW.png" title="desc" class="pas_obtenue badge_8"/>
          <img src="https://i.imgur.com/BuRyHPD.png" title="desc" class="pas_obtenue badge_9"/>
          <img src="https://i.imgur.com/qUOnFHw.png" title="desc" class="pas_obtenue badge_10"/>
          <img src="https://i.imgur.com/JB8QlrC.png" title="desc" class="pas_obtenue badge_11"/>
          <img src="https://i.imgur.com/Z7ED6fX.png" title="desc" class="pas_obtenue badge_12"/>
          <img src="https://i.imgur.com/j1fvlWk.png" title="desc" class="pas_obtenue badge_13"/>
          <img src="https://i.imgur.com/GAS4LsH.png" title="desc" class="pas_obtenue badge_14"/>
          <img src="https://i.imgur.com/sLlf07T.png" title="desc" class="pas_obtenue badge_15"/>
          <img src="https://i.imgur.com/HeiKd1Y.png" title="desc" class="pas_obtenue badge_16"/>
          <img src="https://i.imgur.com/H1DrUBo.png" title="desc" class="pas_obtenue badge_17"/>
          <img src="https://i.imgur.com/3Aa4SPM.png" title="desc" class="pas_obtenue badge_18"/>
          <img src="https://i.imgur.com/FvVRE0V.png" title="desc" class="pas_obtenue badge_19"/>
          <img src="https://i.imgur.com/wwDgthd.png" title="desc" class="pas_obtenue badge_20"/>
          <img src="https://i.imgur.com/caxGHyb.png" title="desc" class="pas_obtenue badge_21"/>
          <img src="https://i.imgur.com/nKl39uQ.png" title="desc" class="pas_obtenue badge_22"/>
          <img src="https://i.imgur.com/vc1c83s.png" title="desc" class="pas_obtenue badge_23"/>
          <img src="https://i.imgur.com/C3AQIHT.png" title="desc" class="pas_obtenue badge_24"/>
          <img src="https://i.imgur.com/iefwiuH.png" title="desc" class="pas_obtenue badge_25"/>
          <img src="https://i.imgur.com/HpV3aSZ.png" title="desc" class="pas_obtenue badge_26"/>
          <img src="https://i.imgur.com/UWdXfqR.png" title="desc" class="pas_obtenue badge_27"/>
          <img src="https://i.imgur.com/lHbT5AU.png" title="desc" class="pas_obtenue badge_28"/>
          <img src="https://i.imgur.com/JB2FOsH.png" title="desc" class="pas_obtenue badge_29"/>
          <img src="https://i.imgur.com/90uugXR.png" title="desc" class="pas_obtenue badge_30"/>
          <img src="https://i.imgur.com/h8E4xNS.png" title="desc" class="pas_obtenue badge_31"/>
          <img src="https://i.imgur.com/uM8Y585.png" title="desc" class="pas_obtenue badge_32"/>
        </div>
      </div>
    </div>
  </div>
  <div class="profil-head" style="height:50px">
    <div class="profil-filter"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div></div>
    <div class="profil-bann"></div>
  </div>
  <div class="profil-bottom">
    <!-- BEGIN profile_field -->
    <!-- BEGIN profil_type_user_posts -->
    <a rel="nofollow" href="/sta/{PUSERNAME}"><div></div><span>Sujets</span></a>
    <a rel="nofollow" href="/spa/{PUSERNAME}"><div></div><span>Posts</span></a>
    <!-- END profil_type_user_posts -->
    <!-- END profile_field -->
    {ADMINISTRATE_USER}
    {BAN_USER}
  </div>
</div>
<script>
document.getElementById("defaultOpen").click();
</script>
<script type="text/javascript">
if (/^\/u\d+$/.test(document.location.pathname)) {
 
  $(function(){
    var profilBadges = $("span:contains('Inventaire')").parent().next();
    var listeBadges = profilBadges.text().split(";");
  
    for(var i = 0, l = listeBadges.length; i < l; i++){
      if(listeBadges[i].length > 0){
        try{
          console.log("ok");
          $("#profil-inventaire").find("." + listeBadges[i].trim()).addClass("obtenue").removeClass("pas_obtenue");
        } catch(e){
          console.log("Système de badge erreur => " + e);
        }
      }
    }
  
    /* On enlève la ligne des badges si le membre n'est pas modérateur ou un supérieur */
    if(profilBadges.parent().find(".field_editable").length < 1) {
      var ligne = profilBadges.parent().parent().next();
      if(ligne.hasClass("borderPFIL")) ligne.remove();
    
      profilBadges.parent().remove();
    }
  
  });
}

</script>
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        var sidebar = $('#sidebar-left'),
            top_position_window = $(window).scrollTop(),
            top_position_sidebar = sidebar.offset().top;

        function stickySidebar() {
            top_position_window = $(window).scrollTop();

            if ((top_position_window + 86) > top_position_sidebar) {
                sidebar.addClass('sticky');
            } else {
                sidebar.removeClass('sticky');
            }
        }

        stickySidebar();

        $(window).on('scroll', function() {
            stickySidebar();
        });
    });

    $(document).ready(function(){
        $('[id^=field_id]').each(function(){
            if ( $(this).find('.field_editable').is('span, div') )
            {
                $(this).hover(function()
                {
                    if( $(this).find('.field_editable.invisible').is('span, div') )
                    {
                        $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit btn btn-default"><i class="material-icons">mode_edit</i><span>{L_FIELD_EDIT_VALUE}</span></div>');
                        $(this).find('.ajax-profil_edit').attr({
                            alt: "{L_FIELD_EDIT_VALUE}",
                            title: "{L_FIELD_EDIT_VALUE}"
                        }).click(function(){
                            $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<i class="material-icons ajax-profil_valid">check</i>').find('input,select');
                            $(this).prev().find('.ajax-profil_valid').attr({
                                alt: "{L_VALIDATE}",
                                title: "{L_VALIDATE}"
                            }).click(function(){
                                var content = new Array();
                                $(this).parent().find('[name]').each(function(){
                                    var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                                    if ( (type_special && $(this).is(':checked')) || !type_special )
                                    {
                                        content.push(new Array($(this).attr('name'), $(this).attr('value')));
                                    }
                                });
                                var id_name = $(this).parents('[id^=field_id]').attr('id');
                                var id = id_name.substring(8, id_name.length);
                                $.post(
                                    "{U_AJAX_PROFILE}",
                                        {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                                    function(data){
                                        $.each(data, function(i, item){
                                            $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                                        });
                                    },
                                    "json"
                                );
                            });
                            $(this).remove();
                        });
                    }
                },function()
                {
                    if( $(this).find('.field_editable.invisible').is('span, div') )
                    {
                        $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                        $(this).find('.ajax-profil_edit').remove();
                    }
                });

                if ($(this).find('[type="radio"]')) {
                    $(this).find('[type="radio"]').each(function() {
                        $(this)
                            .wrap('<span class="radio">')
                            .after('<span class="radio-check"></span>');
                    });
                }
            }
        });
    });
    //]]>
</script>

Et enfin son css :

Code:

.ths-profil {
  margin: 20px 0;
  font-family: Poppins;
}
.profil-head {height: 200px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;}
.profil-filter {background:#3a5384; position: absolute; top:0; right:0; left:0; bottom:0;}
.profil-bann {background-image: url('https://cdna.artstation.com/p/assets/images/images/006/167/512/large/jose-luis-vaello-bertol-rime-cover-edge.jpg?1496513906'); background-size:cover; position:absolute; top:0; right:0; left:0; bottom:0; background-position:center; filter: grayscale(70%) contrast(105%); mix-blend-mode: multiply;}
.profil-name {position:relative;}
.profil-name a, .profil-name strong {
  font-family: Poppins;
  text-transform: lowercase;
  font-weight: 700;
  border: 2px solid #fff;
  color: #fff;
  padding: 5px 10px;
  letter-spacing: 1px;
  font-size: 16px;
}
/**** CORPS DU PROFIL ****/

.profil-body {
  background: #fff;
  display:flex;
}
.profil-right {
  flex:1;
  display: flex;
  flex-direction: column;
}
.profil-left {
  background-color: #222;
  color: #aeaeae;
  overflow: hidden;
  position: relative;
  background-image: url(https://www.zupimages.net/up/20/12/2u2d.png);
  background-blend-mode: difference;
}
.lefttp {
  display:flex;
  margin:20px 20px 0;
  position:relative;
}
.member-lks {
  margin-right:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:10px;
  font-size:0px
}
.member-lks a {
  border: 2px solid #ccc;
  color: #ccc;
  transform: rotate(-45deg);
  justify-content:center;
  margin: 0 0 20px;
  height:35px;
  width:35px;
  display:flex;
  align-items:center;
}
.member-lks img {
  transform: rotate(45deg);
  width:18px;
  position:relative;
  z-index:2;
  opacity:0.8;
}
.member-lks a:hover img {
  opacity:0.9;
}
.profil-ava {
  position:relative;
}
.pf-quote {
  font-family: Playfair Display;
  font-style: italic;
  color: #eee;
  position:relative;
  font-size: 12px;
  flex:1;
  margin:10px 20px;
  text-align:center;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pf-quote div:nth-child(4) {
    display: flex;
}
.pf-quote div {
    display: none;
}

/* Style the tab */
.tab {
  overflow: hidden;
  background: #222;
  display:flex;
  flex-wrap:wrap;
  min-height:50px;
  background-image: url(https://www.zupimages.net/up/20/02/tyzl.png);
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background: none;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px;
  transition: 0.3s;
  color: #eee;
  flex-grow:1;
}
.tab button b {
  font-weight:normal;
  font-family: Karla;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.tab button b:before {
  content: " ";
  width: 20%;
  border-bottom: 1px solid #eee;
  margin-right: 5px;
  transition: all ease 0.5s;
  pointer-events: none;
}
.tab button b:after {    
  content: " ";
  width: 20%;
  border-bottom: 1px solid #eee;
  margin-left: 5px;
  transition: all ease 0.5s;
  pointer-events: none;}

/* Change background color of buttons on hover */
.tab button:hover {
  color: #fff;
}
.tab button:hover b:before, tab button:hover b:after {border-color: #fff;}

/* Create an active/current tablink class */
.tab button.active {
  color: #fff;
}
.tab button.active b:before, tab button.active b:after {border-color: #fff;}

/* Style the tab content */
.tabcontent {
  display: none;
  flex: 1;
}
.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
.tabcontent {
  padding:20px;
}

/*** 1ER ONGLET ***/
.tab-top {
  display:flex;
  margin-bottom:20px;
}
.tab-top img {
  height:100px;
  outline: dashed 1px #e3e3e3;
  outline-offset : 5px;
  margin: 5px;
  position:relative;
}
.tabout img {
  width:100px;
  height:100px;
  outline: dashed 1px #e3e3e3;
  outline-offset : 5px;
  position:relative;
  margin: 5px;
}
.tabout div {
    display: none;
}
.tabout div:first-child {
    display: flex;
}
.pf-infos {
  display:flex;
  flex-wrap:wrap;
  position:relative;
  margin: 0 -5px -5px 10px;
  align-items:space-between;
}
.ink {
  font-family: Poppins;
  text-transform: lowercase;
  font-weight: 500;
  border: 1px dashed #e3e3e3;
  color: #555;
  padding: 15.5px 3px;
  letter-spacing: 1px;
  font-size: 10px;
  flex-grow: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 0 5px 5px 0;
  border-radius:2px;
  max-height:20px;
}
.pf-infos div:nth-child(2), .pf-infos div:nth-child(4) {
  display: flex;
  font-size: 0px;
}
.ink {
    display: none;
}
.infos-label {
  margin: 0 2px;
}
.infos-label span {font-size: 10px !important;}
.infos-cont {
  margin: 0 2px;
  color: #fff;
  background: #3a5384;
  font-weight:700;
  text-transform: uppercase;
  line-height:13px;
  font-family: Karla;
  letter-spacing:2px;
  font-size:9px !important;
  padding:5px 10px;
}
.tab-bot {
  background: rgba(58,83,132, 0.6);
  border-radius: 5px;
  border:20px solid rgba(234,181,149, 0.0);
  color: #fff;
  overflow:auto;
  height: 286px;
  padding-right:10px;
}
.persona {
  border-bottom:1px dashed #fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 0 10px;
  overflow:hidden;
  position:relative;
  color: #fff;
  height:45px;
  line-height:12px;
  text-shadow: -1px 0 #3a5384, 0 1px #3a5384, 1px 0 #3a5384, 0 -1px #3a5384;
}
.persona {
    display: none;
}
.persona:nth-child(6), .persona:nth-child(7), .persona:nth-child(8), .persona:nth-child(9), .persona:nth-child(10), .persona:nth-child(11), .persona:nth-child(17) {
    display: flex;
}
.perso-label {
  opacity:0.8;
  text-transform: uppercase;
  font-size: 0px;
  position:relative;
  color: #3a5384;
  font-weight: 700;
  letter-spacing:1px;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
.perso-label span {
    display: block !important;
    font-size: 9px;
      color: unset !important;
}
.perso-cont {
  font-size:14px;
  text-transform: lowercase;
  flex:1;
  text-align:right;
  margin-left:20px;
}
.persona:before {
  font-family:FontAwesome;
  position:absolute;
  font-size: 50px;
  opacity: 0.4;
  transform: rotate(-20deg);
  bottom: -0px;
  text-shadow:none;
}
.persona:nth-child(6):before {
  content: '\eb1c';
  font-family: 'honeybee';
}
.persona:nth-child(7):before {
  content: '\f1fd';
}
.persona:nth-child(8):before {
  content: '\f0b1';
}
.persona:nth-child(9):before {
  content: '\f083';
}
.persona:nth-child(10):before {
  content: '\f6fa';
}
.persona:nth-child(11):before {
  content: '\f135';
}
.persona:nth-child(17):before {
  content: '\f5a0';
}

/**** 2E ONGLET ****/
.tabout {
  display:flex;
}

.tab-comment {
  background:#3a5384;
  border: 20px solid rgba(0,0,0,0);
  border-radius: 5px 5px 5px 0px;
  color: #fff;
  font-size: 11px;
  text-align:justify;
  position:relative;
  flex:1;
  margin-left:20px;
}
.tige {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -22px;
  left: -25px;
  height: 19px;
  border-left: 20px solid #3a5384;
  border-bottom-right-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
  transform: translate(0, -2px);
  border-bottom-right-radius: 15px;
  transform: translate(-1px, -2px);
}
.tab-comment:after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: -22px;
    left: -8px;
    width: 18px;
  height: 20px;
  background: #FFF;
  border-bottom-right-radius: 10px;
  -webkit-transform: translate(-30px, -2px); transform: translate(-30px, -2px);
}
.tacom {
  height:60px;
  overflow:auto;
  text-align:justify;
  display: block !important;
}
.tabout div:first-child {
    display: flex;
}
.tacom div:first-child, .tacom div {
  display: none;
}
.tacom div:nth-child(25) {
    display: block;
}
.encart {
  border-radius: 5px;
  overflow:hidden;
  margin-top:10px;
}
.encead {
  font-family:Quicksand;
  font-size:16px;
  color: #fff;
  margin-top: 10px;
  text-align: center;
  background:#3a5384;
  border-radius: 5px 5px 0px 0px;
  text-transform: lowercase;
  letter-spacing: 1px;
  position:relative;
  overflow:hidden;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 20px;
}
.encead:before {
  content:'\ec0e';
  font-family:'honeybee';
  position:absolute;
  right:0;
  top:0;
  font-size: 40px;
  opacity:0.7;
}
.encb {
  border: 1px solid #eee;
  border-top:none;
  height: 160px;
  font-size: 12px;
  text-align:justify;
  color: #555;
  overflow:auto;
  padding:20px;
  border-radius: 0px 0px 5px 5px;
}
.encb div {
    display: none;
}
.encb div:nth-child(19) {
    display: block;
}
.rpg {
  position:relative;
}
.rpg:before {
  position: absolute;
  font-family: Roboto;
  font-weight: 900;
  font-size: 50px;
  font-style: italic;
  color: #BBB;
  text-transform: uppercase;
  bottom: -50px;
  left: 0px;
  pointer-events: none;
  text-align: right;
  letter-spacing: -3px;
  opacity: 0.2;
  content: 'Expérience';
}
.xp-cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px;
  height:100%;
  position:relative;
}
.xp-bar {
    border: 2px solid #eee;
    background: #eee;
    height: 8px;
    margin-right: 5px;
    flex: 1;
    display: flex;
    border-radius: 6px;
}
.xp-bd {
    width: 60%;
    background-image: -webkit-gradient(linear,left top,right top,from(#286DA8),to(#B37D4E));
    background-image: linear-gradient(90deg,#286DA8,#B37D4E);
    border-radius: 4px;
}
.xp-cont .gensmall {
    color: #777 !important;
    letter-spacing: 2px;
    font-family: Poppins;
    letter-spacing: 2px;
    font-size: 10px;
    text-transform: uppercase;
    margin-left: 20px;
}

/**** 3E ONGLET ****/
#profil-inventaire {
  flex:1;
  height: 416px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  overflow:auto;
  align-items: flex-start;
}
#profil-inventaire > div {
    display: none;
}
#profil-inventaire > div {
    font-size: 10px;
}
#profil-inventaire field_id5 {
    display: block;
}
#profil-inventaire dl {
    display: none;
}
#field_id5 {
    display: block;
}
/* style bloc badges */
 #inventaire {
    width: 419px;
    height: 338px;
    padding: 14px;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pas_obtenue {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  width: 70px;
  height: 70px;
  padding: 10px;
  filter:grayscale(100%);
  background: #F6F6F6;
  border-radius:5px;
  margin:5px;
}
.obtenue {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  width: 70px;
  height: 70px;
  padding: 10px;
  background: #F6F6F6;
  border-radius:5px;
  margin:5px;
}
/**** BAS DU PROFIL ****/
.profil-bottom {
  background: #222;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image: url(https://www.zupimages.net/up/20/02/tyzl.png);
  flex-wrap:wrap;
  border-radius: 0px 0px 5px 5px;
}
.profil-bottom a {
  font-family: Poppins;
  text-transform: lowercase;
  font-weight: 700;
  border: 2px solid #fff;
  color: #fff;
  padding: 5px 15px;
  letter-spacing: 2px;
  font-size: 12px;
  margin: 0 10px;
  position:relative;
  overflow:hidden;
}
.profil-bottom a div {
    width: 200%;
    height: 300px;
    background: #fff;
    position: absolute;
    transform: rotate(7deg);
    margin: -80px 0px 0px 0px;
    right: 150%;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    z-index: 0;
    pointer-events: none;
}
.profil-bottom a span {
    z-index: 2;
    position: relative;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.profil-bottom a:hover span {
  color: #222 !important;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
}
.profil-bottom a:hover div {
  right: -10px;
}
ul.profile_field_list {
    list-style: none;
}

Merci de ta patience !

[Invité]

Hello Elicanto,
alors on va juste ajouter un identifiant dans le template de la liste des membres ( memberlist_body )
Remplaces par ce contenu.

Code:

<div id="M14_liste_member"class="member-list">
    <!-- BEGIN memberrow -->
    <div class="member">
      <div class="member-icon"><img src="https://image.flaticon.com/icons/svg/1838/1838683.svg"/></div>
      <div class="membim">
        <div class="membava">{memberrow.AVATAR_IMG}</div>
        <div class="pmimg" title="envoyer un mp">
          {memberrow.PM_IMG}
        </div>
      </div>
      <div class="member-bd">
        <div class="member-name"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>
        <div class="membf"><b>XX</b> messages</div>
        <div class="membf"><b>{memberrow.JOINED}</b> inscription</div>
        <div class="membf"><b>{memberrow.LASTVISIT}</b> dernière visite</div>
        <div class="membf M14_rang"><b>Aucun</b>rang</div>
      </div>
    </div>
    <!-- END memberrow -->
  </div>
    <!-- BEGIN switch_no_user -->
    <tr class="row1">
      <td colspan="{switch_no_user.COLSPAN_NUMBER}">{switch_no_user.L_NO_USER}</td>
    </tr>
    <!-- END switch_no_user -->
    <div class="pagination">
      <!-- BEGIN switch_pagination -->
      {PAGINATION}
      <!-- END switch_pagination -->
    </div>
  </div>


J'ai juste ajouté un id à la première div,c'est pour être certain de trouver la bonne div ayant un id spécifique dans le script.
Et modifié la ligne recevant le rang:

Code:

<div class="membf M14_rang"><b>Aucun</b>rang</div>

Ton script perso:

Code:


$(function(){
if(!_userdata["session_logged_in"])return;
var list=$('div#M14_liste_member').length;
if(list){$('.member-name').find('a[href^="/u"]').each(function(){
var link=$(this).attr('href');
var $this=$(this).closest('div.member').find('div.M14_rang b');
$.get(link , function(data){
  var h= $(data).find('.ths-profil .post-rank:first span').text();
if(h){$this.html(h);}});});}});


Et voilou.


Juste pour information, sur ton fofo , tu as que deux membres et la css ne sera pas adaptée lorsque tu auras plusieurs membres.
Sur mon fofo de tests, j'ai dix membres et il se chevauchent tous.

J'ai donc modifié la css concernée:

Code:

.member {
    display: flex;
    background-color: #555;
    background: rgba(2,11,25,0.8);
    overflow: hidden;
    background-image: -webkit-gradient(linear,left top,right top,from(#286DA8),to(#B37D4E));
    background-image: linear-gradient(90deg,#286DA8,#B37D4E);
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    height: 250px;
 width: 48%;

    /*flex: 1;*/
    /*flex-grow: 1;*/
    border-radius: 5px;
    /*max-width: calc(50% - 5px);*/
   /* min-width: calc(50% - 5px);*/
    border: 1px solid #000;
    justify-content: space-between;
}


Avec ta c.s.s:



C.s.s modifiée:



Tu remarqueras que les rangs sont affichés (représentés par la flèche).



a++

[Elicanto]

Bonjour,

Merci infiniment, cela fonctionne parfaitement ! Et merci aussi pour le css, je n'avais pas remarqué le chevauchement.

Serait-il possible d'afficher également l'image des rangs selon le même fonctionnement, à la place de celle dans la div "member-icon", ou j'en demande trop ? Je ne voudrais pas abuser de ton temps.

Merci encore !

[Invité]

Re,
on peut mettre l'image du rang à la place du titre du statut?
car ce serait dommage de se passer de l'avatar.
Tu en penses quoi ?


Testes ceci:
Dans le template profile_view_body , remplaces le contenu par celui-ci:

Code:

<div class="ths-profil">
  <div class="profil-head">
    <div class="profil-filter"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}{L_STATUT}</div></div>
    <div class="profil-bann"></div>
      <div class="profil-name">{USERNAME}</div>
  </div>
  <div class="profil-body">
    <div class="profil-left">
      <div class="lefttp">
        <div class="member-lks">
          <!-- BEGIN contact_field -->
          {contact_field.CONTENT}
          <!-- END contact_field -->
        </div>
        <div class="profil-ava"><div class="p-avatar"><span id="avatar_membre">{AVATAR_IMG}</span></div></div>
      </div>
      <div class="pf-quote"><!-- BEGIN profile_field -->{profile_field.CONTENT}<!-- END profile_field --></div>
    </div>
    <div class="profil-right">
      <!-- Tab links -->
      <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'tab1')" id="defaultOpen"><b>Généralités</b></button>
        <button class="tablinks" onclick="openCity(event, 'tab2')"><b>A propos</b></button>
        <button class="tablinks" onclick="openCity(event, 'tab3')"><b>Inventaire</b></button>
      </div>
     
      <!-- Tab content -->
      <div id="tab1" class="tabcontent">
      <div class="tab-top">
        <img src="https://www.zupimages.net/up/19/16/wq32.png"/>
        <div class="pf-infos">
          <!-- BEGIN profile_field -->
          <div class="ink">
            <div class="infos-cont">{profile_field.CONTENT}<div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div></div>
            <div class="infos-label">{profile_field.LABEL}</div></div>
          <!-- END profile_field -->
          <div class="ink" style="display: flex !important;"><div class="infos-label">dernière connexion</div><div class="infos-cont"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>{LAST_VISIT_TIME}</div></div>
          <div class="ink" style="display: flex !important;"><div class="infos-label">actuellement</div><div class="infos-cont"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>{USER_ONLINE}</div></div>
        </div>
        </div>
        <div class="tab-bot">
          <div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK} </div>
          <!-- BEGIN profile_field -->
          <div class="persona">
            <div class="perso-label"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>{profile_field.LABEL}</div>
            <div class="perso-cont">{profile_field.CONTENT}</div>
          </div>
          <!-- END profile_field -->
        </div>
      </div>
     
      <div id="tab2" class="tabcontent">
        <div class="tabout">
          <!-- BEGIN profile_field -->{profile_field.CONTENT}<!-- END profile_field -->
          <div class="tab-comment" style="display: block !important;">
            <div class="tige"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div></div>
            <div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>
            <div class="tacom"><!-- BEGIN profile_field -->{profile_field.CONTENT}<!-- END profile_field --></div>
          </div>
        </div>
        <div class="encart">
          <div class="encead"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div>Les petits +</div>
          <div class="encb"><!-- BEGIN profile_field -->{profile_field.CONTENT}<!-- END profile_field --></div>
        </div>
        <div class="profil-xp">
          <div class="about-ttl"><span>Expérience</span></div>
          <!-- BEGIN switch_rpg -->
          <!-- BEGIN rpg_fields -->
          {switch_rpg.rpg_fields.F_VALUE_NEW}
          <!-- END rpg_fields -->
          <div class="profil-admin-rpg"><table>{U_ADMIN_RPG}</table></div>
          <!-- END switch_rpg -->
        </div>
      </div>
      <div id="tab3" class="tabcontent">
        <div id="profil-inventaire">
          <img src="https://i.imgur.com/XsaWb0U.png" title="desc" class="pas_obtenue badge_0"/>
          <img src="https://i.imgur.com/sctLvkm.png" title="desc" class="pas_obtenue badge_1"/>
          <img src="https://i.imgur.com/7pi57Ok.png" title="desc" class="pas_obtenue badge_2"/>
          <img src="https://i.imgur.com/Hit9Sqh.png" title="desc" class="pas_obtenue badge_3"/>
          <img src="https://i.imgur.com/kVsKor4.png" title="desc" class="pas_obtenue badge_4"/>
          <img src="https://i.imgur.com/Y1UpeUC.png" title="desc" class="pas_obtenue badge_5"/>
          <img src="https://i.imgur.com/uXIgChL.png" title="desc" class="pas_obtenue badge_6"/>
          <img src="https://i.imgur.com/htqwZQK.png" title="desc" class="pas_obtenue badge_7"/>
          <img src="https://i.imgur.com/OsJWOUW.png" title="desc" class="pas_obtenue badge_8"/>
          <img src="https://i.imgur.com/BuRyHPD.png" title="desc" class="pas_obtenue badge_9"/>
          <img src="https://i.imgur.com/qUOnFHw.png" title="desc" class="pas_obtenue badge_10"/>
          <img src="https://i.imgur.com/JB8QlrC.png" title="desc" class="pas_obtenue badge_11"/>
          <img src="https://i.imgur.com/Z7ED6fX.png" title="desc" class="pas_obtenue badge_12"/>
          <img src="https://i.imgur.com/j1fvlWk.png" title="desc" class="pas_obtenue badge_13"/>
          <img src="https://i.imgur.com/GAS4LsH.png" title="desc" class="pas_obtenue badge_14"/>
          <img src="https://i.imgur.com/sLlf07T.png" title="desc" class="pas_obtenue badge_15"/>
          <img src="https://i.imgur.com/HeiKd1Y.png" title="desc" class="pas_obtenue badge_16"/>
          <img src="https://i.imgur.com/H1DrUBo.png" title="desc" class="pas_obtenue badge_17"/>
          <img src="https://i.imgur.com/3Aa4SPM.png" title="desc" class="pas_obtenue badge_18"/>
          <img src="https://i.imgur.com/FvVRE0V.png" title="desc" class="pas_obtenue badge_19"/>
          <img src="https://i.imgur.com/wwDgthd.png" title="desc" class="pas_obtenue badge_20"/>
          <img src="https://i.imgur.com/caxGHyb.png" title="desc" class="pas_obtenue badge_21"/>
          <img src="https://i.imgur.com/nKl39uQ.png" title="desc" class="pas_obtenue badge_22"/>
          <img src="https://i.imgur.com/vc1c83s.png" title="desc" class="pas_obtenue badge_23"/>
          <img src="https://i.imgur.com/C3AQIHT.png" title="desc" class="pas_obtenue badge_24"/>
          <img src="https://i.imgur.com/iefwiuH.png" title="desc" class="pas_obtenue badge_25"/>
          <img src="https://i.imgur.com/HpV3aSZ.png" title="desc" class="pas_obtenue badge_26"/>
          <img src="https://i.imgur.com/UWdXfqR.png" title="desc" class="pas_obtenue badge_27"/>
          <img src="https://i.imgur.com/lHbT5AU.png" title="desc" class="pas_obtenue badge_28"/>
          <img src="https://i.imgur.com/JB2FOsH.png" title="desc" class="pas_obtenue badge_29"/>
          <img src="https://i.imgur.com/90uugXR.png" title="desc" class="pas_obtenue badge_30"/>
          <img src="https://i.imgur.com/h8E4xNS.png" title="desc" class="pas_obtenue badge_31"/>
          <img src="https://i.imgur.com/uM8Y585.png" title="desc" class="pas_obtenue badge_32"/>
        </div>
      </div>
    </div>
  </div>
  <div class="profil-head" style="height:50px">
    <div class="profil-filter"><div class="post-rank" style="font-size:0; opacity:0;display:none;">{POSTER_RANK}</div></div>
    <div class="profil-bann"></div>
  </div>
  <div class="profil-bottom">
    <!-- BEGIN profile_field -->
    <!-- BEGIN profil_type_user_posts -->
    <a rel="nofollow" href="/sta/{PUSERNAME}"><div></div><span>Sujets</span></a>
    <a rel="nofollow" href="/spa/{PUSERNAME}"><div></div><span>Posts</span></a>
    <!-- END profil_type_user_posts -->
    <!-- END profile_field -->
    {ADMINISTRATE_USER}
    {BAN_USER}
  </div>
</div>
<script>
document.getElementById("defaultOpen").click();
</script>
<script type="text/javascript">
if (/^\/u\d+$/.test(document.location.pathname)) {
 
  $(function(){
    var profilBadges = $("span:contains('Inventaire')").parent().next();
    var listeBadges = profilBadges.text().split(";");
 
    for(var i = 0, l = listeBadges.length; i < l; i++){
      if(listeBadges[i].length > 0){
        try{
          console.log("ok");
          $("#profil-inventaire").find("." + listeBadges[i].trim()).addClass("obtenue").removeClass("pas_obtenue");
        } catch(e){
          console.log("Système de badge erreur => " + e);
        }
      }
    }
 
    /* On enlève la ligne des badges si le membre n'est pas modérateur ou un supérieur */
    if(profilBadges.parent().find(".field_editable").length < 1) {
      var ligne = profilBadges.parent().parent().next();
      if(ligne.hasClass("borderPFIL")) ligne.remove();
   
      profilBadges.parent().remove();
    }
 
  });
}

</script>
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        var sidebar = $('#sidebar-left'),
            top_position_window = $(window).scrollTop(),
            top_position_sidebar = sidebar.offset().top;

        function stickySidebar() {
            top_position_window = $(window).scrollTop();

            if ((top_position_window + 86) > top_position_sidebar) {
                sidebar.addClass('sticky');
            } else {
                sidebar.removeClass('sticky');
            }
        }

        stickySidebar();

        $(window).on('scroll', function() {
            stickySidebar();
        });
    });

    $(document).ready(function(){
        $('[id^=field_id]').each(function(){
            if ( $(this).find('.field_editable').is('span, div') )
            {
                $(this).hover(function()
                {
                    if( $(this).find('.field_editable.invisible').is('span, div') )
                    {
                        $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit btn btn-default"><i class="material-icons">mode_edit</i><span>{L_FIELD_EDIT_VALUE}</span></div>');
                        $(this).find('.ajax-profil_edit').attr({
                            alt: "{L_FIELD_EDIT_VALUE}",
                            title: "{L_FIELD_EDIT_VALUE}"
                        }).click(function(){
                            $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<i class="material-icons ajax-profil_valid">check</i>').find('input,select');
                            $(this).prev().find('.ajax-profil_valid').attr({
                                alt: "{L_VALIDATE}",
                                title: "{L_VALIDATE}"
                            }).click(function(){
                                var content = new Array();
                                $(this).parent().find('[name]').each(function(){
                                    var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                                    if ( (type_special && $(this).is(':checked')) || !type_special )
                                    {
                                        content.push(new Array($(this).attr('name'), $(this).attr('value')));
                                    }
                                });
                                var id_name = $(this).parents('[id^=field_id]').attr('id');
                                var id = id_name.substring(8, id_name.length);
                                $.post(
                                    "{U_AJAX_PROFILE}",
                                        {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                                    function(data){
                                        $.each(data, function(i, item){
                                            $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                                        });
                                    },
                                    "json"
                                );
                            });
                            $(this).remove();
                        });
                    }
                },function()
                {
                    if( $(this).find('.field_editable.invisible').is('span, div') )
                    {
                        $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                        $(this).find('.ajax-profil_edit').remove();
                    }
                });

                if ($(this).find('[type="radio"]')) {
                    $(this).find('[type="radio"]').each(function() {
                        $(this)
                            .wrap('<span class="radio">')
                            .after('<span class="radio-check"></span>');
                    });
                }
            }
        });
    });
    //]]>
</script>


Le template memberlist_body :

Code:

<div id="M14_liste_member"class="member-list">
    <!-- BEGIN memberrow -->
    <div class="member">
      <div class="member-icon"><img src="https://image.flaticon.com/icons/svg/1838/1838683.svg"/></div>
      <div class="membim">
        <div class="membava">{memberrow.AVATAR_IMG}</div>
        <div class="pmimg" title="envoyer un mp">
          {memberrow.PM_IMG}
        </div>
      </div>
      <div class="member-bd">
        <div class="member-name"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>
        <div class="membf"><b>XX</b> messages</div>
        <div class="membf"><b>{memberrow.JOINED}</b> inscription</div>
        <div class="membf"><b>{memberrow.LASTVISIT}</b> dernière visite</div>
        <div class="membf M14_rang"><b>Aucun</b><span>Néant</span></div>
      </div>
    </div>
    <!-- END memberrow -->
  </div>
    <!-- BEGIN switch_no_user -->
    <tr class="row1">
      <td colspan="{switch_no_user.COLSPAN_NUMBER}">{switch_no_user.L_NO_USER}</td>
    </tr>
    <!-- END switch_no_user -->
    <div class="pagination">
      <!-- BEGIN switch_pagination -->
      {PAGINATION}
      <!-- END switch_pagination -->
    </div>
  </div>


Le script modifié :

Code:


$(function(){
if(!_userdata["session_logged_in"])return;
var list=$('div#M14_liste_member').length;
if(list){$('.member-name').find('a[href^="/u"]').each(function(){
var link=$(this).attr('href');
var $this=$(this).closest('div.member').find('div.M14_rang');
$.get(link , function(data){
var h= $(data).find('.ths-profil .post-rank:first span').text();
var i= $(data).find('.ths-profil .post-rank:first img').attr('src'); 
if(h)
{
  $this.find('b').html(h);
  $this.find('span').html('<img src="'+i+'"/>');
}
});});}});



a++

[Elicanto]

C'est parfait ! J'ai du mal m'exprimer mais c'est ce que je voulais oui  

Un grand merci pour ton aide et ta patience !