Ah mince désolééééé XDD *rajoute des bêtises xD*
Je viens de retourner voir, et étonnamment, il semble que tout se soit corrigé de lui-même :

Code:

<div class="p-badge-description">

Pas de slash ou d'espace en trop !
Ça fonctionne ? o/

Alors oui c'est bon comme ça, par contre je ne vois pas la modification sur la page (au cas où tu l'avais faite)

Est ce que c'est revenu tout seul quand tu as modifié le code, et du coup tu n'as pas validé ? Si oui c'est possible que l'éditeur de FA ait corrigé la faute, mais il faut quand même validé pour sauvegarder

J'ai toujours partout :

Code:

<div class="p-badge-description" />
         (le contenu ici)
      </div>

Au pire, est ce que tu peux aussi me copier / coller en entier ton code HTML s'il te plait ? :)

Le code JS à rajouter ressemblera à ça :
PA > Modules > JS >Ajouter un JS => sur toutes les pages (je fais le chemin de tête ToT, sorry, je suis un peu en speed là :3)

Code:

/*
 * SYSTEME DE BADGE
 * LIBRE SERVICE NEVER UTOPIA
 */

/* on vérifie si on est bien sur la page de profil */
if (/^\/u\d+$/.test(document.location.pathname)) {
    var idPage = "1"; /* numéro de la page HTML */
    var idChamp = "field_id1"; /* ID du champ à modifier */


    $.get("/h" + idPage + "-", function (data) {
        /* on récupère le block des badges */
        var $badges = $(data).find(".badges-profil");
console.log(data)
        /* on attend que notre page HTML soit prête */
        $(function () {
            /* on récupère la zone badge */
            var $profilBadges = $("#"+idChamp);

            if ($profilBadges.length > 0) {
                /* selection des badges du membre */
                var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");

                /* pour chaque badge, on ajoute la classe si besoin */
                for (var i = 0, l = badgesUser.length; i < l; i++) {
console.log($badges)
                    if (badgesUser[i].length > 0) {
                        $badges.find("." + badgesUser[i].trim()).addClass("badge-actif");
                    }
                }
               
                /* si la personne ne peut pas éditer le champ,
                * on le retire la zone */
                if ($profilBadges.find(".field_editable").length < 1) {
                    $profilBadges.next().andSelf().remove();
                }
            }
           
            /* on ajoute le block dans le profil */
            $(".badges-page-profil").append($badges);
        });

    })
}

Étrange !
J'y suis retourné, c'est toujours comme si FA avait remis les choses en l'ordre, j'ai validé une nouvelle fois.
Voici le code au cas où :

Code:

<div class="badges-profil">
                
   <div class="p-badge rose01">
                       
      <div class="p-badge-illu">
           <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Rose Rouge" /> 
      </div>
                       
      <div class="p-badge-description">
           Description description ROSE 01 
      </div>
                   
   </div>
                
   <div class="p-badge rose02">
                       
      <div class="p-badge-illu">
           <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Rose Blanche" /> 
      </div>
                         
      <div class="p-badge-description">
                                   Description description ROSE02           
      </div>
                   
   </div>
                
   <div class="p-badge rose03">
                       
      <div class="p-badge-illu">
           <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Rose Bleue" /> 
      </div>
                       
      <div class="p-badge-description">
           Description description ROSE03 
      </div>
                   
   </div>
                
   <div class="p-badge prim01">
                       
      <div class="p-badge-illu">
           <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Primrose" /> 
      </div>
                       
      <div class="p-badge-description">
           Description description prim01 
      </div>
                   
   </div>
                
   <div class="p-badge prim02">
                       
      <div class="p-badge-illu">
           <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Primitive" /> 
      </div>
                       
      <div class="p-badge-description">
           Description description prim02 
      </div>
                   
   </div>
                
   <div class="p-badge harpe04">
                       
      <div class="p-badge-illu">
           <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Harpe" /> 
      </div>
                       
      <div class="p-badge-description">
           Description description harpe04 
      </div>
                   
   </div>
                
   <div class="p-badge viola05">
                       
      <div class="p-badge-illu">
           <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Viola" /> 
      </div>
                       
      <div class="p-badge-description">
           Description description viola05 
      </div>
                   
   </div>
                
   <div class="p-badge beat06">
                       
      <div class="p-badge-illu">
           <img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Beat" /> 
      </div>
                       
      <div class="p-badge-description">
           Description description beat06 
      </div>
                   
   </div>
            
</div>

Sinon, page JS crée et ajoutée !
Ne t'inquiète pas, merci

Oups petite erreur de ma part, voici le bon JS :

Code:

/*
 * SYSTEME DE BADGE
 * LIBRE SERVICE NEVER UTOPIA
 */

/* on vérifie si on est bien sur la page de profil */
if (/^\/u\d+$/.test(document.location.pathname)) {
    var idPage = "1"; /* numéro de la page HTML */
    var idChamp = "field_id1"; /* ID du champ à modifier */


    $.get("/h" + idPage + "-", function (data) {
        /* on récupère le block des badges */
        var $badges = $(data).find(".badges-profil");

        /* on attend que notre page HTML soit prête */
        $(function () {
            /* on récupère la zone badge */
            var $profilBadges = $("#"+idChamp);

            if ($profilBadges.length > 0) {
                /* selection des badges du membre */
                var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");

                /* pour chaque badge, on ajoute la classe si besoin */
                for (var i = 0, l = badgesUser.length; i < l; i++) {
                    if (badgesUser[i].length > 0) {
                        $badges.find("." + badgesUser[i].trim()).addClass("badge-actif");
                    }
                }

                /* si la personne ne peut pas éditer le champ,
                * on le retire la zone */
                if ($profilBadges.find(".field_editable").length < 1) {
                    $profilBadges.next().andSelf().remove();
                }
            }

            /* on ajoute le block dans le profil */
            $(".badges-page-profil").append($badges);
        });

    })
}

Merci pour ce nouveau JS, le profil simple fonctionne ! Tout s'affiche bien o/

Que faut-il faire à présent pour l'affichage dans les messages ?

Salut!

Nihil, tu as vu le message de Tsukasa?

Oh mince, je suis désolée Tsuka ><, j'avais zappé ce sujet, merci Onyx !

Du coup pour le profil on fait quoi au final ?
Le membre peut choisir lui même le / les badges qu'il affiche ?
Combien exactement ?
On a le placement définitif ?

Bonjour ! Ne t'inquiète pas o/
Alors pour le placement, peut-être en survolant l'avatar s'affichent les premiers badges obtenus ? (pour ne pas surcharger) En les positionnant au centre, deux par deux, dans la limite de six ? Le reste étant de toute façon visible sur le profil simple.

Qu'en dis-tu ?

Salut!

@Nihil Scar Winspeare, tu as vu le message de Tsukasa?

Aie, j'oublie toujours les demandes de LS >-<

Si quelqu'un veut reprendre il y a pas de soucis, sinon je vais m'y atteler mais un peu plus tard, beaucoup de boulot ces temps ci ToT *paaaardon*

Bonjour Nihil !
Prends ton temps, et bon courage pour tout *-*

Boooon, je reviens après trèèèèès longtemps

Du coup première question, est ce que c'est encore d'actualité Tsukasa ? :)

Bonsoooir ;3

Pas de problème o/
Oui c'est toujours d'actualité !

Salut!

C'est toujours d'actualité ici? Nihil, tu as vu la réponse de Tsukasa?

Bonjour !

Oui c'est toujours d'actualité :)

Hello, sorry je n'ai vraiment pas la tête à faire des LS ces temps ci ^^'

Est ce que je peux avoir ton template des messages s'il te plait ? :)
Est ce que tu veux que l'avatar soit toujours cliquable (il mène vers le profil actuellement) ? (si on met les badges au survol au dessus)

EDIT :
Je sais plus si les badges sont modifiables par les membres

