[Aide Codage] Soucis avec le tuto des profils avec Font Awesome

Je remets le lien du forum :


quand tu parles de lien de profil, c'est quand je suis sur le profil d'un membre ou dans un message ? (je n'ai pas vu ces infos dans les messages )

Oui en effet je parle de l'affiche des profils dans les messages !
Je vais te faire un petit screen, ça sera plus parlant /o/

Spoiler:

Ce sont eux que j'aimerai changer en icon comme pour le reste du profil. A savoir que j'ai ajouté d'autres liens en plus de "mp" qui permettront aux membres de se rendre sur la fiche de présentation, la fiche de relations, etc. (tout le nécessaire pour faciliter les choses). Actuellement, ils sont représentés par un image à l'apparence d'icon mais je trouve le rendu pas top... (le bug est normal sur le screen, c'est une tentative infructueuse de ma part que j'ai pas changé encore xD)

Bon

On va devoir faire 2 choses :
1) ajouter le petit picto (en css)
2) supprimer les images (en css)

On y va du coup


On va donc créer un js qu'on va appeler sur toutes les pages. Ce js va contenir ceci :

Code:


$(function(){

  var iconLien = [
    // Envoyer un MP
    {
      image: 'https://2img.net/zupimages.net/up/19/23/fwoy.png',
      icon: '<i class="fas fa-envelope-open-text"></i>'
    },
    // Premier lien
    {
      image: '',
      icon: '<i class="fas fa-globe-europe"></i>'
    },
    // Second lien
    {
      image: 'https://zupimages.net/up/19/23/xhlu.png',
      icon: '<i class="fas fa-chess-queen"></i>'
    }
  ];

  // Si on est sur un message
  if($('.post-body').length ){
    // On parcourt le tableau
    for(var i = 0; i < iconLien.length ; i++ ){
      // On ajoute l'icon
      $('.post-body').find('img[src="'+ iconLien[i].image +'"]').parent().append(iconLien[i].icon);
      // On supprime l'image
      $('.post-body').find('img[src="'+ iconLien[i].image +'"]').remove();
    }
  }

});


Il nous suffira ensuite de faire un peu de CSS

Je te laisse tester ?

Tu trouveras les codes à copier quand tu cliques sur une icon. Par exemple

Mercii !
J'ai ajouté le JS, bizarrement à la première validation ça marchait et puis là, plus rien ! (y compris les icons sous l'avatar ajoutés précédent qui fonctionnent plus)
Au cas où, voilà comment j'ai modif le JS des liens (normalement tout devrait être bon) :

Code:

$(function(){

  var iconLien = [
    // Envoyer un MP
    {
      image: 'https://2img.net/zupimages.net/up/19/23/fwoy.png',
      icon: '<i class="fas fa-paper-plane"></i>'
    },
    // Premier lien
    {
      image: 'https://zupimages.net/up/19/23/n7c3.png',
      icon: '<i class="fas fa-user-circle"></i>'
    },
    // Second lien
        {
      image: 'https://zupimages.net/up/19/23/xhlu.png',
      icon: '<i class="fas fa-file-alt"></i>'
    }
     // Trosieme lien
    {
      image: 'https://zupimages.net/up/19/23/mw56.png',
      icon: '<i class="fas fa-book"></i>'
    }
     // Quatrieme lien
    {
      image: 'https://zupimages.net/up/19/23/npfj.png',
      icon: '<i class="fas fa-link"></i>'
    }

  ];

  // Si on est sur un message
  if($('.post-body').length ){
    // On parcourt le tableau
    for(var i = 0; i < iconLien.length ; i++ ){
      // On ajoute l'icon
      $('.post-body').find('img[src="'+ iconLien[i].image +'"]').parent().append(iconLien[i].icon);
      // On supprime l'image
      $('.post-body').find('img[src="'+ iconLien[i].image +'"]').remove();
    }
  }

});

EDIT. Le menu s'est remis à ne plus fonctionner, par contre à l'inverse un JS qui ne fonctionnait pas (permettant d'avoir la couleur du groupe sur le pseudo du membre sur l'index dans les derniers messages) fonctionne maintenant °°
Je trouve le JS fabuleux, mais franchement cet art m'échappe °A°

Coucou

En fait, il manque juste des virgules entre chaque accolade :

Code:

$(function(){

  var iconLien = [
    // Envoyer un MP
    {
      image: 'https://2img.net/zupimages.net/up/19/23/fwoy.png',
      icon: '<i class="fas fa-paper-plane"></i>'
    },
    // Premier lien
    {
      image: 'https://zupimages.net/up/19/23/n7c3.png',
      icon: '<i class="fas fa-user-circle"></i>'
    },
    // Second lien
        {
      image: 'https://zupimages.net/up/19/23/xhlu.png',
      icon: '<i class="fas fa-file-alt"></i>'
    },
    // Trosieme lien
    {
      image: 'https://zupimages.net/up/19/23/mw56.png',
      icon: '<i class="fas fa-book"></i>'
    },
    // Quatrieme lien
    {
      image: 'https://zupimages.net/up/19/23/npfj.png',
      icon: '<i class="fas fa-link"></i>'
    }

  ];

  // Si on est sur un message
  if($('.post-body').length ){
    // On parcourt le tableau
    for(var i = 0; i < iconLien.length ; i++ ){
      // On ajoute l'icon
      $('.post-body').find('img[src="'+ iconLien[i].image +'"]').parent().append(iconLien[i].icon);
      // On supprime l'image
      $('.post-body').find('img[src="'+ iconLien[i].image +'"]').remove();
    }
  }

});

là ça devrait fonctionner

Étrangement ça ne change absolument rien, c'est bizarre °°

EDIT. Omg autant pour moi, j'avais mal copié la fin du code D8 CA MARCHE NICKEL ** Merciiii

Est-il possible d'ajouter des titles à aux icons F-Aw ? (De sorte à ce que lorsque la souris se met dessus, le texte choisi s'affiche.)

Coucou

Ah je me disais bien que c'était bizarre que ça ne marche pas

Hum... Pour le coup, on va devoir remplacer celui dans les liens je pense ^^

Voilà le JS modifié du coup.

Code:

$(function(){

  var iconLien = [
    // Envoyer un MP
    {
      image: 'https://2img.net/zupimages.net/up/19/23/fwoy.png',
      icon: '<i class="fas fa-paper-plane"></i>',
      title: 'Icone 1'
    },
    // Premier lien
    {
      image: 'https://zupimages.net/up/19/23/n7c3.png',
      icon: '<i class="fas fa-user-circle"></i>',
      title: 'Icone 2'
    },
    // Second lien
        {
      image: 'https://zupimages.net/up/19/23/xhlu.png',
      icon: '<i class="fas fa-file-alt"></i>',
      title: 'Icone 3'
    },
    // Troisieme lien
    {
      image: 'https://zupimages.net/up/19/23/mw56.png',
      icon: '<i class="fas fa-book"></i>',
      title: 'Icone 4'
    },
    // Quatrieme lien
    {
      image: 'https://zupimages.net/up/19/23/npfj.png',
      icon: '<i class="fas fa-link"></i>',
      title: 'Icone 5'
    }

  ];

  // Si on est sur un message
  if($('.post-body').length ){
    // On parcourt le tableau
    for(var i = 0; i < iconLien.length ; i++ ){
      // On ajoute l'icon
      $('.post-body').find('img[src="'+ iconLien[i].image +'"]').parent().append(iconLien[i].icon);
      // On change le title du lien
      $('.post-body').find('img[src="'+ iconLien[i].image +'"]').parent().attr('title', iconLien[i].title);
      // On supprime l'image
      $('.post-body').find('img[src="'+ iconLien[i].image +'"]').remove();
    }
  }

});

J'ai ajouté pour chaque icone un champs "title". Si tu dois y mettre des apostrophe ' il faut les échapper, c'est-à-dire ajouter un anti-slash \ avant celui-ci pour éviter les bug. Par exemple :
[code]title: 'Ouvrir l\'inventaire'[/b]

Je te laisse tester ?

