Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB2] Afficher les points dans la liste des membres


2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mar 3 Mar 2020 - 15:43

  • Version du forum :
    PHPBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Bonjour,

J'ai modifié l'affichage de la liste des membres sur mon forum de façon à ce que ce soit l'avatar qui s'affiche et que les informations relatives au membre correspondant s'affichent au survol de la souris.
Dans ces informations je souhaiterai y afficher la monnaie virtuelle que nous avons mis en place via le système de points, appelés "Écus".
Toutefois je ne trouve pas comment y parvenir.

Sauriez-vous si c'est ne serait-ce que possible ?

Merci beaucoup


Dernière édition par Pizi le Mer 4 Mar 2020 - 14:24, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 3 Mar 2020 - 16:09

Hello Pizi,

comment as-tu procédé pour avoir cet affichage?

Surement via le template, donc merci de le founir.

Dans ces informations je souhaiterai y afficher la monnaie virtuelle que nous avons mis en place via le système de points, appelés "Écus".

Je veux bien l'insérer mais il faut impérativement activer le profil avancè:

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


Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mar 3 Mar 2020 - 16:54

Bonjour,

Alors j'ai activé le profile avancé, c'est bon.
Voici les codes de l'affichage de la liste des membres :

Template memberlist_body :

Code:
<!-- BEGIN switch_user_logged_in -->
<p class="right rightside">{LAST_VISIT_DATE}</p>
<!-- END switch_user_logged_in -->

<p>{CURRENT_TIME}</p>
<div class="titrePA row2">{PAGE_TITLE}

    <form action="{S_MODE_ACTION}" method="get">
        <table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">
          <tr>
              <th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
          </tr>
          <tr>
              <td class="row1">
              <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
                <tr>
                    <td width="100%">{L_USER_SELECT} <input type="text" class="post row2" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" /> 
                    {L_SELECT_SORT_METHOD} {S_MODE_SELECT} 
                    {L_ORDER} {S_ORDER_SELECT}    &nbsp;
                    {S_HIDDEN_SID}
                    <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
                </tr>
              </table>
              </td>
          </tr>
        </table>
        </form>
   
        <!-- BEGIN memberrow -->
     
              <div class="memberlist">
            <div class="facebase">
              <div class="flip">
                  <div class="face1"><div class="avatar_member_list"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></div>
                <div class="cadremembre"></div></div>
              <div class="face2">
                            <div style="padding: 5px;"><div class="pseudo_member"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div><div class="groups"><span class="gen">{memberrow.GROUPS}</span></div>
                              <div class="stat_member"> Arrivé(e) le : {memberrow.JOINED}. <br/><br/>Dernière errance : {memberrow.LASTVISIT}<br/><br/> Messages : {memberrow.POSTS}<br /><br /><center>{memberrow.PM_IMG}</center></div></div></div><div class="cadremembre"></div></div>
                </div>
          <!-- END memberrow -->
          <!-- BEGIN switch_no_user -->
     
          <!-- END switch_no_user -->
   
        <!-- BEGIN switch_pagination -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
              <td><span class="nav">{PAGE_NUMBER}</span></td>
              <td align="right"><span class="nav">{PAGINATION}</span></td>
          </tr>
        </table>
        <br />
        <!-- END switch_pagination -->
</div>

CSS :

Code:
/********************************************************************************************************
              AFFICHAGE LISTE DES MEMBRES
  ******************************************************************************************************/
 
    /**** CODE PAR MARIE, MODIFIE PAR LITTLEELDA POUR NEVER-UTOPIA. MERCI DE LAISSER LE COPYRIGHT***/

    /**** AFFICHAGE MEMBRER LISTE****/

    .memberlist {
    display:inline-block;
    vertical-align:top;
    margin-bottom: 15px;
    margin-right: 10px;
  margin-left:10px;
  margin-top: 25px;
    }

    /*** FORMAT DE L'IMAGE DE L'AVATAR ***/
 
    .avatar_member_list img{/** taille de l'image de l'avatar que vous désiré qu'il s'affiche **/
      width:200px;
      height:320px;
    }
.cadremembre
{
  position: relative;
  width: 210px;
  height: 330px;
  background: url('https://i.imgur.com/BCr9Apw.png');
  z-index: 999;
  bottom: 1.6%;
  right: 2.1%;


    /*** L'ANIMATION FLIP CARD ***/
 
  .facebase, .face1, .face2 {
        width: 200px;/*largeur de l'avatar*/
        height: 320px;/*hauteur de l'avatar*/

        }

  .facebase{
      margin: 0;
      position: relative;
      box-shadow : 1px 2px 9px 5px rgba(66,101,90,0.8);
      background-color: #9AB8AF;
}
     
    .flip {
      -moz-transition: all 30ms ease-in-out;
      -ms-transition: all 30ms ease-in-out;
      -o-transition: all 30ms ease-in-out;
      -webkit-transition: all 30ms ease-in-out;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      transition: all 30ms ease-in-out;
      width: 100%;
      z-index: 2;
    }

    .face1 {
      background-color: #9AB8AF;
      left: 0;
      position: absolute;
      top: 0;
      z-index: 3;
      transition: all 30ms ease-in-out;
    }

    .face2 {
      background-color: rgba(255,255,255,0.5);
      box-sizing: border-box;
      font-size: 13px;
      left: 0;
      overflow: auto;
      padding: 15px;
      position: absolute;
      top: 0;
      z-index: 0;
}

      .facebase:hover > .face2 {
        display: block;
        z-index:5;
      }

    .facebase:hover .face1 {
          opacity: 0.2;
          filter: alpha(opacity=20);
        -moz-opacity:0.5;
          z-index:1;
    }

    /*** DERRIERE L'AVATAR ***/

    .pseudo_member {
 
      font-family: 'Playfair Display', sans serif; /**L'écriture**/
      text-align: center;
      color: #000;
      line-height: 100%;
      font-size: 14px;
      text-transform: uppercase;
    }
.pseudo_member a{
  font-size: 18px;
}

    .stat_member {
      font-size: 10px;
      text-align: left;
    }

    .groups {
      font-family: arial; /**L'écriture**/
      text-align: center;
      font-size: 7px;
      color: #000;
      line-height: 100%;
      text-transform: uppercase;
  margin-top: 6px;
      margin-bottom: 5px;
      border-bottom:1px solid #000;
    }

Merci beaucoup :)
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 3 Mar 2020 - 18:08

