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

Helloow !

Comme dit précédemment, je viens vous appelez à l'aide pour un codage que j'ai trouvé sur le fow !  

Mon soucis est avec ce tuto :  Modifier l'affichage des champs de profil
Mon fow est en AwesomeBB.

J'ai suivi le tuto à la lettre et il semble que Font Awesome soit bien installé sur mon fow car les icons s'affichent dans les messages, mais hélas rien ne se passe dans les profils. Je pense que le soucis vient du fait que j'ai modifié les templates et donc que le lien ne se fasse pas entre le Java et les templates.

Je mets le lien de mon fow en hide car il est en  construction et je préfère ne pas trop en dévoiler :

Mon Java est le même que sur le tuto, j'ai juste fait la modif pour que ça soit bien en AwesomeBB.

Voici le template viewtopic_body (j'espère que c'est pas trop le bazar D8) :


Vous faut-il d'autres templates ?

Merci mille fois aux lumières qui pourront m'aider
Yue

Hello !
Alors, j'ai suivi le tuto et coller ton template (sans le regarder) et de mon coté ça fonctionne :

Malheureusement tout est fermé sur ton forum je ne peux pas du tout voir s'il y a un souci avec le js ou pas :/

Par contre, as-tu bien suivi la partie du tutoriel "Paramètrage du profil" ?

Si oui, peux-tu me montrer ton overall-header ?

Mercii pour ta réponse utltra rapide **

Ah mince oui... Je sais pas si ça peut aider mais j'ai mis un post dans la partie accessible aux invités pour montrer le résultat que j'obtiens (voir pour Nesmeri) :

Il me semble que j'ai bien suivi cette partie mais je me suis peut être plantée sans le savoir xD

Voici le template overall-header :

Re-coucou !

Alors, ton script n'est pas pris en compte, j'ai l'impression qu'il n'est pas appelé sur la page.

Tu peux me le montrer et me dire ce que tu as coché pour l'application ?

Ah décidément on en sort pas xD

Le voici :

Code:

; (function(){

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

  // 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="fab fa-birthday-cake"> </span>',
      contenuProfil: 'Date de naissance'
    },
    {
      tag: 'age',
      html: '<span class="fab fa-child"> </span>',
      contenuProfil: 'Age'
    },
    {
      tag: 'inscription',
      html: '<span class="fab 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);
            }
      
      });
    }

  

  });
 
})();

J'ai coché "sur toutes les pages".

Coucou

Bon, il y a beaucoup de problème js sur ton forum :/

Tu appelles des ressources externes ?

Par exemple, celle-ci https://greatdivide.b1.jcink.com/uploads/greatdivide/styletooltips.js c'est toi qui l'a ajouté ? (elle déclenche une erreur javascript. Il faut savoir que dès que le navigateur a un souci avec script, il ne va meme pas prendre la peine de lire les suivants :/)

Arf je l'ignorai D8 (le JS m'échappe encore pas mal) Au moins j'apprends des choses importantes avec mes gaffes xD

Je ne sais pas trop à vrai dire, j'ai suivi des tutos pour AwesomeBB sur d'autres fows (certains ne marchant pas sur mon fow justement) donc je ne sais pas lequel est la cause orginale du soucis... Le nom de la source que tu cites me fait penser à un JS permettant de lire en entier le titre des derniers messages dans une tooltip.

Le voici au cas où :

Code:

$(document).ready(function(){
  $('.my-tooltip').tooltipster();
});

J'ignore si c'est lui la cause de ce bazar ?

Coucou

Est-ce que, justement, tu peux commenter le code que tu viens de nous donner ?

C'est à dire, dans le js, remplacer ça :

Code:

$(document).ready(function(){
  $('.my-tooltip').tooltipster();
});

par ça

Code:

/*$(document).ready(function(){
  $('.my-tooltip').tooltipster();
});*/

on va essayer de "cacher" les problèmes un à un pour trouver celui qui nous dérange

Je viens de changer le code comme demandé !

Et il y a eu un changement dans le profil justement (donc par rapport à Font Awesome) :
Dans le profil de Nesmeri, pour l'âge, il y a maintenant un petit carré.

EDIT. Aloors ça marche dans le profil dans les messages où j'ai bien l'icon (merciiiii), mais étonnement ça marche pas dans l'affichage des profils quand on clique sur le pseudo. J'ai "Age [lbl-age] :" pour le champs de l'âge par exemple éè

Coucou

Tu aurais un compte de test à nous passer pour qu'on puisse voir un profil ? (je pense qu'il doit y avoir un couac en js, mais sans y avoir accès, ça va etre compliqué de t'aider). Sinon, je peux créer un compte qu'on supprimera une fois l'aide finie ?

Coucouu !

Oui j'ai un compte qui sera un compte modération une fois le fow ouvert, je t'envoie les codes par mp !
Vraiment merci du temps que vous me consacrez toutes les 2, j'ai rarement vu ça sur des fow d'entre-aide et ça me sauve

Coucou

Alors, du coup, on a aussi un souci de js ici :/ est-ce que ça te parle d'avoir ajouté ça :

Code:

$("[title]").style_my_tooltips({

quelque part dans un template ?

Si oui, essaie de remplacer tout ça :

Code:

(function($) {
                $(document).ready(function() {
                    $("[title]").style_my_tooltips({
                        tip_follows_cursor: true,
                        tip_delay_time: 0,
                        tip_fade_speed: 300
                    });
                });
            }
            )(jQuery);

par ça :

Code:

/*(function($) {
                $(document).ready(function() {
                    $("[title]").style_my_tooltips({
                        tip_follows_cursor: true,
                        tip_delay_time: 0,
                        tip_fade_speed: 300
                    });
                });
            }
            )(jQuery);*/

On essaiera de régler tous ces soucis après

(et pas de souci pour l'aide, c'est le but des forums d'entraide logiquement ^^ )

En effet j'ai retrouvé ce JS dans le template overall_header ! J'ai fait la modif o/

Bon le souci ne venait pas de là

tu as beaucoup personnalisé l'affichage des profils je pense. On va donc devoir modifier mon js

Les modifications vont avoir lieu ici :

Code:

 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;

Pour commencer, on va remplacer ça :

Code:

verifCibleProfil = '#profile-tab-field-profil';

par ça

Code:

verifCibleProfil = '#profile';

et ça

Code:

cibleProfil = '#profile-tab-field-profil > dl > dt';

par ça

Code:

cibleProfil = '#profile .block-dl-default > dt';

Je te laisse tester ?

Oh ça marche super **

Ah génial

Tu veux qu'on essaie de régler les trucs qui posaient problème ? ce truc : my-tooltip c'est pour afficher une infobulle a quel endroit ? tu sais nous mettre le js complet ici ?

Merci beaucoup ! /o/

Oui si possible j'aimerai bien pouvoir régler les soucis que tu as détecté !
Le truc c'est que je suis plus certaine... Je pensais à la base que c'était dû à un JS récemment ajouté dans la partie JS (une infobulle pour voir les derniers messages au complet) mais je ne sais pas si c'est bien ça..

Tu souhaites le JS de tout ce que j'ai ajouté dans la section JS du panneau d'admin, ou le JS complet du template overall_header où je l'ai retrouvé ?

le js du template ça serait top

Oki le voici :

Code:

<script>
/*(function($) {
                $(document).ready(function() {
                    $("[title]").style_my_tooltips({
                        tip_follows_cursor: true,
                        tip_delay_time: 0,
                        tip_fade_speed: 300
                    });
                });
            }
            )(jQuery);*/

jQuery(document).ready(function($) {
 
 $(".scroll").click(function(event){
 event.preventDefault();
 $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
 });
});
</script>

Du coup, on va essayer de suivre de nouveau ce tuto :
http://manos.malihu.gr/style-my-tooltips-jquery-plugin/


Pour commencer, on nous dit d'extraire la CSS et de l'appeler comme ça

Code:

<link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />

sur FA, on ne peut pas, du coup, on va directement aller coller dans la CSS du forum ceci :

Code:

/* style-my-tootltips plugin, tooltip styling */
#s-m-t-tooltip{
   /* basic */
   max-width:300px;
   z-index:10;
   margin:24px 14px 7px 12px;
   /* style and design */
   padding:8px;
   background:#222; /* fallback if rgba not supported */
   background:rgba(0,0,0,0.8);
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   border-radius:3px;
   -moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
   -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
   box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
   /* font */
   font-family:Verdana,Geneva,sans-serif;
   font-size:11px;
   line-height:16px;
   color:#fff;
}

Le javascript ensuite. on nous dit de copier ça :

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.style-my-tooltips.js"></script>

Ici, pas besoin d'appeler la bibliothèque jQuery (FA le fait par défaut) et pour le second, on va créer un nouveau javascript dans les modules et on va afficher celui-ci sur toutes les pages :

Code:

//style-my-tootltips by malihu (http://manos.malihu.gr)
//plugin home http://manos.malihu.gr/style-my-tooltips-jquery-plugin
(function($) {
    var methods = {
        init: function(options) {
            var defaults = {
                tip_follows_cursor: false, //tooltip follows cursor: boolean
                tip_delay_time: 700, //tooltip delay before displaying: milliseconds
                tip_fade_speed: 300, //tooltip fade in/out speed: milliseconds
                attribute: "title" //tooltip text come from this attribute
            },
                options = $.extend(defaults, options);
            if ($("#s-m-t-tooltip").length === 0) {
                $("body").append("<div id='s-m-t-tooltip'><div></div></div>");
            }
            var smtTooltip = $("#s-m-t-tooltip");
            smtTooltip.css({
                "position": "absolute",
                "display": "none"
            }).data("smt-z-index", smtTooltip.css("z-index")).children("div").css({
                "width": "100%",
                "height": "100%"
            });

            function smtGetCursorCoords(event) {
                var smtCursorCoordsX = event.pageX,
                    smtCursorCoordsY = event.pageY;
                smtTooltip.style_my_tooltips("position", {
                    smtCursorCoordsX: smtCursorCoordsX,
                    smtCursorCoordsY: smtCursorCoordsY
                });
            }
            $(document).on("mouseout mousedown click", ".smt-current-element", function() {
                var $this = $(this);
                clearTimeout(smtTooltip_delay);
                smtTooltip.style_my_tooltips("hide", {
                    speed: $this.data("smt-fade-speed")
                });
                $(document).unbind("mousemove");
                $this.removeClass("smt-current-element");
                if ($this.attr(options.attribute) === "") {
                    $this.attr(options.attribute, $this.data("smt-title"));
                }
            });
            return this["on"]("mouseover", function(event) {
                var $this = $(this),
                    title = $this.attr(options.attribute);
                $this.addClass("smt-current-element").data({
                    "smt-title": title,
                    "smt-fade-speed": options.tip_fade_speed
                }).attr(options.attribute, "");
                smtTooltip.style_my_tooltips("update", {
                    title: title,
                    speed: options.tip_fade_speed,
                    delay: options.tip_delay_time,
                    tip_follows_cursor: options.tip_follows_cursor
                });
                $(document).bind("mousemove", function(event) {
                    smtGetCursorCoords(event);
                });
            });
        },
        update: function(options) {
            var $this = $(this);
            $this.stop().css({
                "display": "none",
                "z-index": $this.data("smt-z-index")
            }).children("div").text(options.title);
            smtTooltip_delay = setTimeout(function() {
                $this.style_my_tooltips("show", {
                    speed: options.speed,
                    tip_follows_cursor: options.tip_follows_cursor
                })
            }, options.delay);
        },
        show: function(options) {
            var $this = $(this);
            $this.stop().fadeTo(options.speed, 1);
            if (!options.tip_follows_cursor) {
                $(document).unbind("mousemove");
            }
        },
        hide: function(options) {
            var $this = $(this);
            $this.stop().fadeTo(options.speed, 0, function() {
                $this.css({
                    "z-index": "-1"
                });
            });
        },
        position: function(options) {
            var $this = $(this),
                winScrollX = $(window).scrollLeft(),
                winScrollY = $(window).scrollTop(),
                tipWidth = $this.outerWidth(true),
                tipHeight = $this.outerHeight(true),
                leftOffset = (options.smtCursorCoordsX + tipWidth) - winScrollX,
                topOffset = (options.smtCursorCoordsY + tipHeight) - winScrollY;
            if (leftOffset <= $(window).width() && leftOffset <= $(document).width()) {
                $this.css("left", options.smtCursorCoordsX);
            } else {
                var thePosX = options.smtCursorCoordsX - tipWidth;
                if (thePosX >= winScrollX) {
                    $this.css("left", thePosX);
                } else {
                    $this.css("left", winScrollX);
                }
            }
            if (topOffset <= $(window).height() && topOffset <= $(document).height()) {
                $this.css("top", options.smtCursorCoordsY);
            } else {
                var thePosY = options.smtCursorCoordsY - tipHeight;
                if (thePosY >= winScrollY) {
                    $this.css("top", thePosY);
                } else {
                    $this.css("top", winScrollY);
                }
            }
        }
    }
    $.fn.style_my_tooltips = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === "object" || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error("Method " + method + " does not exist");
        }
    };
})(jQuery);