En fait il y a 2 manières de faire, une un peu plus embêtante que l'autre :
Soit un code JS à rajouter un peu long, qui va me prendre un peu la tête
Soit on ajoute un champ libre où on peut mettre des images en bbcode ( https://www.never-utopia.com/t60660-comment-mettre-un-lien-un-smiley-un-bbcode-dans-un-champ-du-profil ) (qu'on peut ensuite si tu veux déplacer / styliser un peu )

Bonjour !
Écoute pas de souci, tu peux prendre ton temps ! C'est déjà gentil de t'en occuper.
Voici le template :

Spoiler:

Pour les badges non, nous avions dit réservé à l'équipe admin :p
Pour l'avatar cliquable, il ne faudrait pas que ce soit gênant pour l'affichage, de toute façon le pseudo est cliquable forcément donc tous les chemins mènent au profil.

C'est clair que je préfèrerais la technique du LS, mais si tu n'as pas la forme pour le faire... D:

Salut!

Je viens faire un petit up pour savoir où ça en est ~

Hello !

Sorry j'ai pas du tout avancé :/
Je réfléchis à un système qui permet d'éviter de dupliquer le choix des images

Coucou !

Pas d'inquiétude, prends ton temps n_n
Merci

Finalement je me relance youuuuhouuu !

Est ce que je peux avoir le CSS aussi sitouplé ? <3

Super merci !
Désolé du retard ><

Le voici :

Spoiler:

Pas de problème, moi même je traine donc je ne suis pas un très bon exemple
J'ai totalement tout recommencé différemment

Avant de te passer le javascript, j'ai quelques petites modifications de template et CSS à te passer. ^^

view_topic_body :

Spoiler:

profile_view_body :

Spoiler:

Le CSS :

Spoiler:

Seconde modif du CSS :

Spoiler:

ENFIN, on y est presque xD...
Pour les succès, ils ne s'affichent plus comme ça :

Code:

rose01;prim02;violet03;harpe04;viola05;beat06

Plutôt qu'un point virgule, on mettre un retour à la ligne

Code:

rose01
prim02
violet03
harpe04
viola05
beat06

Du coup il faut bien qu'il soit de type "Zone de texte" dans le panneau d'admin (sinon on ne peut pas faire de retour à la ligne il me semble)

Tu peux supprimer l'ancienne page HTML et le précédent code javascript, on va mettre autre chose à la place

Je pense que j'ai fait le tour de toutes les modifs

Sorry D:
Les modifications ont été effectuées, la page html ainsi que le js o/
Merci ~

(c'est ok aussi pour la zone de texte **)

Dans le CSS du forum on peut ajouter ça :

Code:

.avaPOST {
  position: relative;
}

.badge-message-container {
  padding: 15px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 
  background: rgba(0,0,0,0.8);
  opacity: 1;
  text-align: center;
  transition: opacity ease-in-out .75s;
}

.badge-message-container:hover {
  opacity: 1
}

.badges-page-profil {
  background: rgba(0,0,0,0.5);
  color: #000;
  margin-top: 10px;
  padding: 10px;
  font-size: 12px;
}


J'ai repris l'animation au survol qu'il y a sur la page profil :)

Code javascript à rajouter :


Je mets le code sous hide car il est pas totalement niquel, pour éviter que quelqu'un qui voudrait reprendre le système se retrouve car un code un peu compliqué à adapter (là il est adapté pile pour ce forum là) ^^'

Alors, la liste de TOUS les badges du forum se change ici :

Code:

var badgesForum = {
    "rose01": {
        nom: 'Architecte maléfique',
        description: 'Je peux coder l\'esprit des gens',
        img: "http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png"
    },
    "prim02": {
        nom: 'Architecte tout puissant',
        description: 'Je peux reprogrammer ton cerveau',
        img: "http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png"
    },
    "violet03": {
        nom: 'Arnaqueur de première',
        description: 'Là tu me vois. Là tu me vois plus. Héhé.',
        img: "http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png"
    },
    "harpe04": {
        nom: 'Denis Brogniart',
        description: 'YO YO YO YO YO',
        img: "http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png"
    }
};

Le nombre de badge max à afficher par profil ici :

Code:

var SujetNombreBadges = 6; /* MAXIMUM a afficher par message dans un sujet */

Et enfin ici il faut changer si tu changes le nom du champ qui contient les infos :

Code:

var SujetTextChamp = "Succès obtenus";

Bon là c'es un peu embêtant pour modifier, je vais donc essayer de faire un petit système pour que tu remplisses un formulaire et PAF il te donne le code à copier / coller dans ton forum :)