Alors on va tester ce script dans un premier temps:


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

Mettre un titre explicite.
Cocher sur toutes les pages.


Déposer ceci:

Code:

$(function(){
$('.facebase').each(function(){
var $this=$(this).find('.M14_ECUS');
var link=$(this).find('a[href^="/u"]').attr('href');
$.get(link , function(data){
$(data).find('#profile-advanced-details ').find('dt:contains(Écus)').each(function(){
var test=$(this).closest('dl').find('dd').text();
$this.text(test);
});});});});

Penser a cliquer sur le bouton Valid

Puis dans ton template:

Recherches ceci:
Code:

Messages : {memberrow.POSTS}<br /><br />

Juste après déposes ceci:
Code:

Écus : <span class="M14_ECUS"></span><br /><br />


Penser a enregistrer puis à valider en cliquant respectivement sur Enregistr puis Ajout


Et voilou.




Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mar 3 Mar 2020 - 18:29

Merci beaucoup Phil mais ça ne semble pas fonctionner :/
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 3 Mar 2020 - 18:42

As tu un compte test stp(en MP).
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mar 3 Mar 2020 - 18:47

J'ai un compte admin tu peux passer par là en effet mais je ne peux pas te communiquer les identifiants, je ne peux pas encore envoyer de mp :/
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 3 Mar 2020 - 18:51

Tu dois pouvoir désormais m'envoyer un Mp clin oeil
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 3 Mar 2020 - 19:59

Re Pizi,
alors j'ai juste supprimé l'icône que tu avais déposé dans la description qui faisait bugger le script.
Tout est ok désormais hinhin .
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mar 3 Mar 2020 - 20:11

Oh super !
Quelle image du coup?
Est-ce que ça fera bugguer si je remplace "Écus :" par l’image de la pièce?
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 4 Mar 2020 - 6:09

Hello Pizi,

Est-ce que ça fera bugguer si je remplace "Écus :" par l’image de la pièce?

Comme je l'ai mentionné plus haut:
j'ai juste supprimé l'icône que tu avais déposé dans la description
qui faisait bugger le script à ce niveau:

[PHPBB2] Afficher les points dans la liste des membres 171
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 4 Mar 2020 - 7:41

Ah oui donc eut je n’ai plus l’image de la pièce du coup nulle part...
Est-il possible d’y remédier ?
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 4 Mar 2020 - 7:43

Bonjour,
tu as le lien de cette image, que je puisse faire des essais!!

Ce n'était pas celle-ci:
[PHPBB2] Afficher les points dans la liste des membres Rsz_5i10
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 4 Mar 2020 - 11:00

Bonjour bonjour,

Mais oui mais oui je l'ai et je te le donne bien volontiers :)

Code:
<img src="https://i.imgur.com/AprLtLG.png" />
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 4 Mar 2020 - 11:26

Je regarde sur ton fofo et je le met en place Merci
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 4 Mar 2020 - 11:30

Oh merci Merci
Il devait s'afficher dans les messages et dans la liste des membres également ainsi que dans le profil (pour repères).
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 4 Mar 2020 - 11:33

Voilou Pizi,
tout est fonctionnel , j'ai ajouter le lien de cette icône dans le profil :
https://www.milouze14.com/t32517-phpbb2-afficher-les-points-dans-la-liste-des-membres#619193

Et modifié le script en déposant le lien de l’icône:

https://i.imgur.com/AprLtLG.png
ici dans le script:
Code:
.find('img[src="https://i.imgur.com/AprLtLG.png"]')

Code:
$(function(){
    $('.facebase').each(function(){
    var $this=$(this).find('.M14_ECUS');
    var link=$(this).find('a[href^="/u"]').attr('href');
    $.get(link , function(data){
    $(data).find('#profile-advanced-details ').find('img[src="https://i.imgur.com/AprLtLG.png"]').each(function(){
    var test=$(this).closest('dl').find('dd').text();
    $this.text(test);
    });});});});
Si toutefois , tu devais modifier le lien de cette dernière,
il faudra le faire aussi dans le script.

hinhin

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 4 Mar 2020 - 11:39

Si tu veux l'icône dans la liste des membres il faut remplacer cette partie:

Code:

Écus : <span class="M14_ECUS"></span><br /><br />

Par:

Code:

<img src="https://i.imgur.com/AprLtLG.png" /> : <span class="M14_ECUS"></span><br /><br />
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 4 Mar 2020 - 11:54

Oh c'est parfait merci beaucoup.
Si dans la liste des membres je rajoute les champs de contacts qui sont comme pour les mp, un lien qui redirige quand on clique sur l'image, est-ce que ça fera bugger le script?

Je n'ose plus toucher ahahah
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 4 Mar 2020 - 12:08

Du moment ou tu laisses ceci dans le template:
Code:
<span class="M14_ECUS"></span>

Tu n'auras aucun risque Pizi.
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 4 Mar 2020 - 13:05

D'accord, merci beaucoup :)
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 4 Mar 2020 - 17:07


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil



Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum