Le Deal du moment : -48%
-48% sur le Compresseur digital programmable Michelin ...
Voir le deal
41.88 €

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Modifier l'affichage des champs de profil Empty Modifier l'affichage des champs de profil

Dim 2 Juin 2019 - 22:16

Toutes versions

Modifier l'affichage des champs de profil

Bonjour !

Cette fois, nous allons voir comment modifier les labels des champs de profil en supprimant les ":" ou encore en remplaçant les libellés par des icons Font Awesome dans les messages.

Exemples:

• Rendu dans les messages :
Modifier l'affichage des champs de profil Screen23

• Rendu dans les profils :
Modifier l'affichage des champs de profil Screen25

• Rendu dans l'édition du profil :
Modifier l'affichage des champs de profil Screen24

Idea Pré-requis :
• avoir installé Font Awesome sur son forum.

Arrow Ce tutoriel fonctionne pour toutes les versions.

Idea Je considére que les templates utilisés sont ceux par défaut de la version.

Paramètrage du profil

Tout d'abord, tu vas devoir éditer dans les profils des membres, les labels que tu veux personnaliser en y ajoutant un "tag". Par exemple, j'ai décidé d'en changer 3 :
1) La date de naissance :
Code:
Date de naissance [lbl-birthdate]

2) L'âge :
Code:
Age [lbl-age]

3) La date d'inscription :
Code:
Date d'inscription [lbl-inscription]

Idea Par "tag", j'entends "un mot entre crochet" et ici, pour les repérer facilement, on va ajouter "lbl-" Smile

Du javascript pour gérer tout ça

