Transformation des labels (champs de profil)

3 participants

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

Résolu Transformation des labels (champs de profil)

Message par foxies Sam 13 Jan 2018 - 9:54

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 Smile


Dernière édition par pinke le Dim 14 Jan 2018 - 17:51, édité 3 fois
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par Miettes Sam 13 Jan 2018 - 11:19

Hello Smile

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

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par foxies Sam 13 Jan 2018 - 14:08

Salut Smile Dans les messages What a Face
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par foxies Dim 14 Jan 2018 - 17:51

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

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par foxies Lun 15 Jan 2018 - 18:48

Petit UP I love you
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par Miettes Mar 16 Jan 2018 - 10:26

Coucou Smile

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]

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

----

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 Smile

Voilà un exemple de rendu :
profil - Transformation des labels (champs de profil) Visuel10

Je te laisse tester ^^
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par foxies Mar 16 Jan 2018 - 18:58

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ù... Confused
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par Miettes Mar 16 Jan 2018 - 22:01

Coucou Smile

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 ^^
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par foxies Jeu 18 Jan 2018 - 9:10

Merci, ça marche très bien comme ça Smile Par contre, j'ai une dernière question Razz : 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 ?
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par Miettes Jeu 18 Jan 2018 - 10:29

Coucou Smile

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{
   
}
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par foxies Sam 20 Jan 2018 - 7:19

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

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation des labels (champs de profil)

Message par Chacha Sam 20 Jan 2018 - 9:32

pinke a écrit:Et bien c’est parfait, merci beaucoup pour ton aide Smile Bon week-end !
profil - Transformation des labels (champs de profil) MHDoUixBonjour,

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 profil - Transformation des labels (champs de profil) UsrblLM
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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