Ohlala, c'est génial c'est tout simple et c'est exactement ce que je voulais merci **
Si j'applique le même principe pour les icons sous l'avatar (donc suivant le code JS se basant sur le LS), ça marcherait aussi ?
Si oui, je me tenterai de faire les modifs (et si je casse tout je viendrais t'appeler au secours xD)

Coucou

Eh bien figure toi que ça va même etre plus simple Ici, nous avions du ajouter un bout de js parce que l'icon était entouré d'un lien qui avait une petite infobulle.

En revanche, dans les profils, pas de lien, juste l'icon Du coup, dans ton js, on va juste ajouter des "title" sur les icones, ce qui donnerait par exemple :

Code:

var tagLabel = [{
      tag: 'birthdate',
      html: '<span class="fab fa-birthday-cake" title="Date de naissance"> </span>',
      contenuProfil: 'Date de naissance'
    },
    {
      tag: 'age',
      html: '<span class="fab fa-child" title="Age"> </span>',
      contenuProfil: 'Age'
    },
    {
      tag: 'inscription',
      html: '<span class="fab fa-user-plus" title="Inscription"> </span>',
      contenuProfil: 'Inscription'
    }];

et ça devrait faire ce que tu voudrais

C'est parfait ** Qu'est-ce que j'aime quand c'est simple et que ça marche du premier coup
Merci beaucoup Miettes pour toute ton aide !

J'aurais encore besoin de tes lumières pour des petites choses par-ci par-là sur le fow, je reposterai à la suite (là j'ai pas le temps de m'en occuper )

Merci encore o/
(Et HS mais je trouve pas l'endroit où se trouve les logos et la fiche de pub du fow pour vous ajouter sur le mien en guise de remerciement. Tu pourrais me dire où cela se trouve ? xD)

Coucou

Ah génial ^^

Je pense que le plus simple sera d'ouvrir un nouveau sujet pour tes autres petits problèmes non ?

Pour notre fiche et nos logos, tu les trouveras ici Merci pour le coup de pouce :p

Coucou ! o/

AH oui tu as raison, je fais faire un nouveau post pour que ça soit plus propre !

Mercii pouur le lien, comme quoi j'ai mal cherché xD Par contre je sais pas pourquoi, la fiche de pub ne veut pas s'afficher :

Hello

Le souci avec l'iframe c'est parce que ton forum est en https. Tu as une explication ici.

Malheureusement, aucune solution n'est proposée (enfin... il n'y a juste rien à faire pour régler le problème). Si tu le désires, je peux te transmettre le contenue de l'iframe à afficher

Oh misère, ça va être une galère sans nom pour les partenariats... D8 Et FA qui a l'air de pas tellement se soucier de la problématique de ce que j'ai lu...

Oui je veux bien stp ! A défaut d'une meilleure solution, je ferais comme ça à l'avenir °^°

Coucou

Eh voilà :

Code:

<style>.pub-tambouille{background:#f2eacb;box-shadow:0 1px 6px rgba(0,0,0,.06);color:#444;font:normal 14px/18px Bitter,serif;margin:auto;overflow:hidden;width:96%}.pub-tambouille .content-pub{padding:0 2% 5%}.pub-tambouille .content-pub p{font:normal 14px/18px Bitter,serif;margin:0;padding:0}.pub-tambouille .content-pub .fin-pub{margin-top:30px}.pub-tambouille .content-pub .fin-pub .sign-fin{text-align:right}.pub-tambouille .header{align-items:center;background:url(http://pvereecken.fr/tambouille/bann-tambouille.png) no-repeat center top;background-size:auto 100%;display:flex;height:200px;margin:0;width:100%}.pub-tambouille .header .bloc-titre{color:#e67466;font-size:16px;margin-left:2%;width:45%}.pub-tambouille .header .titre-pub{font-size:18px;font-weight:700;margin-bottom:6px}.pub-tambouille .content-pub a{color:#e67466!important;text-decoration:none!important}.pub-tambouille .content-pub a:hover{color:#bd9262!important}.pub-tambouille .content-pub .forum-link{font-size:14px;margin-top:30px;text-align:center}.pub-tambouille .content-pub .forum-link a img{max-width:100%}.pub-tambouille .maj{color:#e67466;font-size:12px;margin:2% 0 0 2%;line-height:15px}.pub-tambouille .content-pub .h3,.pub-tambouille .content-pub .titre1{color:#e67466;font-size:24px;font-weight:700;line-height:30px;margin:15px auto;padding-bottom:5px;position:relative}.pub-tambouille .content-pub .h3::after,.pub-tambouille .content-pub .titre1::after{position:absolute;bottom:0;left:0;width:20px;height:3px;content:"";background:#e67466}.pub-tambouille .content-pub .titre2{color:#bd9262;font-size:16px;font-weight:700;line-height:20px;margin:15px auto;padding-bottom:5px;position:relative}.pub-tambouille .content-pub .titre2::after{position:absolute;bottom:0;left:0;width:10px;height:1px;content:'';background:#bd9262}.pub-tambouille .content-pub .titre3{color:#bd9262;font-size:16px;font-weight:700;line-height:20px;margin:15px auto;padding-bottom:5px}.pub-tambouille .content-pub .titre3:before{display:inline-block;content:"►";font-size:12px;padding-right:4px}.pub-tambouille .content-pub .infos-contenus{display:flex;background:url(https://2img.net/s/t/21/36/22/i_back_title.png);flex-wrap:wrap;padding:8px 0}.pub-tambouille .content-pub .infos-contenus>div{flex:0 0 33%;margin:5px 0;text-align:center}.pub-tambouille .content-pub .infos-contenus .big{display:block;font-size:20px;font-weight:700}.pub-tambouille .content-pub .infos-contenus .singulier .pluriel{display:none}.pub-tambouille .content-pub .infos-contenus a{display:block;font-size:12px}.pub-tambouille .content-pub .staff{text-align:center}.pub-tambouille .content-pub .staff .raleuse{display:inline-block;border-radius:80px;color:#573217!important;font-size:14px;font-weight:700;overflow:hidden;position:relative;width:80px;height:80px;-webkit-transition:-webkit-transform .8s ease-in-out;-ms-transition:-ms-transform .8s ease-in-out;transition:transform .8s ease-in-out}.pub-tambouille .content-pub .staff .raleuse .pseudo{align-items:center;background:rgba(219,200,164,.8);display:flex;justify-content:center;left:0;opacity:0;position:absolute;top:0;width:80px;height:80px;transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);-webkit-transition:opacity .8s ease-in-out;-ms-transition:opacity .8s ease-in-out;transition:opacity .8s ease-in-out}.pub-tambouille .content-pub .staff .raleuse:hover{transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);-webkit-transition:-webkit-transform .8s ease-in-out;-ms-transition:-ms-transform .8s ease-in-out;transition:transform .8s ease-in-out}.pub-tambouille .content-pub .staff .raleuse:hover .pseudo{opacity:1;-webkit-transition:opacity .8s ease-in-out;-ms-transition:opacity .8s ease-in-out;transition:opacity .8s ease-in-out}.pub-tambouille .footer{align-items:center;background-color:#f0e9d8;box-shadow:0 0 3px rgba(219,200,164,.9);display:flex;min-height:40px;justify-content:space-around}.pub-tambouille .footer a{border-radius:3px;color:#e1714f;display:inline-block;padding:6px;text-decoration:none}.pub-tambouille .footer a:hover{background-color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.06);color:#000}</style>
<div class="pub-tambouille"><!--
  --><div class="header"></div><!--
  --><div class="content-pub"><!--
    --><p>Le but de ce forum n'est pas d'avoir des stats' de folie. Nous avons juste envie d'avoir un endroit où <strong>tout le monde</strong> est libre de <strong>partager</strong> ses astuces/tutoriels qu'il s'agisse de <strong>codage</strong> (pour forum, html, css), de <strong>gestion de forum</strong> (organisation, comment le promouvoir et le gérer) ou encore d'<strong>animation</strong>. Tu trouveras également dans notre tambouille de petites choses en <strong>libre-service</strong>.<br>
    Le but de <em>La tambouille des râleuses</em> étant le partage, nous te proposons également des <strong>formations</strong> en codage, modération, administration, analyse et animation.<br>
    Tout est <strong>ouvert aux invités</strong> (exceptées les formations). Mais si tu rencontres un souci avec un tutoriel ou un élément en libre-service, il faudra t'inscrire et te présenter pour que nous puissions accourir à ton secours.</p><!--
     
    --><div id="ressources"><div class="h3">Tu trouveras sur le forum :</div>
<div class="infos-contenus"><!--
  --><div><!--
    --><span class="big" data-affinfo="tuto-fa">50</span>
  Tutoriel<span class="pluriel">s</span> Codage FA
    <a href="http://tambouille-raleuses.forumactif.com/f4-fa" target="_blank">► Voir la section</a><!--
  --></div><!--
  --><div><!--
    --><span class="big" data-affinfo="tuto-html">27</span>
    Tutoriel<span class="pluriel">s</span> HTML/CSS
    <a href="http://tambouille-raleuses.forumactif.com/f5-html-css" target="_blank">► Voir la section</a><!--
  --></div><!--
  --><div><!--
    --><span class="big" data-affinfo="tuto-gestion">18</span>
    Tutoriel<span class="pluriel">s</span> gestion FA
    <a href="http://tambouille-raleuses.forumactif.com/f23-gestion-orga-fa" target="_blank">► Voir la section</a><!--
  --></div><!--
    --><div><!--
    --><span class="big" data-affinfo="tuto-animation">12</span>
    Conseil<span class="pluriel">s</span> d'animation
    <a href="http://tambouille-raleuses.forumactif.com/f24-animation" target="_blank">► Voir la section</a><!--
  --></div><!--
  --><div><!--
    --><span class="big" data-affinfo="ls-codage">36</span>
    Code<span class="pluriel">s</span> en Libre-service
    <a href="http://tambouille-raleuses.forumactif.com/f3-codage" target="_blank">► Voir la section</a><!--
  --></div><!--
  --><div><!--
    --><span class="big" data-affinfo="ls-animation">48</span>
    Animation<span class="pluriel">s</span> en Libre-service
    <a href="http://tambouille-raleuses.forumactif.com/f28-animation" target="_blank">► Voir la section</a><!--
  --></div><!--
--></div></div><!-- 

    --><div class="titre1">Les râleuses</div><!--
  --><div class="staff"><!--
      --><a href="http://tambouille-raleuses.forumactif.com/u1" class="raleuse"><img src="https://2img.net/u/4014/30/77/56/avatars/1-74.png" alt="Miettes"><span class="pseudo">Miettes</span></a> 
      <a href="http://tambouille-raleuses.forumactif.com/u2" class="raleuse"><img src="https://nsm09.casimages.com/img/2019/08/21//19082108284215156416369802.png" alt="Mäven"><span class="pseudo">Mäven</span></a><!--
    --></div><!--

    --><div class="titre1">Nos statistiques</div><!--
  --><p>Le forum a ouvert ses portes le <strong>30 mars 2019</strong>.</p><!--
      --><p>A l'époque, seules <a href="http://tambouille-raleuses.forumactif.com/u1" style="color:#9b59b6; font-weight: bold;">Miettes</a> et  <a href="http://tambouille-raleuses.forumactif.com/u2" style="color:#9b59b6; font-weight: bold;">Mäven</a> y étaient présentes. A présent, il y a <strong><span class="FORUMCOUNTUSER"></span> Tambouilleurs</strong> sur le forum. La dernière personne a nous avoir rejoint est <strong class="FORUMLASTUSER"></strong>.</p><!--
      --><p>D'ailleurs, les <i>Tambouilleurs</i> sont plutôt bavards. Eh oui, ils ont déjà posté <strong><span class="FORUMCOUNTPOST"></span> messages</strong> dont <strong><span data-info="nb-tutos">107</span> tutoriels</strong> et <strong><span data-info="nb-ls">85</span> bidules en Libre-service</strong>.</p><!--

    --><div class="fin-pub"><!--
      --><p>Besoin d'un coup de pouce ? Viens donc jeter un oeil à notre tambouille ; qui sait, tu y trouveras peut-être ton bonheur...</p><!--

      --><p class="sign-fin">Les Râleuses</p><!--
    --></div><!--

    --><div class="forum-link"><a href="http://tambouille-raleuses.forumactif.com" target="_blank">http://tambouille-raleuses.forumactif.com</a><br>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="https://i.servimg.com/u/f71/20/05/19/39/468x6010.png" alt="Mini-bannière 468x60 - La Tambouille des Râleuses"></a></div><!--
  --></div><!--
  --><div class="footer"><!--
    --><a href="http://tambouille-raleuses.forumactif.com/t5-quel-est-le-but-de-ce-forum" target="_blank">Le but du forum</a><a href="http://tambouille-raleuses.forumactif.com/t6-panneau-d-affichage-public" target="_blank">Messages des visiteurs</a><a href="https://discord.gg/9dKV82w" target="_blank">Discord</a><a href="http://tambouille-raleuses.forumactif.com/register" target="_blank">Rejoins-nous</a><!--
  --></div><!--
--></div>

Bon par contre, les chiffres ne se mettront pas à jour tout seul

Miettes a écrit:Hello

Le souci avec l'iframe c'est parce que ton forum est en https. Tu as une explication ici.

Malheureusement, aucune solution n'est proposée (enfin... il n'y a juste rien à faire pour régler le problème). Si tu le désires, je peux te transmettre le contenue de l'iframe à afficher

Sinon la solution est de passer son forum gratuitement en HTTPS :
https://forum.forumactif.com/t401153-le-certificat-ssl-desormais-gratuit-pour-tous-les-forums-forumactif#3347909

Coucou

C'est volontaire de notre part de ne pas passer le forum en https De 1, ça n'a pas de réel intérêt pour les forums et de 2 on appelle certaines ressources externes de site qui ne sont pas en https

Sujet mis à jour avec la fiche du fow /o/ La partie des partenaires est ouverte aux invités donc au besoin, faut pas hésiter à poster vos news ou autre comme ça je mettrais à jour votre fiche au besoin (à défaut de mieux °^°)

Mercii ! Je pense que l'on peut archiver ce sujet !

super

du coup, je classe ^^

Merci pour la mise en avant ^^