Ensuite, on va créer un nouveau javascript qu'on va afficher sur toutes les pages. Voilà le JS commenté :
Code:
; (function(){

  // Version du forum ?
  // phpbb2, phpbb3, punbb, invision, modernbb, awesomebb
  var version = 'phpbb2';

  // On définit les cibles en fonction de la version du forum
  var verifCibleMessage,
      cibleMessage,
      verifCibleProfil,
      cibleProfil,
      verifCibleEditionProfil,
      cibleEditionProfil;

  switch (version) {
    case 'phpbb3':
      verifCibleMessage = '.postprofile';
      cibleMessage = '.postprofile .label';
      verifCibleProfil = ' #profile-advanced-details';
      cibleProfil = '#profile-advanced-details #cp-main .middleline dl > dt';
      verifCibleEditionProfil = 'form[action$=profile]';
      cibleEditionProfil = 'form[action$=profile] .panel .inner > fieldset > dl > dt';
      break;

    case 'punbb':
      verifCibleMessage = '.user-info';
      cibleMessage = '.user-info .label';
      verifCibleProfil = ' #profile-advanced-details';
      cibleProfil = '#profile-advanced-details .main-content .middleline dl > dt';
      verifCibleEditionProfil = 'form[action$=profile]';
      cibleEditionProfil = 'form[action$=profile] .main-content > fieldset > dl > dt';
      break;

    case 'invision':
      verifCibleMessage = '.postprofile-details.postdetails';
      cibleMessage = '.postprofile-details.postdetails .label';
      verifCibleProfil = '#profile-advanced-details';
      cibleProfil = '#profile-advanced-details .box-content .middleline dl > dt';
      verifCibleEditionProfil = 'form[action$=profile]';
      cibleEditionProfil = 'form[action$=profile] .box-content > fieldset > dl > dt';
      break;

    case 'modernbb':
      verifCibleMessage = '.postprofile';
      cibleMessage = '.postprofile .postprofile-info .label';
      verifCibleProfil = '#profile-tab-field-profil';
      cibleProfil = '#profile-tab-field-profil > dl > dt';
      verifCibleEditionProfil = 'form[action$=profile]';
      cibleEditionProfil = 'form[action$=profile] .panel .inner > fieldset > dl > dt';
      break;
         
    case 'awesomebb':
      verifCibleMessage = '.post-body .post-aside';
      cibleMessage = '.post-body .post-aside .label';
      verifCibleProfil = '#profile-tab-field-profil';
      cibleProfil = '#profile-tab-field-profil > dl > dt';
      verifCibleEditionProfil = 'form[action$=profile]';
      cibleEditionProfil = 'form[action$=profile] .block-content.profile-field > label > span';
      break;
   
    default:
      verifCibleMessage = '.postdetails.poster-profile';
      cibleMessage = '.postdetails.poster-profile .label';
      verifCibleProfil = '#profile-advanced-details';
      cibleProfil = '#profile-advanced-details > dl > dt';
      verifCibleEditionProfil = 'form[action$=profile]';
      cibleEditionProfil = 'form[action$=profile] .forumline .row1.gen > span';
      break;
  }


  // On définit les différents tag et par quoi on remplace les labels
  var tagLabel = [{
      tag: 'birthdate',
      html: '<span class="fa fa-birthday-cake"> </span>',
      contenuProfil: 'Date de naissance'
    },
    {
      tag: 'age',
      html: '<span class="fa fa-child"> </span>',
      contenuProfil: 'Age'
    },
    {
      tag: 'inscription',
      html: '<span class="fa fa-user-plus"> </span>',
      contenuProfil: 'Inscription'
    }];

  // Fonction qui supprime les :
  function remplacerLabel( txtLabel ){
    var nvTxt = txtLabel.replace(/:/i, '');
    // On renvoie le texte sans les :
    return nvTxt;
  }

  // On change les label par des icones
  function labelFontAwesome( txtLabel ){
    var newLabel;

    // On parcourt le tableau de tag
    for( var i = 0 ; i < tagLabel.length ; i++){
      // Si on trouve un tag correspondant
      if(txtLabel.indexOf(tagLabel[i].tag) != -1){
        // On récupére le nouveau code html correspondant
        newLabel = tagLabel[i].html;
        // On envoie le nouveau contenu du label
        return newLabel;
      }
    }
  }


  // On supprime les tag
  function labelProfil( txtLabel ){
    var newLabel;

    // On parcourt le tableau de tag
    for( var i = 0 ; i < tagLabel.length ; i++){
      // Si on trouve un tag correspondant
      if(txtLabel.indexOf(tagLabel[i].tag) != -1){
        // On récupére le wording correspondant
        newLabel = tagLabel[i].contenuProfil;
        // On envoie le nouveau contenu du label
        return newLabel;
      }
    }
  }


  // Au chargement de la page
  $(window).ready( function(){

    // Si on est dans un message
    if($(verifCibleMessage).length){
      // On parcourt chaque label
      $(cibleMessage).each( function(){
        var $label = $(this),
            // On récupére le contenu "texte" du label
            txtLabel = $label.text(),
            txtLabelModif;

            // On vérifie si le label contient un tag
            if(txtLabel.indexOf('[lbl-') != -1){
              // Si c'est le cas, on change le html pour le remplacer par un icon
              txtLabelModif = labelFontAwesome(txtLabel);
              // On remplace le code html du label par le nouveau
              $label.html(txtLabelModif);
            }else{
              // On exécute la fonction pour supprimer les :
              txtLabelModif = remplacerLabel(txtLabel);
              // On remplace le texte du label sans les :
              $label.text(txtLabelModif);
            }
       
      });
    }


    // Si on est sur une page "profil"
    if($(verifCibleProfil).length){
      // On parcourt chaque label
      $(cibleProfil).each( function(){
        var $label = $(this),
            // On récupére le contenu "texte" du label
            txtLabel = $label.text(),
            txtLabelModif;

            // On vérifie si le label contient un tag
            if(txtLabel.indexOf('[lbl-') != -1){
              // Si c'est le cas, on change le html pour supprimer le tag
              txtLabelModif = labelProfil(txtLabel);
              // On remplace le code html du label par le nouveau
              $label.html(txtLabelModif);
            }else{
              // On exécute la fonction pour supprimer les :
              txtLabelModif = remplacerLabel(txtLabel);
              // On remplace le texte du label sans les :
              $label.text(txtLabelModif);
            }
       
      });
    }

    // Si on est sur une page "Edition profil"
    if($(verifCibleEditionProfil).length){
      // On parcourt chaque label
      $(cibleEditionProfil).each( function(){
        var $label = $(this),
            // On récupére le contenu "texte" du label
            txtLabel = $label.text(),
            txtLabelModif;

            // On vérifie si le label contient un tag
            if(txtLabel.indexOf('[lbl-') != -1){
              // Si c'est le cas, on change le html pour supprimer le tag
              txtLabelModif = labelProfil(txtLabel);
              // On remplace le code html du label par le nouveau
              $label.html(txtLabelModif);
            }else{
              // On exécute la fonction pour supprimer les :
              txtLabelModif = remplacerLabel(txtLabel);
              // On remplace le texte du label sans les :
              $label.text(txtLabelModif);
            }
       
      });
    }

   

  });
 
})();

En gros, on fait 2 choses ici :
- Si le label contient un tag : on regarde le tag et on remplace le html du label avec celui définit dans le js ;
- Si le label ne contient pas de tag : dans ce cas, on supprime les ":".

Idea au moins 2 élements sont à changer :
• La version de ton forum : les valeurs possibles sont : phpbb2, phpbb3, punbb, invision, modernbb, awesomebb
Code:
var version = 'phpbb2';
• Les labels spécifiques (= ceux avec les tag) :
Code:
  // On définit les différents tag et par quoi on remplace les labels
  var tagLabel = [{
      tag: 'birthdate',
      html: '<span class="fa fa-birthday-cake"> </span>',
      contenuProfil: 'Date de naissance'
    },
    {
      tag: 'age',
      html: '<span class="fa fa-child"> </span>',
      contenuProfil: 'Age'
    },
    {
      tag: 'inscription',
      html: '<span class="fa fa-user-plus"> </span>',
      contenuProfil: 'Inscription'
    }];

tag = le tag que tu mets ici : [lbl-birthdate] ;
html = le html que tu veux afficher dans les messages (par exemple, une petite icon) ;
contenuProfil = le texte à afficher sur le profil d'un membre ou dans l'édition de celui-ci.




Et c'est tout Smile

Si tu rencontres un souci avec ce tutoriel, n'hésite pas à nous le dire et nous volerons à ton secours Razz



Flitzz
Flitzz
Pseudo Discord : TicTac
Messages : 772
http://sur-nos-ecrans.forumactif.com/

Modifier l'affichage des champs de profil Empty Re: Modifier l'affichage des champs de profil

Lun 3 Juin 2019 - 11:18
Miettes ah c'est sympa, un petit changement mais qui fait une différence.

mais tu nous as pas dit quel est le template à modifier.

merci
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Modifier l'affichage des champs de profil Empty Re: Modifier l'affichage des champs de profil

Lun 3 Juin 2019 - 14:19
Coucou Smile

Il n'y a pas de template à modifier pour une fois (sauf lors de la manip' pour installer Font Awesome mais c'est indiquer dans le tuto de FA Smile )

Pour éditer les profils, c'est dans : Panneau d’administration > Utilisateurs & groupes > Utilisateurs > Profils.
Flitzz
Flitzz
Pseudo Discord : TicTac
Messages : 772
http://sur-nos-ecrans.forumactif.com/

Modifier l'affichage des champs de profil Empty Re: Modifier l'affichage des champs de profil

Lun 3 Juin 2019 - 16:49
Re, ah D'accord

si seulement j'avais cliquer sur le lien du tuto de FA....

je suis un peu naze parfois.
merci M'dame
Yue
Yue
Messages : 114

Modifier l'affichage des champs de profil Empty Re: Modifier l'affichage des champs de profil

Sam 12 Oct 2019 - 17:57
Ce tuto je l'ai cherché TELLEMENT longtemps omg *A* Merciii d'avoir été ma lanterne ♥
Bon par contre c'est là où j'ai un soucis parce que ça marche pas mais ça doit être parce que j'ai mes templates modifiés. Le problème c'est que je ne trouve pas la solution moi-même malgré mes nombreuses tentatives :c
Je vais aller poster une demande d'aide dans le section adéquate !
Contenu sponsorisé

Modifier l'affichage des champs de profil Empty Re: Modifier l'affichage des champs de profil

Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses