Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Transformation des labels (champs de profil)

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

Résolu Transformation des labels (champs de profil)

Message par pinke le 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
avatar

pinke
****

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

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

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

Message par Miettes le Sam 13 Jan 2018 - 11:19

Hello Smile

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

Miettes
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par pinke le Sam 13 Jan 2018 - 14:08

Salut Smile Dans les messages What a Face
avatar

pinke
****

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

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

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

Message par pinke le 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
avatar

pinke
****

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

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

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

Message par pinke le Lun 15 Jan 2018 - 18:48

Petit UP I love you
avatar

pinke
****

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

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

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

Message par Miettes le 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 :


Je te laisse tester ^^
avatar

Miettes
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par pinke le 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
avatar

pinke
****

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

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

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

Message par Miettes le 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 ^^
avatar

Miettes
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par pinke le 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 ?
avatar

pinke
****

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

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

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

Message par Miettes le 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{
   
}
avatar

Miettes
****

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

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

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

Message par pinke le Sam 20 Jan 2018 - 7:19

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

pinke
****

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

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

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

Message par Chacha le Sam 20 Jan 2018 - 9:32

@pinke a écrit:Et bien c’est parfait, merci beaucoup pour ton aide Smile 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
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 56981
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


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