Hello Likau o/

Pour qu'on puisse t'aider est ce que pourrais essayer de le re-mettre en place, nous donner le lien de ton forum, le lien du sujet que tu as suivi ainsi que nous copier / coller les codes que tu as mis.

C'est surement un tout petit truc qui bug, mais ça sera peut-être plus simple pour nous de régler ce petit truc qui fait que ça bug sur ton forum que de repartir de 0 :)

Bonjour Nihil et merci pour ta réponse rapide !

Je te donne ça tout de suite :)

► Lien du forum; http://2birdsfree.forumactif.com/

► Lien du sujet suivi; https://www.never-utopia.com/t60799-nihil-profil-messages-systeme-de-succes?highlight=succ%C3%A8s
(j'ai aussi essayé avec celui-ci pour le profil avancé; https://www.never-utopia.com/t57920-nihil-systeme-de-badge?highlight=Nihil )

► HTML ; (qui est, du coup, celui du sujet d'au-dessus mais que je changerai plus tard pour que ça corresponde au fofo ^^') // ✓ Utiliser le haut et le bas du forum

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="Nom du badge" /></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="Nom du badge" /></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="Nom du badge" /></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="Nom du badge" /></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="Nom du badge" /></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="Nom du badge" /></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="Nom du badge" /></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="Nom du badge" /></div>
        <div class="p-badge-description">Description description beat06</div>
    </div>
</div>


► JS; ✓ Sur toutes les pages

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 = "4"; /* 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);
        });

    })
}


► CSS; (juste la partie concernée)

Code:

/* BADGES DANS LES PROFILS */
.p-badge {
  position: relative;
  width: 32px;
  height: 32px;
  display:inline-block;
  vertical-align: middle;
}

/* style de la boite de description */
.p-badge-description {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
 
  background: #4aa3df;
  color: white;
  padding: 5px 10px;
  width: 200px;
  border-radius: 3px;
 
  /* effet survol */
  transition: all 300ms;
  opacity: 0;
  visibility: hidden;
}

/* on fait apparaitre la description au survol */
.p-badge:hover .p-badge-description {
  opacity: 1;
  visibility: visible;
}

/* bloc qui contient tous les badges */
.badges-profil {
  background: #2f2b2b;
  padding: 10px;
  margin: 20px auto;
}

/* Par défaut on masque les badges dans le profil */
.badges-page-profil .p-badge {
  display: none;
}

/* on affiche seulement les badges actifs */
.badges-page-profil .p-badge.badge-actif {
  display: inline-block;
}
/* FIN DANS LES PROFILS */


► Le champ du profil est encore bien en place, je viens de le changer pour que les invités puissent le voir aussi :)

J'ai oublié le délai des UP donc désolé si c'est encore trop tôt

Hello :)

J'étais en vacances donc je ne suivais plus trop ce qui se passait ici

Petit problème 1:
Première petite chose, tu as un petit bug de Javascript. Je crois que tu as l'un de tes JS avec un code qui ressemble à ça :

Code:

$(window).load(function () {
    typeof _userdata == "undefined" ? console.log("L'objet \"_userdata\" de forumactif n'a pas été trouvé. Le script de sauvegarde des messages en cours d'écriture ne peut pas fonctionner.") : messageSaver.init()
})

Il manque un point virgule à la fin, du coup ça fait casser certains autre codes

Code:

$(window).load(function () {
    typeof _userdata == "undefined" ? console.log("L'objet \"_userdata\" de forumactif n'a pas été trouvé. Le script de sauvegarde des messages en cours d'écriture ne peut pas fonctionner.") : messageSaver.init()
});

Petit problème 2:
Dans le profil http://2birdsfree.forumactif.com/u1 tu as actuellement "p-badge rose01", il faudrait les séparer par un point virgule. Sinon le système croit que c'est un badge, qui s'appelle "p-badge rose01"
Donc mettre "prim02 ; rose01" par exemple plutôt (sans les guillemets autour)

Petit problème 3:
Quelque part dans ton template de profil (profile_view_body), est ce que tu peux rajouter ceci ?

Code:

<div class="badges-page-profil"></div>

C'est le bloc qui contiendra les badges du profil

Coucou Nihil, j'espère que tes vacances se sont bien passées ! ^^

Alors c'est donc ce point virgule qui faisait tout sauter ? Le sacripan. J'ai apporté les modifications demandées et les badges s'affichent sans souci maintenant (du moins ceux obtenus)

Du coup pour afficher ceux qui ne sont pas obtenus et les griser, je pourrais faire comment ? :o

[EDIT] • J'ai réussi en utilisant un filtre, mais maintenant je suis un peu embêté parce que les descriptions passent carrément sous les images

Spoiler:

Du coup voilà les nouveaux HTML;

Code:

<style>
.pas_obtenu {
        width:auto;
        height: auto;
        padding: 7px;
        border-radius: 8px;
        margin: 5px;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        background:#FFD700;
        border:1px #FF9933 solid;
    }

    .obtenu {
        width:auto;
        height: auto;
        padding: 7px;
        border-radius: 5px;
        margin: 5px;
        background:#FFD700;
        border:1px #FF9933 solid;
    }
</style>

<div class="badges-profil">
    <div class="p-badge rose01 pas_obtenu">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Début de la Richesse !" /></div>
        <div class="p-badge-description">>> Début de la Richesse !<br>Obtenir 50 Dovlas</div>
    </div>
    <div class="p-badge rose02 pas_obtenu">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description ROSE02</div>
    </div>
    <div class="p-badge rose03 pas_obtenu">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description ROSE03</div>
    </div>
    <div class="p-badge prim01 pas_obtenu">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description prim01</div>
    </div>
    <div class="p-badge prim02 pas_obtenu">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description prim02</div>
    </div>
</div>

CSS;

Code:

/* BADGES DANS LES PROFILS */
.p-badge {
  position: relative;
  width: 32px;
  height: 32px;
  display:inline-block;
  vertical-align: middle;
}


/* style de la boite de description */
.p-badge-description {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
 
  background: #4aa3df;
  color: white;
  padding: 5px 10px;
  width: 200px;
  border-radius: 3px;
 
  /* effet survol */
  transition: all 300ms;
  opacity: 0;
  visibility: hidden;
}

/* on fait apparaitre la description au survol */
.p-badge:hover .p-badge-description {
  opacity: 1;
  visibility: visible;
}

/* bloc qui contient tous les badges */
.badges-profil {
  background:#1A1A1A;
  padding: 10px;
  margin: 20px auto;
}

/* Par défaut on masque les badges dans le profil */
.badges-page-profil .p-badge {
  display: none;
}

/* on affiche seulement les badges actifs */
.badges-page-profil .p-badge.badge-actif {
  display: inline-block;
}


/* FIN DANS LES PROFILS */

Et Template;

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<div class="PFIL"><div class="namePFIL">{USERNAME}</div>
<div class="avPFIL"><div id="adminPFIL"><!-- BEGIN switch_auth_user --><div><span>{L_ADMINISTRATE_USER} :</span><br/>{ADMINISTRATE_USER}{BAN_USER}</div><!-- END switch_auth_user --><div><!-- BEGIN switch_dhow_mp --><span>{L_PRIVATE_MSG} :</span> {PRIVATE_MSG}<!-- END switch_dhow_mp --></div></div>{AVATAR_IMG}</div><div class="boxPFIL"><a rel="nofollow" class="sbjPFIL" href="/sta/{PUSERNAME}">{L_TOPICS}</a><a rel="nofollow" class="msgPFIL" href="/spa/{PUSERNAME}">{L_POSTS}</a><div class="lstPFIL"><span>{L_LAST_VISITED} :</span> {LAST_VISIT_TIME}</div><br/><div class="abtPFIL"><!-- BEGIN profile_field --><div id="field_id{profile_field.ID}"><div><span class="gen">{profile_field.LABEL}</span> {profile_field.CONTENT}</div></div><!-- END profile_field --></div><div id="ktactPFIL"><!-- BEGIN contact_field --><div class="ktactPFIL">{contact_field.CONTENT}</div><!-- END contact_field --></div></div>
<!-- BEGIN switch_rpg -->
<div class="boxRPG"><div style="float:left; margin:0 10px 10px 0;">{RPG_IMAGE}</div>
 <!-- BEGIN rpg_fields -->
 <span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span> {switch_rpg.rpg_fields.F_VALUE_NEW}<br/>
 <!-- END rpg_fields -->
 {U_ADMIN_RPG}
 </div>
 <!-- END switch_rpg -->
  <br><br><center><div style="font-variant:small-caps;color:white;text-shadow:1px 1px 1px white;font-family:Yanone Kaffeesatz;font-size:50px;margin-bottom:-30px;letter-spacing:3px;">Mes Exploits</div>
    <div style="background-color:rgba(255,255,255,0.5);width:800px;padding-top:10px;">
    <div class="badges-page-profil"></div>
    </div></center>
<!-- BEGIN switch_admin_user_comment_active --><span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span> {ADMIN_USER_COMMENT}<!-- END switch_admin_user_comment_active -->
</div>
</table>
<br />
<script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){
 $('[id^=field_id]').each(function(){
 if ( $(this).find('.field_editable').is('span, div') )
 {
 $(this).hover(function()
 {
 if( $(this).find('.field_editable.invisible').is('span, div') )
 {
 $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
 $(this).find('.ajax-profil_edit').attr({
 alt: "{L_FIELD_EDIT_VALUE}",
 title: "{L_FIELD_EDIT_VALUE}"
 }).click(function(){
 $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
 $(this).prev().find('.ajax-profil_valid').attr({
 alt: "{L_VALIDATE}",
 title: "{L_VALIDATE}"
 }).click(function(){
 var content = new Array();
 $(this).parent().find('[name]').each(function(){
 var type_special = $(this).is('input[type=radio],input[type=checkbox]');
 if ( (type_special && $(this).is(':checked')) || !type_special )
 {
 content.push(new Array($(this).attr('name'), $(this).attr('value')));
 }
 });
 var id_name = $(this).parents('[id^=field_id]').attr('id');
 var id = id_name.substring(8, id_name.length);
 $.post(
 "{U_AJAX_PROFILE}",
 {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
 function(data){
 $.each(data, function(i, item){
 $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
 });
 },
 "json"
 );
 });
 $(this).remove();
 });
 }
 },function()
 {
 if( $(this).find('.field_editable.invisible').is('span, div') )
 {
 $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
 $(this).find('.ajax-profil_edit').remove();
 }
 });
 }
 });
 });
//]]>
</script>

Coucou o/

C'est tout à fait possible, car contre pense à bien à enlever l'effet filtre sur les badges obtenus, avec par exemple:

Code:

.badge-actif {
    filter: none;
}

Ensuite, pour que la description passe au dessus, tu peux ajouter un CSS comme ça :

Code:

.badges-page-profil .p-badge:hover {
    z-index: 1;
}

Quand tu survoles un badge, ça lui donne un "z-index" plus élevé (un peu comme s'il était sur un calque au dessus sur Photoshop)

Spoiler:

Sublime, tout fonctionne parfaitement
Merci beaucoup pour ton aide, Nihil (et l'explication furtive sur le z-index) ! Ne me reste qu'à mettre les petites vignettes correspondantes (ce qui devrait être à ma portée)

Le sujet peut être passé en résolu

Contente d'avoir pu t'aider, j'archive le sujet