Ensuite, on va essayer de décommenter ça

Code:

(function($) {
                $(document).ready(function() {
                    $("[title]").style_my_tooltips({
                        tip_follows_cursor: true,
                        tip_delay_time: 0,
                        tip_fade_speed: 300
                    });
                });
            }
            )(jQuery);

pour commencer

Je viens de tout faire ! o/
Juste une question, si j'ai bien compris, il est inutile de mettre ceci ?

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.style-my-tooltips.js"></script>

Exact

La première ligne charge quelque chose que FA charge déjà, et la seconde ligne essaie de charger un fichier que le forum ne trouve pas.

ça a changé un truc sur ton forum ? Les trucs des profils fonctionnent toujours ?

Ah oki je comprends !

Alors ça n'a rien ajouté il me semble (du moins je trouve pas °°)
Par contre les profils ne fonctionnent plus xD

Sinon t'embête pas avec ces tooltips, comme je me souviens plus de leur utilité, c'est qu'elles ne sont sans doute pas importantes et donc je peux les enlever du fow si ça fait bugger :c

EDIT. Je crois que ça a provoqué un bug sur la side de navigation de gauche, le menu déroulant ne se déroule plus + la side de droite où il n'y a plus l'image de l'avatar ni le pseudo é.è

Coucou

Eh bien écoute, vu les soucis que ça a engendré, je te propose de supprimer tout ce qui concerne cette tooltip et si tu veux vraiment en faire une, je pense qu'on peut essayer de te faire un truc ici Qu'en penses-tu ?

Coucouu !
C'est faait, j'ai tout enlevé et tout remarche à la normal pfiouu /o/ Mercii !

Si ça ne te dérange pas, j'aurai quelques requêtes de codage à faire passer avant la tooltip
Notamment, j'aurai aimé savoir s'il était possible d'appliquer le tuto de Font Awesome aux liens du profil ? Autrement dit, peut-on remplacer l'image par un icon pour les liens ? (mp, lien vers son site internet, etc.) Et si oui, il me faudra un coup de ta baguette magique stp xD