AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Badges sur profil simple

    Ozsi
    Ozsi
    MasculinAge : 22Messages : 27

    le Mer 21 Déc 2016 - 23:55

    Badges sur profil simple



    Bonjour, je souhaite mettre un système de badges sur mon forum, un peu comme N-U, malheureusement je n'y arrive pas.

    Schéma(s) et Eléments
    Schémas : Le code reprend celui de Iguolta dans son sujet http://www.never-utopia.com/t57920-nihil-systeme-de-badge?highlight=badge
    Tailles des éléments : Largeur du forum
    Version de votre forum : PHPBB2


    Ressources
    Pour le moment le code est identique à lui, je le modifierais suite à la resolution avec mes données propres que je n'ai pas encore créer.

    Forum : http://www.ac-project.fr
    Ou ce trouve le code: http://www.ac-project.fr/u1
    Page des badges : http://www.ac-project.fr/h2-badges

    Code html
    Code:
     <!doctype html>
    <html lang="fr">
    <head>
      <meta charset="utf-8" />
    <style>
    .pas_obtenue {
        height: 2em;
        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;
    }

    .obtenue {
        height: 2em;
        padding: 7px;
        border-radius: 5px;
        margin: 5px;
        filter: grayscale(100%);
        background:#FFD700;
        border:1px #FF9933 solid;
    }
    </style>

    </head>
    <body>
    <div id="badges-profil">
        <img src="http://www.pokepedia.fr/images/f/f2/Sprite_6_l_003.png" title="Avoir participé à un débat" class="pas_obtenue debat01">
        <img src="http://www.pokepedia.fr/images/thumb/8/8d/Sprite_6_l_004.png/120px-Sprite_6_l_004.png" title="Avoir gagné 1 concours" class="pas_obtenue concours1">
        <img src="http://www.pokepedia.fr/images/thumb/4/45/Sprite_6_l_005.png/120px-Sprite_6_l_005.png" title="Avoir gagné 3 concours" class="pas_obtenue concours2">
        <img src="http://www.pokepedia.fr/images/thumb/1/13/Sprite_6_l_006.png/120px-Sprite_6_l_006.png" title="Avoir gagné 5 concours" class="pas_obtenue concours3">
        <img src="http://www.pokepedia.fr/images/thumb/7/7f/Sprite_6_l_009.png/120px-Sprite_6_l_009.png" title="Avoir été élu membre du mois" class="pas_obtenue membredumoi01">
        <img src="http://www.pokepedia.fr/images/thumb/9/9b/Sprite_6_l_018.png/120px-Sprite_6_l_018.png" title="Avoir vaincu le champion Vol" class="pas_obtenue championvol">
        <img src="http://www.pokepedia.fr/images/thumb/3/3c/Sprite_6_l_025.png/120px-Sprite_6_l_025.png" title="Avoir posté un message dans Animé" class="pas_obtenue anime01">
        <img src="http://www.pokepedia.fr/images/thumb/e/ec/Sprite_6_l_026.png/120px-Sprite_6_l_026.png" title="Avoir posté 5 messages dans Animé" class="pas_obtenue anime02">
        <img src="http://www.pokepedia.fr/images/thumb/d/d3/Sprite_6_l_065.png/120px-Sprite_6_l_065.png" title="Avoir vaincu le champion Psy" class="pas_obtenue championpsy">
        <img src="http://www.pokepedia.fr/images/thumb/a/a2/Sprite_6_l_068.png/120px-Sprite_6_l_068.png" title="Avoir vaincu le champion Combat" class="pas_obtenue championcombat">
        <img src="http://www.pokepedia.fr/images/thumb/e/e9/Sprite_6_l_102.png/120px-Sprite_6_l_102.png" title="Avoir fêté Pâcques avec nous" class="pas_obtenue eventpacques01">
        <img src="http://www.pokepedia.fr/images/thumb/8/88/Sprite_6_l_103.png/120px-Sprite_6_l_103.png" title="Avoir fêté une deuxième fois Pâcques avec nous" class="pas_obtenue eventpacques02">
        <img src="http://www.pokepedia.fr/images/thumb/1/17/Sprite_6_l_110.png/120px-Sprite_6_l_110.png" title="Avoir vaincu le champion Poison" class="pas_obtenue championpoison">
        <img src="http://www.pokepedia.fr/images/thumb/1/10/Sprite_6_l_120.png/120px-Sprite_6_l_120.png" title="Avoir créé une boutique" class="pas_obtenue createurboutique">
        <img src="http://www.pokepedia.fr/images/thumb/d/dd/Sprite_6_l_121.png/120px-Sprite_6_l_121.png" title="Avoir acheté dans l'une des boutiques" class="pas_obtenue clientboutique">
        <img src="http://www.pokepedia.fr/images/thumb/0/0a/Sprite_6_l_133.png/120px-Sprite_6_l_133.png" title="L'avoir acheté dans la boutique" class="pas_obtenue evolibadge">
        <img src="http://www.pokepedia.fr/images/thumb/e/e7/Sprite_6_l_134.png/120px-Sprite_6_l_134.png" title="L'avoir acheté dans la boutique" class="pas_obtenue aqualibadge">
        <img src="http://www.pokepedia.fr/images/thumb/9/95/Sprite_6_l_135.png/120px-Sprite_6_l_135.png" title="L'avoir acheté dans la boutique" class="pas_obtenue voltalibadge">
        <img src="http://www.pokepedia.fr/images/thumb/0/0f/Sprite_6_l_136.png/120px-Sprite_6_l_136.png" title="Avoir commenté 5 fois une news" class="pas_obtenue commentateurnews">
        <img src="http://www.pokepedia.fr/images/thumb/f/fb/Sprite_6_l_154.png/120px-Sprite_6_l_154.png" title="Avoir vaincu le champion Plante" class="pas_obtenue championplante">
        <img src="http://www.pokepedia.fr/images/thumb/7/72/Sprite_6_l_157.png/120px-Sprite_6_l_157.png" title="Avoir vaincu le champion Feu" class="pas_obtenue championfeu">
        <img src="http://www.pokepedia.fr/images/thumb/d/df/Sprite_6_l_160.png/120px-Sprite_6_l_160.png" title="Avoir vaincu le champion Eau" class="pas_obtenue championeau">
        <img src="http://www.pokepedia.fr/images/thumb/6/6a/Sprite_6_l_181.png/120px-Sprite_6_l_181.png" title="Avoir gagné un match UU" class="pas_obtenue uuplayeur">
        <img src="http://www.pokepedia.fr/images/thumb/2/2c/Sprite_6_l_183.png/120px-Sprite_6_l_183.png" title="L'avoir acheté dans la boutique" class="pas_obtenue marillbadge">
        <img src="http://www.pokepedia.fr/images/thumb/9/9e/Sprite_6_l_184.png/120px-Sprite_6_l_184.png" title="Avoir gagné un match OU" class="pas_obtenue ouplayeur">
        <img src="http://www.pokepedia.fr/images/thumb/d/d8/Sprite_6_l_193.png/120px-Sprite_6_l_193.png" title="Avoir fait une suggestion pour le forum" class="pas_obtenue suggestion01">
        <img src="http://www.pokepedia.fr/images/thumb/f/f0/Sprite_6_l_196.png/120px-Sprite_6_l_196.png" title="Avoir présenté une astuce ou une soluce" class="pas_obtenue astuce01">
        <img src="http://www.pokepedia.fr/images/thumb/3/37/Sprite_6_l_197.png/120px-Sprite_6_l_197.png" title="Avoir vaincu le champion Ténèbres" class="pas_obtenue championtenebres">
        <img src="http://www.pokepedia.fr/images/thumb/b/be/Sprite_6_l_225.png/120px-Sprite_6_l_225.png" title="Avoir fêté Noël avec nous" class="pas_obtenue eventnoel01">
        <img src="http://www.pokepedia.fr/images/thumb/2/25/Sprite_6_l_230.png/120px-Sprite_6_l_230.png" title="Avoir crée une distribution" class="pas_obtenue createurdistribution01">
        <img src="http://www.pokepedia.fr/images/thumb/9/94/Sprite_6_l_234.png/120px-Sprite_6_l_234.png" title="Avoir fêté une deuxième fois Noël avec nous" class="pas_obtenue eventnoel02">
        <img src="http://www.pokepedia.fr/images/thumb/6/61/Sprite_6_l_235.png/120px-Sprite_6_l_235.png" title="Avoir créé un topic dans Les Artistes Naufragés" class="pas_obtenue artistesnaufrages01">
        <img src="http://www.pokepedia.fr/images/thumb/0/06/Sprite_6_l_242.png/120px-Sprite_6_l_242.png" title="Avoir partagé sa Base Secrète" class="pas_obtenue basesecrete01">
        <img src="http://www.pokepedia.fr/images/thumb/5/56/Sprite_6_l_246.png/120px-Sprite_6_l_246.png" title="Avoir voté 10 fois pour le forum" class="pas_obtenue voter01">
        <img src="http://www.pokepedia.fr/images/thumb/f/f8/Sprite_6_l_247.png/120px-Sprite_6_l_247.png" title="Avoir voté 30 fois pour le forum" class="pas_obtenue voter02">
        <img src="http://www.pokepedia.fr/images/thumb/8/80/Sprite_6_l_248.png/120px-Sprite_6_l_248.png" title="Avoir voté 50 fois pour le forum" class="pas_obtenue voter03">
        <img src="http://www.pokepedia.fr/images/thumb/3/32/Sprite_6_l_252.png/120px-Sprite_6_l_252.png" title="Avoir fait 1 fiche stratégique" class="pas_obtenue fichestrat01">
        <img src="http://www.pokepedia.fr/images/thumb/3/3a/Sprite_6_l_253.png/120px-Sprite_6_l_253.png" title="Avoir fait 3 fiches stratégiques" class="pas_obtenue fiche strat02">
        <img src="http://www.pokepedia.fr/images/thumb/c/c4/Sprite_6_l_254.png/120px-Sprite_6_l_254.png" title="Avoir fait 5 fiches stratégiques" class="pas_obtenue fichestrat03">
        <img src="http://www.pokepedia.fr/images/thumb/c/c2/Sprite_6_l_255.png/120px-Sprite_6_l_255.png" title="Avoir participé à 5 tombolas" class="pas_obtenue participationtombola01">
        <img src="http://www.pokepedia.fr/images/thumb/7/7e/Sprite_6_l_256.png/120px-Sprite_6_l_256.png" title="Avoir gagné à 3 tombolas" class="pas_obtenue gagnanttombola01">
        <img src="http://www.pokepedia.fr/images/thumb/6/64/Sprite_6_l_257.png/120px-Sprite_6_l_257.png" title="Avoir gagné à 5 tombolas" class="pas_obtenue gagnanttombola02">
        <img src="http://www.pokepedia.fr/images/thumb/2/24/Sprite_6_l_258.png/120px-Sprite_6_l_258.png" title="L'avoir acheté dans la boutique" class="pas_obtenue goboubadge">
        <img src="http://www.pokepedia.fr/images/thumb/d/d7/Sprite_6_l_259.png/120px-Sprite_6_l_259.png" title="Avoir participé à 3 distributions" class="pas_obtenue participationdistrib01">
        <img src="http://www.pokepedia.fr/images/thumb/7/74/Sprite_6_l_260.png/120px-Sprite_6_l_260.png" title="Avoir participé à 3 distributions" class="pas_obtenue participationdistrib02">
        <img src="http://www.pokepedia.fr/images/thumb/6/6a/Sprite_6_l_263.png/120px-Sprite_6_l_263.png" title="Avoir présenté un jeu hormis Pokémon" class="pas_obtenue horspokemon01">
        <img src="http://www.pokepedia.fr/images/thumb/1/1b/Sprite_6_l_264.png/120px-Sprite_6_l_264.png" title="Avoir présenté 3 jeux hormis Pokémon" class="pas_obtenue horspokemon02">
        <img src="http://www.pokepedia.fr/images/thumb/8/8d/Sprite_6_l_269.png/120px-Sprite_6_l_269.png" title="Avoir au moin fait 3 suggestions pour le forum" class="pas_obtenue suggestion02">
        <img src="http://www.pokepedia.fr/images/thumb/d/d5/Sprite_6_l_282.png/120px-Sprite_6_l_282.png" title="Avoir participé à un tournoi" class="pas_obtenue participationtournoi">
        <img src="http://www.pokepedia.fr/images/thumb/4/4d/Sprite_6_l_284.png/120px-Sprite_6_l_284.png" title="Avoir vaincu le champion Insecte" class="pas_obtenue championinsecte">
        <img src="http://www.pokepedia.fr/images/thumb/d/da/Sprite_6_l_298.png/120px-Sprite_6_l_298.png" title="Avoir voter à un sondage hebdomadaire" class="pas_obtenue sondage01">
        <img src="http://www.pokepedia.fr/images/thumb/e/e1/Sprite_6_l_310.png/120px-Sprite_6_l_310.png" title="Avoir vaincu le champion Electrique" class="pas_obtenue championelectrick">
        <img src="http://www.pokepedia.fr/images/thumb/3/31/Sprite_6_l_323.png/120px-Sprite_6_l_323.png" title="Avoir vaincu le champion Sol" class="pas_obtenue championsol">
        <img src="http://www.pokepedia.fr/images/thumb/6/6d/Sprite_6_l_359.png/120px-Sprite_6_l_359.png" title="Avoir participé au moins une fois à la Gazette du forum" class="pas_obtenue gazetteduforum">
        <img src="http://www.pokepedia.fr/images/thumb/5/51/Sprite_6_l_367.png/120px-Sprite_6_l_367.png" title="L'avoir acheté dans la boutique" class="pas_obtenue serpangbadge">
        <img src="http://www.pokepedia.fr/images/thumb/1/11/Sprite_6_l_368.png/120px-Sprite_6_l_368.png" title="Avoir créé une tombola" class="pas_obtenue createurtombola">
        <img src="http://www.pokepedia.fr/images/thumb/5/5d/Sprite_6_l_376.png/120px-Sprite_6_l_376.png" title="Avoir vaincu le maître de PokéIsland" class="pas_obtenue maitrepokeisland">
        <img src="http://www.pokepedia.fr/images/thumb/0/0e/Sprite_6_l_377.png/120px-Sprite_6_l_377.png" title="Avoir vaincu le champion Roche" class="pas_obtenue championroche">
        <img src="http://www.pokepedia.fr/images/thumb/9/94/Sprite_6_l_378.png/120px-Sprite_6_l_378.png" title="L'avoir acheté dans la boutique" class="pas_obtenue regicebadge">
        <img src="http://www.pokepedia.fr/images/thumb/d/d0/Sprite_6_l_379.png/120px-Sprite_6_l_379.png" title="Avoir vaincu le champion Acier" class="pas_obtenue championacier">
        <img src="http://www.pokepedia.fr/images/thumb/9/97/Sprite_6_l_380.png/120px-Sprite_6_l_380.png" title="Avoir 10 amis" class="pas_obtenue amis01">
        <img src="http://www.pokepedia.fr/images/thumb/7/72/Sprite_6_l_381.png/120px-Sprite_6_l_381.png" title="Avoir 20 amis" class="pas_obtenue amis02">
        <img src="http://www.pokepedia.fr/images/thumb/f/fd/Sprite_6_l_384.png/120px-Sprite_6_l_384.png" title="Avoir gagné un match en UBER" class="obtenue uberplayeur">
        <img src="http://www.pokepedia.fr/images/thumb/a/ab/Sprite_6_l_385.png/120px-Sprite_6_l_385.png" title="Avoir fêté la nouvelle année avec nous" class="pas_obtenue eventnewyear01">
        <img src="http://www.pokepedia.fr/images/thumb/7/73/Sprite_6_l_386.png/120px-Sprite_6_l_386.png" title="Avoir aidé le forum à être au moins une fois 1er sur un top-site" class="pas_obtenue topdutopsite01">
        <img src="http://www.pokepedia.fr/images/thumb/3/39/Sprite_6_l_456.png/120px-Sprite_6_l_456.png" title="Avoir présenté une RMT" class="pas_obtenue rtm01">
        <img src="http://www.pokepedia.fr/images/thumb/5/5d/Sprite_6_l_457.png/120px-Sprite_6_l_457.png" title="Avoir présenté 3 RMT" class="pas_obtenue rtm02">
        <img src="http://www.pokepedia.fr/images/thumb/b/b7/Sprite_6_l_461.png/120px-Sprite_6_l_461.png" title="Avoir été au moins une fois champion" class="pas_obtenue champion01">
        <img src="http://www.pokepedia.fr/images/thumb/c/cd/Sprite_6_l_470.png/120px-Sprite_6_l_470.png" title="Avoir posté sa liste de shiny" class="pas_obtenue shasseur01">
        <img src="http://www.pokepedia.fr/images/thumb/c/ca/Sprite_6_l_471.png/120px-Sprite_6_l_471.png" title="Avoir vaincu le champion Glace" class="pas_obtenue championglace">
        <img src="http://www.pokepedia.fr/images/thumb/3/32/Sprite_6_l_474.png/120px-Sprite_6_l_474.png" title="Avoir vaincu le champion Normal" class="pas_obtenue championnormal">
        <img src="http://www.pokepedia.fr/images/thumb/5/57/Sprite_6_l_475.png/120px-Sprite_6_l_475.png" title="Avoir gagné un tournoi" class="pas_obtenue gagnertournoi01">
        <img src="http://www.pokepedia.fr/images/thumb/b/ba/Sprite_6_l_477.png/120px-Sprite_6_l_477.png" title="Avoir vaincu le champion Spectre" class="pas_obtenue championspectre">
        <img src="http://www.pokepedia.fr/images/thumb/5/5e/Sprite_6_l_479.png/120px-Sprite_6_l_479.png" title="L'avoir acheté dans une boutique" class="pas_obtenue mostismabadge">
        <img src="http://www.pokepedia.fr/images/thumb/a/ad/Sprite_6_l_483.png/120px-Sprite_6_l_483.png" title="Avoir participé à 3 soirées de shasse" class="pas_obtenue soireedeshasse01">
        <img src="http://www.pokepedia.fr/images/thumb/b/be/Sprite_6_l_484.png/120px-Sprite_6_l_484.png" title="Avoir participé à 5 soirées de shasse" class="pas_obtenue soireedeshasse02">
        <img src="http://www.pokepedia.fr/images/thumb/3/3d/Sprite_6_l_486.png/120px-Sprite_6_l_486.png" title="Avoir les 3 Badges Golem" class="pas_obtenue regigigasbadge">
        <img src="http://www.pokepedia.fr/images/thumb/f/fa/Sprite_6_l_487.png/120px-Sprite_6_l_487.png" title="Avoir le Badge Palkia et Dialga" class="pas_obtenue giratinabadge">
        <img src="http://www.pokepedia.fr/images/thumb/2/29/Sprite_6_l_489.png/120px-Sprite_6_l_489.png" title="Être inscrit depuis 6 mois" class="pas_obtenue sixmois01">
        <img src="http://www.pokepedia.fr/images/thumb/8/8b/Sprite_6_l_490.png/120px-Sprite_6_l_490.png" title="Être inscrit depuis 1 an" class="pas_obtenue unan01">
        <img src="http://www.pokepedia.fr/images/thumb/9/92/Sprite_6_l_493normal.png/120px-Sprite_6_l_493normal.png" title="Avoir été Administrateur" class="pas_obtenue administrateur01">
        <img src="http://www.pokepedia.fr/images/thumb/c/c8/Sprite_6_l_494.png/120px-Sprite_6_l_494.png" title="Avoir gagné à un concours Inter-Forum" class="pas_obtenue interforum01">
        <img src="http://www.pokepedia.fr/images/thumb/8/8d/Sprite_6_l_510.png/120px-Sprite_6_l_510.png" title="Avoir gagné un match NU" class="pas_obtenue nuplayeur">
        <img src="http://www.pokepedia.fr/images/thumb/3/3f/Sprite_6_l_523.png/120px-Sprite_6_l_523.png" title="Avoir fait une astuce stratégique" class="pas_obtenue astucestrat01">
        <img src="http://www.pokepedia.fr/images/thumb/3/3f/Sprite_6_l_572.png/120px-Sprite_6_l_572.png" title="Avoir gagné un match RU" class="pas_obtenue ruplayeur">
        <img src="http://www.pokepedia.fr/images/thumb/0/0c/Sprite_6_l_573.png/120px-Sprite_6_l_573.png" title="Avoir gagné un match LC" class="pas_obtenue lcplayeur">
        <img src="http://www.pokepedia.fr/images/thumb/e/eb/Sprite_6_l_612.png/120px-Sprite_6_l_612.png" title="Avoir vaincu le champion Dragon" class="pas_obtenue championdragon">
        <img src="http://www.pokepedia.fr/images/thumb/8/8b/Sprite_6_l_628.png/120px-Sprite_6_l_628.png" title="S'être présenté" class="pas_obtenue presentation01">
        <img src="http://www.pokepedia.fr/images/thumb/f/f8/Sprite_6_l_647.png/120px-Sprite_6_l_647.png" title="Cadeau pour les 1 an du forum" class="pas_obtenue unanforum">
        <img src="http://www.pokepedia.fr/images/thumb/8/8f/Sprite_6_l_648.png/120px-Sprite_6_l_648.png" title="Cadeau pour les 2 ans du forum" class="pas_obtenue deuxansforum">
        <img src="http://www.pokepedia.fr/images/thumb/c/c1/Sprite_6_l_649.png/120px-Sprite_6_l_649.png" title="Avoir été Modérateur" class="pas_obtenue moderateur01">
        <img src="http://www.pokepedia.fr/images/thumb/7/79/Sprite_6_l_672.png/120px-Sprite_6_l_672.png" title="Avoir créé 5 fiches de Pokédex" class="pas_obtenue fichepokedex01">
        <img src="http://www.pokepedia.fr/images/thumb/8/84/Sprite_6_l_673.png/120px-Sprite_6_l_673.png" title="Avoir créé 10 fiches de Pokédex" class="pas_obtenue fichepokedex02">
        <img src="http://www.pokepedia.fr/images/thumb/f/fc/Sprite_6_l_700.png/120px-Sprite_6_l_700.png" title="Avoir vaincu le champion Fée" class="pas_obtenue championfee">
        <img src="http://www.pokepedia.fr/images/thumb/b/b0/Sprite_6_l_710.png/120px-Sprite_6_l_710.png" title="Avoir fêté Halloween avec nous" class="pas_obtenue eventhalloween01">
        <img src="http://www.pokepedia.fr/images/thumb/5/5b/Sprite_6_l_711.png/120px-Sprite_6_l_711.png" title="Avoir fêté une deuxième fois Halloween avec nous" class="pas_obtenue eventhalloween02">
    </div>
    </body>
    </html>

    Malheureusement, le code après collage sur le forum change en celui-ci
    Code:
      <meta charset="utf-8" /><style>
    .pas_obtenue {
        height: 2em;
        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;
    }

    .obtenue {
        height: 2em;
        padding: 7px;
        border-radius: 5px;
        margin: 5px;
        filter: grayscale(100%);
        background:#FFD700;
        border:1px #FF9933 solid;
    }
    </style>
    <div id="badges-profil">
           <img class="pas_obtenue debat01" title="Avoir participé à un débat" src="http://www.pokepedia.fr/images/f/f2/Sprite_6_l_003.png" />    <img class="pas_obtenue concours1" title="Avoir gagné 1 concours" src="http://www.pokepedia.fr/images/thumb/8/8d/Sprite_6_l_004.png/120px-Sprite_6_l_004.png" />    <img class="pas_obtenue concours2" title="Avoir gagné 3 concours" src="http://www.pokepedia.fr/images/thumb/4/45/Sprite_6_l_005.png/120px-Sprite_6_l_005.png" />    <img class="pas_obtenue concours3" title="Avoir gagné 5 concours" src="http://www.pokepedia.fr/images/thumb/1/13/Sprite_6_l_006.png/120px-Sprite_6_l_006.png" />    <img class="pas_obtenue membredumoi01" title="Avoir été élu membre du mois" src="http://www.pokepedia.fr/images/thumb/7/7f/Sprite_6_l_009.png/120px-Sprite_6_l_009.png" />    <img class="pas_obtenue championvol" title="Avoir vaincu le champion Vol" src="http://www.pokepedia.fr/images/thumb/9/9b/Sprite_6_l_018.png/120px-Sprite_6_l_018.png" />    <img class="pas_obtenue anime01" title="Avoir posté un message dans Animé" src="http://www.pokepedia.fr/images/thumb/3/3c/Sprite_6_l_025.png/120px-Sprite_6_l_025.png" />    <img class="pas_obtenue anime02" title="Avoir posté 5 messages dans Animé" src="http://www.pokepedia.fr/images/thumb/e/ec/Sprite_6_l_026.png/120px-Sprite_6_l_026.png" />    <img class="pas_obtenue championpsy" title="Avoir vaincu le champion Psy" src="http://www.pokepedia.fr/images/thumb/d/d3/Sprite_6_l_065.png/120px-Sprite_6_l_065.png" />    <img class="pas_obtenue championcombat" title="Avoir vaincu le champion Combat" src="http://www.pokepedia.fr/images/thumb/a/a2/Sprite_6_l_068.png/120px-Sprite_6_l_068.png" />    <img class="pas_obtenue eventpacques01" title="Avoir fêté Pâcques avec nous" src="http://www.pokepedia.fr/images/thumb/e/e9/Sprite_6_l_102.png/120px-Sprite_6_l_102.png" />    <img class="pas_obtenue eventpacques02" title="Avoir fêté une deuxième fois Pâcques avec nous" src="http://www.pokepedia.fr/images/thumb/8/88/Sprite_6_l_103.png/120px-Sprite_6_l_103.png" />    <img class="pas_obtenue championpoison" title="Avoir vaincu le champion Poison" src="http://www.pokepedia.fr/images/thumb/1/17/Sprite_6_l_110.png/120px-Sprite_6_l_110.png" />    <img class="pas_obtenue createurboutique" title="Avoir créé une boutique" src="http://www.pokepedia.fr/images/thumb/1/10/Sprite_6_l_120.png/120px-Sprite_6_l_120.png" />    <img class="pas_obtenue clientboutique" title="Avoir acheté dans l'une des boutiques" src="http://www.pokepedia.fr/images/thumb/d/dd/Sprite_6_l_121.png/120px-Sprite_6_l_121.png" />    <img class="pas_obtenue evolibadge" title="L'avoir acheté dans la boutique" src="http://www.pokepedia.fr/images/thumb/0/0a/Sprite_6_l_133.png/120px-Sprite_6_l_133.png" />    <img class="pas_obtenue aqualibadge" title="L'avoir acheté dans la boutique" src="http://www.pokepedia.fr/images/thumb/e/e7/Sprite_6_l_134.png/120px-Sprite_6_l_134.png" />    <img class="pas_obtenue voltalibadge" title="L'avoir acheté dans la boutique" src="http://www.pokepedia.fr/images/thumb/9/95/Sprite_6_l_135.png/120px-Sprite_6_l_135.png" />    <img class="pas_obtenue commentateurnews" title="Avoir commenté 5 fois une news" src="http://www.pokepedia.fr/images/thumb/0/0f/Sprite_6_l_136.png/120px-Sprite_6_l_136.png" />    <img class="pas_obtenue championplante" title="Avoir vaincu le champion Plante" src="http://www.pokepedia.fr/images/thumb/f/fb/Sprite_6_l_154.png/120px-Sprite_6_l_154.png" />    <img class="pas_obtenue championfeu" title="Avoir vaincu le champion Feu" src="http://www.pokepedia.fr/images/thumb/7/72/Sprite_6_l_157.png/120px-Sprite_6_l_157.png" />    <img class="pas_obtenue championeau" title="Avoir vaincu le champion Eau" src="http://www.pokepedia.fr/images/thumb/d/df/Sprite_6_l_160.png/120px-Sprite_6_l_160.png" />    <img class="pas_obtenue uuplayeur" title="Avoir gagné un match UU" src="http://www.pokepedia.fr/images/thumb/6/6a/Sprite_6_l_181.png/120px-Sprite_6_l_181.png" />    <img class="pas_obtenue marillbadge" title="L'avoir acheté dans la boutique" src="http://www.pokepedia.fr/images/thumb/2/2c/Sprite_6_l_183.png/120px-Sprite_6_l_183.png" />    <img class="pas_obtenue ouplayeur" title="Avoir gagné un match OU" src="http://www.pokepedia.fr/images/thumb/9/9e/Sprite_6_l_184.png/120px-Sprite_6_l_184.png" />    <img class="pas_obtenue suggestion01" title="Avoir fait une suggestion pour le forum" src="http://www.pokepedia.fr/images/thumb/d/d8/Sprite_6_l_193.png/120px-Sprite_6_l_193.png" />    <img class="pas_obtenue astuce01" title="Avoir présenté une astuce ou une soluce" src="http://www.pokepedia.fr/images/thumb/f/f0/Sprite_6_l_196.png/120px-Sprite_6_l_196.png" />    <img class="pas_obtenue championtenebres" title="Avoir vaincu le champion Ténèbres" src="http://www.pokepedia.fr/images/thumb/3/37/Sprite_6_l_197.png/120px-Sprite_6_l_197.png" />    <img class="pas_obtenue eventnoel01" title="Avoir fêté Noël avec nous" src="http://www.pokepedia.fr/images/thumb/b/be/Sprite_6_l_225.png/120px-Sprite_6_l_225.png" />    <img class="pas_obtenue createurdistribution01" title="Avoir crée une distribution" src="http://www.pokepedia.fr/images/thumb/2/25/Sprite_6_l_230.png/120px-Sprite_6_l_230.png" />    <img class="pas_obtenue eventnoel02" title="Avoir fêté une deuxième fois Noël avec nous" src="http://www.pokepedia.fr/images/thumb/9/94/Sprite_6_l_234.png/120px-Sprite_6_l_234.png" />    <img class="pas_obtenue artistesnaufrages01" title="Avoir créé un topic dans Les Artistes Naufragés" src="http://www.pokepedia.fr/images/thumb/6/61/Sprite_6_l_235.png/120px-Sprite_6_l_235.png" />    <img class="pas_obtenue basesecrete01" title="Avoir partagé sa Base Secrète" src="http://www.pokepedia.fr/images/thumb/0/06/Sprite_6_l_242.png/120px-Sprite_6_l_242.png" />    <img class="pas_obtenue voter01" title="Avoir voté 10 fois pour le forum" src="http://www.pokepedia.fr/images/thumb/5/56/Sprite_6_l_246.png/120px-Sprite_6_l_246.png" />    <img class="pas_obtenue voter02" title="Avoir voté 30 fois pour le forum" src="http://www.pokepedia.fr/images/thumb/f/f8/Sprite_6_l_247.png/120px-Sprite_6_l_247.png" />    <img class="pas_obtenue voter03" title="Avoir voté 50 fois pour le forum" src="http://www.pokepedia.fr/images/thumb/8/80/Sprite_6_l_248.png/120px-Sprite_6_l_248.png" />    <img class="pas_obtenue fichestrat01" title="Avoir fait 1 fiche stratégique" src="http://www.pokepedia.fr/images/thumb/3/32/Sprite_6_l_252.png/120px-Sprite_6_l_252.png" />    <img class="pas_obtenue fiche strat02" title="Avoir fait 3 fiches stratégiques" src="http://www.pokepedia.fr/images/thumb/3/3a/Sprite_6_l_253.png/120px-Sprite_6_l_253.png" />    <img class="pas_obtenue fichestrat03" title="Avoir fait 5 fiches stratégiques" src="http://www.pokepedia.fr/images/thumb/c/c4/Sprite_6_l_254.png/120px-Sprite_6_l_254.png" />    <img class="pas_obtenue participationtombola01" title="Avoir participé à 5 tombolas" src="http://www.pokepedia.fr/images/thumb/c/c2/Sprite_6_l_255.png/120px-Sprite_6_l_255.png" />    <img class="pas_obtenue gagnanttombola01" title="Avoir gagné à 3 tombolas" src="http://www.pokepedia.fr/images/thumb/7/7e/Sprite_6_l_256.png/120px-Sprite_6_l_256.png" />    <img class="pas_obtenue gagnanttombola02" title="Avoir gagné à 5 tombolas" src="http://www.pokepedia.fr/images/thumb/6/64/Sprite_6_l_257.png/120px-Sprite_6_l_257.png" />    <img class="pas_obtenue goboubadge" title="L'avoir acheté dans la boutique" src="http://www.pokepedia.fr/images/thumb/2/24/Sprite_6_l_258.png/120px-Sprite_6_l_258.png" />    <img class="pas_obtenue participationdistrib01" title="Avoir participé à 3 distributions" src="http://www.pokepedia.fr/images/thumb/d/d7/Sprite_6_l_259.png/120px-Sprite_6_l_259.png" />    <img class="pas_obtenue participationdistrib02" title="Avoir participé à 3 distributions" src="http://www.pokepedia.fr/images/thumb/7/74/Sprite_6_l_260.png/120px-Sprite_6_l_260.png" />    <img class="pas_obtenue horspokemon01" title="Avoir présenté un jeu hormis Pokémon" src="http://www.pokepedia.fr/images/thumb/6/6a/Sprite_6_l_263.png/120px-Sprite_6_l_263.png" />    <img class="pas_obtenue horspokemon02" title="Avoir présenté 3 jeux hormis Pokémon" src="http://www.pokepedia.fr/images/thumb/1/1b/Sprite_6_l_264.png/120px-Sprite_6_l_264.png" />    <img class="pas_obtenue suggestion02" title="Avoir au moin fait 3 suggestions pour le forum" src="http://www.pokepedia.fr/images/thumb/8/8d/Sprite_6_l_269.png/120px-Sprite_6_l_269.png" />    <img class="pas_obtenue participationtournoi" title="Avoir participé à un tournoi" src="http://www.pokepedia.fr/images/thumb/d/d5/Sprite_6_l_282.png/120px-Sprite_6_l_282.png" />    <img class="pas_obtenue championinsecte" title="Avoir vaincu le champion Insecte" src="http://www.pokepedia.fr/images/thumb/4/4d/Sprite_6_l_284.png/120px-Sprite_6_l_284.png" />    <img class="pas_obtenue sondage01" title="Avoir voter à un sondage hebdomadaire" src="http://www.pokepedia.fr/images/thumb/d/da/Sprite_6_l_298.png/120px-Sprite_6_l_298.png" />    <img class="pas_obtenue championelectrick" title="Avoir vaincu le champion Electrique" src="http://www.pokepedia.fr/images/thumb/e/e1/Sprite_6_l_310.png/120px-Sprite_6_l_310.png" />    <img class="pas_obtenue championsol" title="Avoir vaincu le champion Sol" src="http://www.pokepedia.fr/images/thumb/3/31/Sprite_6_l_323.png/120px-Sprite_6_l_323.png" />    <img class="pas_obtenue gazetteduforum" title="Avoir participé au moins une fois à la Gazette du forum" src="http://www.pokepedia.fr/images/thumb/6/6d/Sprite_6_l_359.png/120px-Sprite_6_l_359.png" />    <img class="pas_obtenue serpangbadge" title="L'avoir acheté dans la boutique" src="http://www.pokepedia.fr/images/thumb/5/51/Sprite_6_l_367.png/120px-Sprite_6_l_367.png" />    <img class="pas_obtenue createurtombola" title="Avoir créé une tombola" src="http://www.pokepedia.fr/images/thumb/1/11/Sprite_6_l_368.png/120px-Sprite_6_l_368.png" />    <img class="pas_obtenue maitrepokeisland" title="Avoir vaincu le maître de PokéIsland" src="http://www.pokepedia.fr/images/thumb/5/5d/Sprite_6_l_376.png/120px-Sprite_6_l_376.png" />    <img class="pas_obtenue championroche" title="Avoir vaincu le champion Roche" src="http://www.pokepedia.fr/images/thumb/0/0e/Sprite_6_l_377.png/120px-Sprite_6_l_377.png" />    <img class="pas_obtenue regicebadge" title="L'avoir acheté dans la boutique" src="http://www.pokepedia.fr/images/thumb/9/94/Sprite_6_l_378.png/120px-Sprite_6_l_378.png" />    <img class="pas_obtenue championacier" title="Avoir vaincu le champion Acier" src="http://www.pokepedia.fr/images/thumb/d/d0/Sprite_6_l_379.png/120px-Sprite_6_l_379.png" />    <img class="pas_obtenue amis01" title="Avoir 10 amis" src="http://www.pokepedia.fr/images/thumb/9/97/Sprite_6_l_380.png/120px-Sprite_6_l_380.png" />    <img class="pas_obtenue amis02" title="Avoir 20 amis" src="http://www.pokepedia.fr/images/thumb/7/72/Sprite_6_l_381.png/120px-Sprite_6_l_381.png" />    <img class="obtenue uberplayeur" title="Avoir gagné un match en UBER" src="http://www.pokepedia.fr/images/thumb/f/fd/Sprite_6_l_384.png/120px-Sprite_6_l_384.png" />    <img class="pas_obtenue eventnewyear01" title="Avoir fêté la nouvelle année avec nous" src="http://www.pokepedia.fr/images/thumb/a/ab/Sprite_6_l_385.png/120px-Sprite_6_l_385.png" />    <img class="pas_obtenue topdutopsite01" title="Avoir aidé le forum à être au moins une fois 1er sur un top-site" src="http://www.pokepedia.fr/images/thumb/7/73/Sprite_6_l_386.png/120px-Sprite_6_l_386.png" />    <img class="pas_obtenue rtm01" title="Avoir présenté une RMT" src="http://www.pokepedia.fr/images/thumb/3/39/Sprite_6_l_456.png/120px-Sprite_6_l_456.png" />    <img class="pas_obtenue rtm02" title="Avoir présenté 3 RMT" src="http://www.pokepedia.fr/images/thumb/5/5d/Sprite_6_l_457.png/120px-Sprite_6_l_457.png" />    <img class="pas_obtenue champion01" title="Avoir été au moins une fois champion" src="http://www.pokepedia.fr/images/thumb/b/b7/Sprite_6_l_461.png/120px-Sprite_6_l_461.png" />    <img class="pas_obtenue shasseur01" title="Avoir posté sa liste de shiny" src="http://www.pokepedia.fr/images/thumb/c/cd/Sprite_6_l_470.png/120px-Sprite_6_l_470.png" />    <img class="pas_obtenue championglace" title="Avoir vaincu le champion Glace" src="http://www.pokepedia.fr/images/thumb/c/ca/Sprite_6_l_471.png/120px-Sprite_6_l_471.png" />    <img class="pas_obtenue championnormal" title="Avoir vaincu le champion Normal" src="http://www.pokepedia.fr/images/thumb/3/32/Sprite_6_l_474.png/120px-Sprite_6_l_474.png" />    <img class="pas_obtenue gagnertournoi01" title="Avoir gagné un tournoi" src="http://www.pokepedia.fr/images/thumb/5/57/Sprite_6_l_475.png/120px-Sprite_6_l_475.png" />    <img class="pas_obtenue championspectre" title="Avoir vaincu le champion Spectre" src="http://www.pokepedia.fr/images/thumb/b/ba/Sprite_6_l_477.png/120px-Sprite_6_l_477.png" />    <img class="pas_obtenue mostismabadge" title="L'avoir acheté dans une boutique" src="http://www.pokepedia.fr/images/thumb/5/5e/Sprite_6_l_479.png/120px-Sprite_6_l_479.png" />    <img class="pas_obtenue soireedeshasse01" title="Avoir participé à 3 soirées de shasse" src="http://www.pokepedia.fr/images/thumb/a/ad/Sprite_6_l_483.png/120px-Sprite_6_l_483.png" />    <img class="pas_obtenue soireedeshasse02" title="Avoir participé à 5 soirées de shasse" src="http://www.pokepedia.fr/images/thumb/b/be/Sprite_6_l_484.png/120px-Sprite_6_l_484.png" />    <img class="pas_obtenue regigigasbadge" title="Avoir les 3 Badges Golem" src="http://www.pokepedia.fr/images/thumb/3/3d/Sprite_6_l_486.png/120px-Sprite_6_l_486.png" />    <img class="pas_obtenue giratinabadge" title="Avoir le Badge Palkia et Dialga" src="http://www.pokepedia.fr/images/thumb/f/fa/Sprite_6_l_487.png/120px-Sprite_6_l_487.png" />    <img class="pas_obtenue sixmois01" title="Être inscrit depuis 6 mois" src="http://www.pokepedia.fr/images/thumb/2/29/Sprite_6_l_489.png/120px-Sprite_6_l_489.png" />    <img class="pas_obtenue unan01" title="Être inscrit depuis 1 an" src="http://www.pokepedia.fr/images/thumb/8/8b/Sprite_6_l_490.png/120px-Sprite_6_l_490.png" />    <img class="pas_obtenue administrateur01" title="Avoir été Administrateur" src="http://www.pokepedia.fr/images/thumb/9/92/Sprite_6_l_493normal.png/120px-Sprite_6_l_493normal.png" />    <img class="pas_obtenue interforum01" title="Avoir gagné à un concours Inter-Forum" src="http://www.pokepedia.fr/images/thumb/c/c8/Sprite_6_l_494.png/120px-Sprite_6_l_494.png" />    <img class="pas_obtenue nuplayeur" title="Avoir gagné un match NU" src="http://www.pokepedia.fr/images/thumb/8/8d/Sprite_6_l_510.png/120px-Sprite_6_l_510.png" />    <img class="pas_obtenue astucestrat01" title="Avoir fait une astuce stratégique" src="http://www.pokepedia.fr/images/thumb/3/3f/Sprite_6_l_523.png/120px-Sprite_6_l_523.png" />    <img class="pas_obtenue ruplayeur" title="Avoir gagné un match RU" src="http://www.pokepedia.fr/images/thumb/3/3f/Sprite_6_l_572.png/120px-Sprite_6_l_572.png" />    <img class="pas_obtenue lcplayeur" title="Avoir gagné un match LC" src="http://www.pokepedia.fr/images/thumb/0/0c/Sprite_6_l_573.png/120px-Sprite_6_l_573.png" />    <img class="pas_obtenue championdragon" title="Avoir vaincu le champion Dragon" src="http://www.pokepedia.fr/images/thumb/e/eb/Sprite_6_l_612.png/120px-Sprite_6_l_612.png" />    <img class="pas_obtenue presentation01" title="S'être présenté" src="http://www.pokepedia.fr/images/thumb/8/8b/Sprite_6_l_628.png/120px-Sprite_6_l_628.png" />    <img class="pas_obtenue unanforum" title="Cadeau pour les 1 an du forum" src="http://www.pokepedia.fr/images/thumb/f/f8/Sprite_6_l_647.png/120px-Sprite_6_l_647.png" />    <img class="pas_obtenue deuxansforum" title="Cadeau pour les 2 ans du forum" src="http://www.pokepedia.fr/images/thumb/8/8f/Sprite_6_l_648.png/120px-Sprite_6_l_648.png" />    <img class="pas_obtenue moderateur01" title="Avoir été Modérateur" src="http://www.pokepedia.fr/images/thumb/c/c1/Sprite_6_l_649.png/120px-Sprite_6_l_649.png" />    <img class="pas_obtenue fichepokedex01" title="Avoir créé 5 fiches de Pokédex" src="http://www.pokepedia.fr/images/thumb/7/79/Sprite_6_l_672.png/120px-Sprite_6_l_672.png" />    <img class="pas_obtenue fichepokedex02" title="Avoir créé 10 fiches de Pokédex" src="http://www.pokepedia.fr/images/thumb/8/84/Sprite_6_l_673.png/120px-Sprite_6_l_673.png" />    <img class="pas_obtenue championfee" title="Avoir vaincu le champion Fée" src="http://www.pokepedia.fr/images/thumb/f/fc/Sprite_6_l_700.png/120px-Sprite_6_l_700.png" />    <img class="pas_obtenue eventhalloween01" title="Avoir fêté Halloween avec nous" src="http://www.pokepedia.fr/images/thumb/b/b0/Sprite_6_l_710.png/120px-Sprite_6_l_710.png" />    <img class="pas_obtenue eventhalloween02" title="Avoir fêté une deuxième fois Halloween avec nous" src="http://www.pokepedia.fr/images/thumb/5/5b/Sprite_6_l_711.png/120px-Sprite_6_l_711.png" />
    </div>
     

    Le javascript
    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 = "2"; /* numéro de la page HTML */


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

            /* on attend que notre page soit prête */
            $(function () {
                /* on récupère la zone badge */
                var $profilBadges = $("dt:contains('Badges obtenus')").closest("dl");

                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) {
                            try {
                                $badges.find("." + badgesUser[i].trim()).addClass("obtenue").removeClass("pas_obtenue");
                            } catch (e){
                                console.log("Système de badge erreur => " + e);
                            }
                        }
                    }
                   
                    /* 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 en fin de page */
                $("#profile-advanced-details").closest("#page-body").after($badges);
            });

        })
    }

    Merci Nihil :)


    Autres précisions ?
    Je mets ce code sur un profil simple que dont je modifierais la structure par la suite.

    Merci beaucoup pour vos réponses.
    Ozsi
    Ozsi
    MasculinAge : 22Messages : 27

    le Jeu 22 Déc 2016 - 1:21

    Je répond à mon propre sujet car j'ai réussi et voici la solution !

    Ce n'est pas un tutoriel, c'est juste l'explication de comment j'ai réussi à faire pour que cela fonctionne, il est fort préférable de lire les sujets ci-dessous afin de bien comprendre. Si vous avez des problèmes ou que vous ne comprenez pas pourquoi cela ne fonctionne, je vous conseille fortement d'ouvrir votre propre sujet afin qu'un Codeur vienne vous aidez à sa résolution, merci !

    Pour faire correct, il vous faut ces deux sujets
    - http://www.never-utopia.com/t57920-nihil-systeme-de-badge?highlight=badge
    - http://www.never-utopia.com/t60799-nihil-profil-messages-systeme-de-succes?highlight=succ%E8s

    Beaucoup de patiente et énormément d'amour envers Nihil Scar Winspeare !

    Tous d'abord, faut créer une page html

    Panneau de configuration > Avancès > Modules > HTML & JAVASCRIPT > Gestion des pages HTML

    Cliquez sur le bouton Badges sur profil simple 161222011504248301, ensuite commencez votre page html contenant les badges par

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
    </head>
    <body>
    </body>
    </html>

    par la suite rentrer le CSS entre les balises

    Code:
    <style>
    .pas_obtenue {
        height: 2em;
        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;
    }

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

    PS : Le code est de Iguolta, donc modifiez le CSS à votre guise.

    N'oubliez pas de mettre aussi le CSS dans votre feuille de style

    Panneau de configuration > Avancès > Affichage > Images et Couleurs
    > Couleurs > Feuille de style CSS


    Par la suite, il vous faut entrer les badges, à l'intérieure des balises codes, commencez par créer une DIV, exemple

    Code:
    <div id="badges-profil">
    </div>

    et insérer à l’intérieure vos badges en img

    Code:
     <img src="http://www.pokepedia.fr/images/f/f2/Sprite_6_l_003.png" title="Avoir participé à un débat" class="pas_obtenue debat01">

    Explications du code pour l'image du badge:

    Spoiler:
    L'image est celle de votre badges, ex : Badges sur profil simple Sprite_6_l_003
    Code:
    src="http://www.pokepedia.fr/images/f/f2/Sprite_6_l_003.png"

    Elle dispose d'un titre
    Code:
    title="Avoir participé à un débat"

    et d'une classe lui permettant d'être sois obtenue ou pas, puis d'un nom de class
    Code:
    class="pas_obtenue debat01"

    obtenue ou pas
    Code:
    pas_obtenue

    nom de class
    Code:
    debat01

    Jusque là, vous avez fait 40% du travail.


    Passons à la création du bloc dans le profil afin de rentrer les nom de class des badges obtenu pour le membres,

    Panneau de configuration > Avancès > Utilisateurs & groupes > Utilisateurs > Profils


    Créez un nouveau champs comme l'exemple de Nihil
    Spoiler:
    Badges sur profil simple Nj3IyYL

    Suite à cela, noté le numéro de votre champs
    Spoiler:
    Badges sur profil simple 161222013139365856

    Il vous suffit de compter le nombre de champs spéciaux que vous avez créer, celui du badges sera le derniers créer, donc celui du haut. Sur l'image ont vois bien qu'il s'agit du 3ème champs créer, donc ont gardera le chiffre 3 pour la suite !


    Passons au Javascript !

    Panneau de configuration > Avancès > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript


    Ont créer un code javascript qui sera actif 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 = "2"; /* numéro de la page HTML */
          var idChamp = "field_id3"; /* ID du champ à modifier */



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

            /* on attend que notre page 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) {
                            try {
                                $badges.find("." + badgesUser[i].trim()).addClass("obtenue").removeClass("pas_obtenue");
                            } catch (e){
                                console.log("Système de badge erreur => " + e);
                            }
                        }
                    }
                   
                    /* 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 en fin de page */
                $("#page-body").after($badges);
            });

        })
    }

    Dans cette partie vous n'avez que 2 champs à modifier, il s'agit de

    Code:
        var idPage = "2"; /* numéro de la page HTML */
          var idChamp = "field_id3"; /* ID du champ à modifier */

    Le premier idPage signifie le numero de votre page HTML, ici c'est le 2, mais vous cela pourrait être le 3 ou encore le 5 !
    Le second est le champ personnalisé que l'on à créer auparavant, il faut renseigner le chiffre que vous avez obtenu en comptant après avoir créer le champs, ici le 3

    Suite à cela, vous enregistrez le code, il nous reste un petit truc à mettre et cela sera fini.

    Retournez dans votre Feuille de style CSS et insérez ce code

    Code:
    /* style bloc badges */
    #badges-profil {
        border: 2px solid #eed02d;
        margin: 2px 2px 25px;
        text-align: center;
    }
    #badges-profil:before {
        content: "Badges obtenus";
        display: block;
        background-color : #eed02d;
        border-bottom: 1px solid white;
        color: #20305e;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 5px;
        padding: 5px;
    }

    Il s'agit du contour du bloc des badges.
    Résultats
    Spoiler:
    Badges sur profil simple 0bQZIaN

    Maintenant libre à vous de changez les codes par les vôtres !

    Merci à Nihil de m'avoir aider à trouvez la solution à mon problème :)


    Dernière édition par Ozsi le Mar 27 Déc 2016 - 23:01, édité 1 fois
    Luirio
    Luirio
    MasculinAge : 29Messages : 164

    le Mar 27 Déc 2016 - 15:45

    Ton tutoriel ne fonctionne pas j'ai essayé et ça refuse de s'afficher.
    Ozsi
    Ozsi
    MasculinAge : 22Messages : 27

    le Mar 27 Déc 2016 - 15:56

    J'ai essayer sur mon forum teste et cela fonctionne, as-tu bien rentrer le numero de ton champs ? Tes pages java sont bien activé ? tu as bien remis le code CSS dans ta feuille de style ?

    Si tu veux, je viens de te demander sur skype.
    Luirio
    Luirio
    MasculinAge : 29Messages : 164

    le Mar 27 Déc 2016 - 16:35

    S'il te plait quand j'ai vu que c'était possible, j'avais plein d'étoile mais maintenant je suis en larme vu que ça ne fonctionne pas et j'ai pas appris grand chose en JS Sad

    Tu peut m'ajouter: Thunderbreezemlp ^^
    Ozsi
    Ozsi
    MasculinAge : 22Messages : 27

    le Mar 27 Déc 2016 - 17:49

    Très bien, je viens de t'envoyer une demande :)
    TiGraou
    TiGraou
    MasculinAge : 26Messages : 243

    le Mar 27 Déc 2016 - 18:19

    @Luirio a écrit:Ton tutoriel ne fonctionne pas j'ai essayé et ça refuse de s'afficher.

    Pour le javascript, s'il est actif, Il faut cocher "sur toutes les pages", ça devrait fonctionner.

    Ton tutoriel n'est pas très clair, tu risques d'embrouiller les gens avec quelle page? quelle template et etc...
    Essaie de donner les indications, ce serait plus facile, plutot que de sauter les étapes.
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5113

    le Mar 27 Déc 2016 - 22:34

    Juste pour rappel il ne s'agit pas vraiment d'un tuto, mais d'une explication d'utilisation faite par Ozsi d'un de mes codes pour une demande de LS :hudada:
    Et ça requiert de lire d'abord les sujets mis au début en lien qui comporte des explications en plus (^__^)

    Si vous avez un problème pour le mettre en place, le mieux c'est d'ouvrir son propre sujet dans "Problème avec mon code", en lisant les règles de la section pour bien penser écrire toutes les infos nécessaires Wink

    Du coup je pense qu'on va bientôt déplacer le sujet dans les Archives puisque maintenant il est résolu :hudada:



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Ozsi
    Ozsi
    MasculinAge : 22Messages : 27

    le Mar 27 Déc 2016 - 22:59

    Ah oui, je vais le modifier de suite :)
    Contenu sponsorisé


      La date/heure actuelle est Mer 23 Oct 2019 - 14:36