Transformation des labels (champs de profil)

[foxies]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://keepingyourheadup.forumactif.com

Description du problème

Bonjour, je cherche à transformer les labels présents dans les champs de profil lorsque des messages sont postés. La première chose que je cherche à faire est de supprimer les ":" qui s'affichent après l'intitulé de chaque label. J'ai essayé d'utiliser le code JS présent dans ce sujet mais ça ne fonctionne pas. Ensuite, à la place des labels sous forme de texte, je voudrais savoir s'il est possible de les remplacer par des icons en provenance de FontAwesome de préférence qui est d'ailleurs déjà installé sur mon forum.

Merci d'avance pour vos réponses

[Miettes]

Hello

Tu parles des champs de profil dans les messages ? Ou dans l'édition du profil ?

[foxies]

Salut Dans les messages

[foxies]

Bonjour, j'ai changé le titre de mon post et rajouté une précision sur ce que je recherche

[foxies]

Petit UP

[Miettes]

Coucou

Alors, c'est parti ^^

Tout d'abord, tu vas devoir éditer les labels des profils que tu veux personnaliser en y ajoutant un "tag". Par exemple, sur mon forum de test, j'en ai changé 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]

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

----

Ensuite, on va créer un nouveau javascript qu'on va afficher uniquement dans les sujets. Voilà le JS commenté :

Code:

; (function(){

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

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

  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;
      }
    }
  }

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

    // On parcourt chaque label
    $('.postdetails.poster-profile .label').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
            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);
          }
     
    });

  });
 
})();

En gros, on fait 2 choses :
- Si le label contient un tag : on regarde le tag et on remplace le html du label pour avoir une classe CSS a cibler
- Si le label ne contient pas de tag : dans ce cas, on supprime les ":"

-----

Comme tu as déjà installé fontAwesome sur ton forum, je ne m'attarde pas dessus

Voilà un exemple de rendu :


Je te laisse tester ^^

[foxies]

Coucou ! Merci beaucoup mais malheureusement le code ne fonctionne pas chez moi (que ce soit au niveau de la suppression des ":" ou du remplacement du texte par un icon). Je m'y suis sans doute mal prise quelque part si ça marche de ton côté mais je ne vois pas où...

[Miettes]

Coucou

Comme tu as changé la structure de base du template, il va falloir adapter le javascript (j'étais partie sur le template par défaut). Du coup, au lieu d'avoir ça dans le js :

Code:

// On parcourt chaque label
$('.postdetails.poster-profile .label').each( function(){

On aura ;

Code:

// On parcourt chaque label
$('.boxPOST .prflPOST .abtPOST .label').each( function(){

Et je pense que là, ça devrait fonctionner ^^

[foxies]

Merci, ça marche très bien comme ça Par contre, j'ai une dernière question : la taille de l'icon est trop petite (je pense qu'elle s'adapte à la taille du texte ?), y a-t-il moyen de l'agrandir et existe-t-il également une solution pour changer sa couleur ?

[Miettes]

Coucou

ici, ça va etre facile, tout se fait en CSS ^^

Si tu veux cibler toutes les icones :

Code:

.label .fa {
   
}

Si tu veux cibler une icone en particulier, il te suffit d'y ajouter sa classe, par exemple :

Code:

.label .fa.fa-child{
   
}

[foxies]

Et bien c’est parfait, merci beaucoup pour ton aide Bon week-end !

[Chacha]

Et bien c’est parfait, merci beaucoup pour ton aide Bon week-end !

Bonjour, Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à : éditer votre premier message, cocher l'icône résolu et enregistrer Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton