AccueilDernières imagesRechercherS'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.

Le Deal du moment : -28%
Brandt LVE127J – Lave-vaisselle encastrable 12 ...
Voir le deal
279.99 €

    [Nihil] Système de badge

    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Dim 1 Nov 2015 - 22:35

    Système de badge



    Bonjour, alors voici mon problème :
    J'ai aujourd'hui, travaillé sur un système de badge mais je ne sais pas comment m'y prendre à partir de maintenant. J'aimerai en faite que certains badges soient automatiquement activés lorsqu'un membres à faire x objectifs. Je pensais à faire des conditions en javascript mais je ne sais pas du tout comment m'y prendre :/

    Ensuite, j'aimerai le mettre en bas du profil (voir Schéma) mais j'ai beau faire quelques essais dans le template "profile_view_body", rien ne se passe :/

    Enfin, j'aimerai faire en sorte que sa se programme en fonction du membre et pas que de moi, et que les autres membres puissent voir l'avancement des autres.

    Merci d'avance et désolé si je ne suis pas très clair dans mes propos ^^'

    Schéma(s) et Eléments
    Schémas :
    Lieu exact auquel je voudrais où se trouve les badges :
    Nihil - [Nihil] Système de badge Locali10

    Aspect badge non obtenue :
    Nihil - [Nihil] Système de badge Badge_10

    Aspect de certains badges obtenue :
    Nihil - [Nihil] Système de badge Quelqu10

    Codage :
    Code:
    <meta charset="UTF-8" /><link href="http://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" type="text/css" />  
    <style>img.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;
    }

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

    <td><img src="http://www.eternia-fr.net/images/plb/sprites/003.png" title="Avoir participé à un débat" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/004.png" title="Avoir gagné 1 concours" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/005.png" title="Avoir gagné 3 concours" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/006.png" title="Avoir gagné 5 concours" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/009.png" title="Avoir été élu membre du mois" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/018.png" title="Avoir vaincu le champion Vol" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/025.png" title="Avoir posté un message dans Animé" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/026.png" title="Avoir posté 5 messages dans Animé" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/065.png" title="Avoir vaincu le champion Psy" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/068.png" title="Avoir vaincu le champion Combat" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/102.png" title="Avoir fêté Pâcques avec nous" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/103.png" title="Avoir fêté une deuxième fois Pâcques avec nous" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/110.png" title="Avoir vaincu le champion Poison" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/120.png" title="Avoir créé une boutique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/121.png" title="Avoir acheté dans l'une des boutiques" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/133.png" title="L'avoir acheté dans la boutique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/134.png" title="L'avoir acheté dans la boutique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/135.png" title="L'avoir acheté dans la boutique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/136.png" title="Avoir commenté 5 fois une news" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/154.png" title="Avoir vaincu le champion Plante" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/157.png" title="Avoir vaincu le champion Feu" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/160.png" title="Avoir vaincu le champion Eau" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/181.png" title="Avoir gagné un match UU" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/183.png" title="L'avoir acheté dans la boutique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/184.png" title="Avoir gagné un match OU" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/193.png" title="Avoir fait une suggestion pour le forum" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/196.png" title="Avoir présenté une astuce ou une soluce" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/197.png" title="Avoir vaincu le champion Ténèbres" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/225.png" title="Avoir fêté Noël avec nous" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/230.png" title="Avoir crée une distribution" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/234.png" title="Avoir fêté une deuxième fois Noël avec nous" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/235.png" title="Avoir créé un topic dans Les Artistes Naufragés" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/242.png" title="Avoir partagé sa Base Secrète" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/246.png" title="Avoir voté 10 fois pour le forum" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/247.png" title="Avoir voté 30 fois pour le forum" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/248.png" title="Avoir voté 50 fois pour le forum" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/252.png" title="Avoir fait 1 fiche stratégique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/253.png" title="Avoir fait 3 fiches stratégiques" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/254.png" title="Avoir fait 5 fiches stratégiques" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/255.png" title="Avoir participé à 5 tombolas" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/256.png" title="Avoir gagné à 3 tombolas" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/257.png" title="Avoir gagné à 5 tombolas" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/258.png" title="L'avoir acheté dans la boutique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/259.png" title="Avoir participé à 3 distributions" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/260.png" title="Avoir participé à 3 distributions" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/263.png" title="Avoir présenté un jeu hormis Pokémon" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/264.png" title="Avoir présenté 3 jeux hormis Pokémon" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/269.png" title="Avoir au moin fait 3 suggestions pour le forum" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/282.png" title="Avoir participé à un tournoi" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/284.png" title="Avoir vaincu le champion Insecte" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/298.png" title="Avoir voter à un sondage hebdomadaire" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/310.png" title="Avoir vaincu le champion Electrique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/323.png" title="Avoir vaincu le champion Sol" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/359.png" title="Avoir participé au moins une fois à la Gazette du forum" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/367.png" title="L'avoir acheté dans la boutique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/368.png" title="Avoir créé une tombola" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/376.png" title="Avoir vaincu le maître de PokéIsland" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/377.png" title="Avoir vaincu le champion Roche" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/378.png" title="L'avoir acheté dans la boutique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/379.png" title="Avoir vaincu le champion Acier" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/380.png" title="Avoir 10 amis" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/381.png" title="Avoir 20 amis" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/384.png" title="Avoir gagné un match en UBER" class="obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/385.png" title="Avoir fêté la nouvelle année avec nous" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/386.png" title="Avoir aidé le forum à être au moins une fois 1er sur un top-site" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/456.png" title="Avoir présenté une RMT" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/457.png" title="Avoir présenté 3 RMT" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/461.png" title="Avoir été au moins une fois champion" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/470.png" title="Avoir posté sa liste de shiny" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/471.png" title="Avoir vaincu le champion Glace" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/474.png" title="Avoir vaincu le champion Normal" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/475.png" title="Avoir gagné un tournoi" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/477.png" title="Avoir vaincu le champion Spectre" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/479.png" title="L'avoir acheté dans une boutique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/483.png" title="Avoir participé à 3 soirées de shasse" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/484.png" title="Avoir participé à 5 soirées de shasse" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/486.png" title="Avoir les 3 Badges Golem" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/487.png" title="Avoir le Badge Palkia et Dialga" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/489.png" title="Être inscrit depuis 6 mois" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/490.png" title="Être inscrit depuis 1 an" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/493.png" title="Avoir été Administrateur" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/494.png" title="Avoir gagné à un concours Inter-Forum" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/510.png" title="Avoir gagné un match NU" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/523.png" title="Avoir fait une astuce stratégique" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/572.png" title="Avoir gagné un match RU" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/573.png" title="Avoir gagné un match LC" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/612.png" title="Avoir vaincu le champion Dragon" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/631.png" title="S'être présenté" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/647.png" title="Cadeau pour les 1 an du forum" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/648.png" title="Cadeau pour les 2 ans du forum" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/649.png" title="Avoir été Modérateur" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/672.png" title="Avoir créé 5 fiches de Pokédex" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/673.png" title="Avoir créé 10 fiches de Pokédex" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/700.png" title="Avoir vaincu le champion Fée" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/710.png" title="Avoir fêté Halloween avec nous" class="pas_obtenue" /></td>
    <td><img src="http://www.eternia-fr.net/images/plb/sprites/711.png" title="Avoir fêté une deuxième fois Halloween avec nous" class="pas_obtenue" /></td>

    Tailles des éléments : ////
    Version de votre forum : PHPBB2

    Ressources
    Non.

    Autres précisions ?
    Non


    Encore merci d'avance et bonne journée/soirée ^^


    Dernière édition par Iguolta le Dim 22 Nov 2015 - 18:56, édité 2 fois
    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Sam 7 Nov 2015 - 13:45

    Up ?
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 8 Nov 2015 - 12:56

    Hello :)

    Je ne prend pas la demande de LS, je viens juste poser quelques questions complémentaires.

    En effet, actuellement je vois 2 demandes en une seule, je vais essayer de clarifier ça :

    1. Comment faire un système de badge qui s'active en fonction d'action des membres ? (à détailler)
    2. Comment placer ensuite ces badges en bas du profil d'un membre ?


    Iguolta a écrit:J'aimerai en faite que certains badges soient automatiquement activés lorsqu'un membres à faire x objectifs. Je pensais à faire des conditions en javascript mais je ne sais pas du tout comment m'y prendre :/
    Pourrais-tu détailler le genre d'objectifs dont tu parles s'il te plait (un exemple concret) ?

    Iguolta a écrit:Ensuite, j'aimerai le mettre en bas du profil (voir Schéma) mais j'ai beau faire quelques essais dans le template "profile_view_body", rien ne se passe :/
    D'après ta capture d'écran tu as sélectionné dans le panneau d'administration le Profil avancé. Le template correspond au profil simple, il n'y en a pas pour le profil avancé. :)

    Souhaites-tu également afficher les badges dans le profil pour l'affichage des messages ?

    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Dim 8 Nov 2015 - 18:43

    Salut :)

    Pourrais-tu détailler le genre d'objectifs dont tu parles s'il te plait (un exemple concret) ?
    Par exemple, lorsqu'un membre créer 5 topics dans une catégorie précise, un badge s'active.

    D'après ta capture d'écran tu as sélectionné dans le panneau d'administration le Profil avancé. Le template correspond au profil simple, il n'y en a pas pour le profil avancé. :)
    Ah d'accord, je comprend mieux maintenant x)

    Souhaites-tu également afficher les badges dans le profil pour l'affichage des messages ?
    Je n'ai pas compris votre question ^^'

    Pour les questions clarifiant mes problèmes, je pense que c'est à peu près sa, oui ^^
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 12 Nov 2015 - 0:54

    Iguolta a écrit:Par exemple, lorsqu'un membre créer 5 topics dans une catégorie précise, un badge s'active.
    C'est bien ce que je craignais, sur forumactif, on ne peut pas directement suivre ce genre d'évènements. :/
    Tu peux poser la question sur le forum officiel de forumactif, mais ça ne sera pas possible je pense.

    En javascript, ce qu'on faire éventuellement c'est triche et à chaque fois qu'un membre poste dans un forum précis, on fait une recherche pour voir les sujet qu'il a ouvert dans ce forum. Mais je pense que cela sera quelque chose d'assez lourd à faire...

    Si tu peux faire dans une version où les membres viennent eux même demander leurs badges dans un topic, je te le conseille vivement Wink

    Nihil Scar Winspeare a écrit:Souhaites-tu également afficher les badges dans le profil pour l'affichage des messages ?
    Je parlais du profil à gauche des messages, par exemple ici : https://i.imgur.com/R2GH6Hi.png

    Ici le profil est personnalisé, mais en cliquant sur "The Spirit" on peut voir les champs du profil. Est ce que tu souhaites afficher aussi les badges sur les pages de message ou bien seulement sur la page de profil d'un membre (^-^) ?

    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Ven 13 Nov 2015 - 18:21

    Bonjour :)
    Seulement sur la page de profil d'un membre.
    Ah c'est dommage que sa ne puisse marcher :/ Bon bah je vais devoir tout faire manuellement du coup. Mais comment je l'installe donc sur la page du profil d'un membre du coup ? ^^'
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 15 Nov 2015 - 22:09

    Hello :)

    J'ai fait un test sur mon forum test, et le système marche bien, je te décris comment cela fonctionne et tu me dis ça te convient :

    1 / On crée une page HTML avec tous nos badges. J'ai repris ton modèle :

    Code:
    <!doctype html>
    <html lang="fr">
    <head>
      <meta charset="utf-8" />
      <title>Mes supers badges</title>
    <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.eternia-fr.net/images/plb/sprites/003.png" title="Avoir participé à un débat" class="pas_obtenue badge_0">
        <img src="http://www.eternia-fr.net/images/plb/sprites/004.png" title="Avoir gagné 1 concours" class="pas_obtenue badge_1">
        <img src="http://www.eternia-fr.net/images/plb/sprites/005.png" title="Avoir gagné 3 concours" class="pas_obtenue badge_2">
        <img src="http://www.eternia-fr.net/images/plb/sprites/006.png" title="Avoir gagné 5 concours" class="pas_obtenue badge_3">
        <img src="http://www.eternia-fr.net/images/plb/sprites/009.png" title="Avoir été élu membre du mois" class="pas_obtenue badge_4">
        <img src="http://www.eternia-fr.net/images/plb/sprites/018.png" title="Avoir vaincu le champion Vol" class="pas_obtenue badge_5">
        <img src="http://www.eternia-fr.net/images/plb/sprites/025.png" title="Avoir posté un message dans Animé" class="pas_obtenue badge_6">
        <img src="http://www.eternia-fr.net/images/plb/sprites/026.png" title="Avoir posté 5 messages dans Animé" class="pas_obtenue badge_7">
        <img src="http://www.eternia-fr.net/images/plb/sprites/065.png" title="Avoir vaincu le champion Psy" class="pas_obtenue badge_8">
        <img src="http://www.eternia-fr.net/images/plb/sprites/068.png" title="Avoir vaincu le champion Combat" class="pas_obtenue badge_9">
        <img src="http://www.eternia-fr.net/images/plb/sprites/102.png" title="Avoir fêté Pâcques avec nous" class="pas_obtenue badge_10">
        <img src="http://www.eternia-fr.net/images/plb/sprites/103.png" title="Avoir fêté une deuxième fois Pâcques avec nous" class="pas_obtenue badge_11">
        <img src="http://www.eternia-fr.net/images/plb/sprites/110.png" title="Avoir vaincu le champion Poison" class="pas_obtenue badge_12">
        <img src="http://www.eternia-fr.net/images/plb/sprites/120.png" title="Avoir créé une boutique" class="pas_obtenue badge_13">
        <img src="http://www.eternia-fr.net/images/plb/sprites/121.png" title="Avoir acheté dans l'une des boutiques" class="pas_obtenue badge_14">
        <img src="http://www.eternia-fr.net/images/plb/sprites/133.png" title="L'avoir acheté dans la boutique" class="pas_obtenue badge_15">
        <img src="http://www.eternia-fr.net/images/plb/sprites/134.png" title="L'avoir acheté dans la boutique" class="pas_obtenue badge_16">
        <img src="http://www.eternia-fr.net/images/plb/sprites/135.png" title="L'avoir acheté dans la boutique" class="pas_obtenue badge_17">
        <img src="http://www.eternia-fr.net/images/plb/sprites/136.png" title="Avoir commenté 5 fois une news" class="pas_obtenue badge_18">
        <img src="http://www.eternia-fr.net/images/plb/sprites/154.png" title="Avoir vaincu le champion Plante" class="pas_obtenue badge_19">
        <img src="http://www.eternia-fr.net/images/plb/sprites/157.png" title="Avoir vaincu le champion Feu" class="pas_obtenue badge_20">
        <img src="http://www.eternia-fr.net/images/plb/sprites/160.png" title="Avoir vaincu le champion Eau" class="pas_obtenue badge_21">
        <img src="http://www.eternia-fr.net/images/plb/sprites/181.png" title="Avoir gagné un match UU" class="pas_obtenue badge_22">
        <img src="http://www.eternia-fr.net/images/plb/sprites/183.png" title="L'avoir acheté dans la boutique" class="pas_obtenue badge_23">
        <img src="http://www.eternia-fr.net/images/plb/sprites/184.png" title="Avoir gagné un match OU" class="pas_obtenue badge_24">
        <img src="http://www.eternia-fr.net/images/plb/sprites/193.png" title="Avoir fait une suggestion pour le forum" class="pas_obtenue badge_25">
        <img src="http://www.eternia-fr.net/images/plb/sprites/196.png" title="Avoir présenté une astuce ou une soluce" class="pas_obtenue badge_26">
        <img src="http://www.eternia-fr.net/images/plb/sprites/197.png" title="Avoir vaincu le champion Ténèbres" class="pas_obtenue badge_27">
        <img src="http://www.eternia-fr.net/images/plb/sprites/225.png" title="Avoir fêté Noël avec nous" class="pas_obtenue badge_28">
        <img src="http://www.eternia-fr.net/images/plb/sprites/230.png" title="Avoir crée une distribution" class="pas_obtenue badge_29">
        <img src="http://www.eternia-fr.net/images/plb/sprites/234.png" title="Avoir fêté une deuxième fois Noël avec nous" class="pas_obtenue badge_30">
        <img src="http://www.eternia-fr.net/images/plb/sprites/235.png" title="Avoir créé un topic dans Les Artistes Naufragés" class="pas_obtenue badge_31">
        <img src="http://www.eternia-fr.net/images/plb/sprites/242.png" title="Avoir partagé sa Base Secrète" class="pas_obtenue badge_32">
        <img src="http://www.eternia-fr.net/images/plb/sprites/246.png" title="Avoir voté 10 fois pour le forum" class="pas_obtenue badge_33">
        <img src="http://www.eternia-fr.net/images/plb/sprites/247.png" title="Avoir voté 30 fois pour le forum" class="pas_obtenue badge_34">
        <img src="http://www.eternia-fr.net/images/plb/sprites/248.png" title="Avoir voté 50 fois pour le forum" class="pas_obtenue badge_35">
        <img src="http://www.eternia-fr.net/images/plb/sprites/252.png" title="Avoir fait 1 fiche stratégique" class="pas_obtenue badge_36">
        <img src="http://www.eternia-fr.net/images/plb/sprites/253.png" title="Avoir fait 3 fiches stratégiques" class="pas_obtenue badge_37">
        <img src="http://www.eternia-fr.net/images/plb/sprites/254.png" title="Avoir fait 5 fiches stratégiques" class="pas_obtenue badge_38">
        <img src="http://www.eternia-fr.net/images/plb/sprites/255.png" title="Avoir participé à 5 tombolas" class="pas_obtenue badge_39">
        <img src="http://www.eternia-fr.net/images/plb/sprites/256.png" title="Avoir gagné à 3 tombolas" class="pas_obtenue badge_40">
        <img src="http://www.eternia-fr.net/images/plb/sprites/257.png" title="Avoir gagné à 5 tombolas" class="pas_obtenue badge_41">
        <img src="http://www.eternia-fr.net/images/plb/sprites/258.png" title="L'avoir acheté dans la boutique" class="pas_obtenue badge_42">
        <img src="http://www.eternia-fr.net/images/plb/sprites/259.png" title="Avoir participé à 3 distributions" class="pas_obtenue badge_43">
        <img src="http://www.eternia-fr.net/images/plb/sprites/260.png" title="Avoir participé à 3 distributions" class="pas_obtenue badge_44">
        <img src="http://www.eternia-fr.net/images/plb/sprites/263.png" title="Avoir présenté un jeu hormis Pokémon" class="pas_obtenue badge_45">
        <img src="http://www.eternia-fr.net/images/plb/sprites/264.png" title="Avoir présenté 3 jeux hormis Pokémon" class="pas_obtenue badge_46">
        <img src="http://www.eternia-fr.net/images/plb/sprites/269.png" title="Avoir au moin fait 3 suggestions pour le forum" class="pas_obtenue badge_47">
        <img src="http://www.eternia-fr.net/images/plb/sprites/282.png" title="Avoir participé à un tournoi" class="pas_obtenue badge_48">
        <img src="http://www.eternia-fr.net/images/plb/sprites/284.png" title="Avoir vaincu le champion Insecte" class="pas_obtenue badge_49">
        <img src="http://www.eternia-fr.net/images/plb/sprites/298.png" title="Avoir voter à un sondage hebdomadaire" class="pas_obtenue badge_50">
        <img src="http://www.eternia-fr.net/images/plb/sprites/310.png" title="Avoir vaincu le champion Electrique" class="pas_obtenue badge_51">
        <img src="http://www.eternia-fr.net/images/plb/sprites/323.png" title="Avoir vaincu le champion Sol" class="pas_obtenue badge_52">
        <img src="http://www.eternia-fr.net/images/plb/sprites/359.png" title="Avoir participé au moins une fois à la Gazette du forum" class="pas_obtenue badge_53">
        <img src="http://www.eternia-fr.net/images/plb/sprites/367.png" title="L'avoir acheté dans la boutique" class="pas_obtenue badge_54">
        <img src="http://www.eternia-fr.net/images/plb/sprites/368.png" title="Avoir créé une tombola" class="pas_obtenue badge_55">
        <img src="http://www.eternia-fr.net/images/plb/sprites/376.png" title="Avoir vaincu le maître de PokéIsland" class="pas_obtenue badge_56">
        <img src="http://www.eternia-fr.net/images/plb/sprites/377.png" title="Avoir vaincu le champion Roche" class="pas_obtenue badge_57">
        <img src="http://www.eternia-fr.net/images/plb/sprites/378.png" title="L'avoir acheté dans la boutique" class="pas_obtenue badge_58">
        <img src="http://www.eternia-fr.net/images/plb/sprites/379.png" title="Avoir vaincu le champion Acier" class="pas_obtenue badge_59">
        <img src="http://www.eternia-fr.net/images/plb/sprites/380.png" title="Avoir 10 amis" class="pas_obtenue badge_60">
        <img src="http://www.eternia-fr.net/images/plb/sprites/381.png" title="Avoir 20 amis" class="pas_obtenue badge_61">
        <img src="http://www.eternia-fr.net/images/plb/sprites/384.png" title="Avoir gagné un match en UBER" class="obtenue badge_62">
        <img src="http://www.eternia-fr.net/images/plb/sprites/385.png" title="Avoir fêté la nouvelle année avec nous" class="pas_obtenue badge_63">
        <img src="http://www.eternia-fr.net/images/plb/sprites/386.png" title="Avoir aidé le forum à être au moins une fois 1er sur un top-site" class="pas_obtenue badge_64">
        <img src="http://www.eternia-fr.net/images/plb/sprites/456.png" title="Avoir présenté une RMT" class="pas_obtenue badge_65">
        <img src="http://www.eternia-fr.net/images/plb/sprites/457.png" title="Avoir présenté 3 RMT" class="pas_obtenue badge_66">
        <img src="http://www.eternia-fr.net/images/plb/sprites/461.png" title="Avoir été au moins une fois champion" class="pas_obtenue badge_67">
        <img src="http://www.eternia-fr.net/images/plb/sprites/470.png" title="Avoir posté sa liste de shiny" class="pas_obtenue badge_68">
        <img src="http://www.eternia-fr.net/images/plb/sprites/471.png" title="Avoir vaincu le champion Glace" class="pas_obtenue badge_69">
        <img src="http://www.eternia-fr.net/images/plb/sprites/474.png" title="Avoir vaincu le champion Normal" class="pas_obtenue badge_70">
        <img src="http://www.eternia-fr.net/images/plb/sprites/475.png" title="Avoir gagné un tournoi" class="pas_obtenue badge_71">
        <img src="http://www.eternia-fr.net/images/plb/sprites/477.png" title="Avoir vaincu le champion Spectre" class="pas_obtenue badge_72">
        <img src="http://www.eternia-fr.net/images/plb/sprites/479.png" title="L'avoir acheté dans une boutique" class="pas_obtenue badge_73">
        <img src="http://www.eternia-fr.net/images/plb/sprites/483.png" title="Avoir participé à 3 soirées de shasse" class="pas_obtenue badge_74">
        <img src="http://www.eternia-fr.net/images/plb/sprites/484.png" title="Avoir participé à 5 soirées de shasse" class="pas_obtenue badge_75">
        <img src="http://www.eternia-fr.net/images/plb/sprites/486.png" title="Avoir les 3 Badges Golem" class="pas_obtenue badge_76">
        <img src="http://www.eternia-fr.net/images/plb/sprites/487.png" title="Avoir le Badge Palkia et Dialga" class="pas_obtenue badge_77">
        <img src="http://www.eternia-fr.net/images/plb/sprites/489.png" title="Être inscrit depuis 6 mois" class="pas_obtenue badge_78">
        <img src="http://www.eternia-fr.net/images/plb/sprites/490.png" title="Être inscrit depuis 1 an" class="pas_obtenue badge_79">
        <img src="http://www.eternia-fr.net/images/plb/sprites/493.png" title="Avoir été Administrateur" class="pas_obtenue badge_80">
        <img src="http://www.eternia-fr.net/images/plb/sprites/494.png" title="Avoir gagné à un concours Inter-Forum" class="pas_obtenue badge_81">
        <img src="http://www.eternia-fr.net/images/plb/sprites/510.png" title="Avoir gagné un match NU" class="pas_obtenue badge_82">
        <img src="http://www.eternia-fr.net/images/plb/sprites/523.png" title="Avoir fait une astuce stratégique" class="pas_obtenue badge_83">
        <img src="http://www.eternia-fr.net/images/plb/sprites/572.png" title="Avoir gagné un match RU" class="pas_obtenue badge_84">
        <img src="http://www.eternia-fr.net/images/plb/sprites/573.png" title="Avoir gagné un match LC" class="pas_obtenue badge_85">
        <img src="http://www.eternia-fr.net/images/plb/sprites/612.png" title="Avoir vaincu le champion Dragon" class="pas_obtenue badge_86">
        <img src="http://www.eternia-fr.net/images/plb/sprites/631.png" title="S'être présenté" class="pas_obtenue badge_87">
        <img src="http://www.eternia-fr.net/images/plb/sprites/647.png" title="Cadeau pour les 1 an du forum" class="pas_obtenue badge_88">
        <img src="http://www.eternia-fr.net/images/plb/sprites/648.png" title="Cadeau pour les 2 ans du forum" class="pas_obtenue badge_89">
        <img src="http://www.eternia-fr.net/images/plb/sprites/649.png" title="Avoir été Modérateur" class="pas_obtenue badge_90">
        <img src="http://www.eternia-fr.net/images/plb/sprites/672.png" title="Avoir créé 5 fiches de Pokédex" class="pas_obtenue badge_91">
        <img src="http://www.eternia-fr.net/images/plb/sprites/673.png" title="Avoir créé 10 fiches de Pokédex" class="pas_obtenue badge_92">
        <img src="http://www.eternia-fr.net/images/plb/sprites/700.png" title="Avoir vaincu le champion Fée" class="pas_obtenue badge_93">
        <img src="http://www.eternia-fr.net/images/plb/sprites/710.png" title="Avoir fêté Halloween avec nous" class="pas_obtenue badge_94">
        <img src="http://www.eternia-fr.net/images/plb/sprites/711.png" title="Avoir fêté une deuxième fois Halloween avec nous" class="pas_obtenue badge_95">
    </div>
    </body>
    </html>


    Si on regarde, la structure, chaque image ressemble à ceci :
    Code:
    <img src="http://www.eternia-fr.net/images/plb/sprites/711.png" title="Avoir fêté une deuxième fois Halloween avec nous" class="pas_obtenue badge_95">

    Ce qui nous intéresse ici est le  badge_95. Pour chaque badge j'ai rajouté une classe supplémentaire. Ici, j'ai simplement mis un chiffre, mais tu aurais pu mettre "halloween_2" par exemple :)

    Le but c'est d'avoir une classe supplémentaire et unique (^-^)

    ___

    Ensuite, dans le panneau d'admin, on a un champ "Zone de texte", où les modo / admin (je ne sais pas) pourrons écrire les classes pour chaque badges.

    Ainsi on peut avoir comme contenu pour un membre qui a les badge_2 et badge_3 :
    Code:
    badge_2;badge_3

    Si j'avais personnalisé le nom de mes badges dans le HTML, je pourrais avoir par exemple :
    Code:
    halloween2;concours1;tombolas3

    Je mets simplement des noms qui sont plus parlant (^-^)
    ___

    Puis ensuite le javascript affiche en bas du profil les badges avec ceux qu'on a, ceux qu'on a pas :)
    Les champs de profil qui contient le code est masqué, donc les membres ne voient même pas qu'il existe (^-^)
    Code:
    halloween2;concours1;tombolas3

    Du coup est ce qu'un système comme ça te conviendrait ?


    Dernière édition par Nihil Scar Winspeare le Mer 21 Déc 2016 - 22:51, édité 1 fois
    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Sam 21 Nov 2015 - 23:52

    Bonsoir :)
    J'essaye de mettre en place votre système mais je n'y arrive malheureusement pas :/ Je ne comprend pas qu'en vous dites d'aller sur le panneau d'administration pour aller dans "Zone de texte" car en faite, je ne trouve tout simplement pas cette option x).

    J'ai modifié mon code en :
    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>
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 22 Nov 2015 - 0:06

    Coucou Iguolta,

    De toutes les façons sans le code javascript que je ne t'ai pas encore donné cela ne pourra pas marcher. (^-^)
    Avant de te continuer à travailler dessus puis te le transmettre, je tenais à savoir si cette méthode te convenait (histoire de ne pas "coder dans le vent") :)

    Quand je parle de "Zone de texte", je parle des champs du profil Wink
    Il s'agit de créer un champ de profil personnalisé, de type "Zone de texte".

    Pour le code HTML super, je parlais exactement de ça !

    Du coup, si le système te convient dis le moi, je vais continuer mon code. Si tu as la moindre question ou bien un flou n'hésite pas :)
    Donc, si c'est OK, je t'invite également à éditer le titre de ton sujet pour préciser [Nihil] tout au début. Cela indique que la demande de LS est prise :)

    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Dim 22 Nov 2015 - 12:16

    Bonjour :) Merci d'avoir répondu rapidement ^^

    J'ai une petite question, est-ce qu'ils verront uniquement les badges qu'ils ont reçu ou également ceux qu'ils n'ont pas encore eu ? Sinon, votre système me convient mais où se situera très exactement les badges sur le profil ? Histoire que je me visualise le résultat :)

    Bonne journée ^^
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 22 Nov 2015 - 12:20

    lls auront un affichage comme ici → https://i.servimg.com/u/f21/18/84/01/39/quelqu10.png tous les badges sont affichés et seuls ceux obtenus sont en jaune.

    Le placement sera là → https://i.servimg.com/u/f21/18/84/01/39/locali10.jpg
    En bas de la page, mais n'apparaitra que dans l'onglet "Profil"

    Comment ça marche ? En fait c'est comme si le code de la page HTML actuelle se retrouvait en bas de profil (à l'emplacement indiqué). Ensuite, seul ceux que le membre a activé auront la classe nommée "obtenue"

    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Dim 22 Nov 2015 - 12:41

    C'est exactement ce que je recherche donc ce système me convient parfaitement :)
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 22 Nov 2015 - 13:09

    Super :)

    Juste, pour faciliter un dernier test est ce que tu pourrais me communiquer :
    → le lien de ton forum
    → le lien de la page html où tu as mis tous tes badges
    → pourrais-tu rajouter dans ton panneau d'administration un champ personnalisé de type "Zone de texte" visible seulement dans le profil (pas les messages) et visible en invité. Voici la configuration sur mon forum test si ça peut t'aider → https://i.imgur.com/nj3IyYL.png
    Il faudrait qu'il s'appelle "Badges obtenus". Cela me permettra de vérifier un dernier truc sur ton forum

    Bonne journée !

    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Dim 22 Nov 2015 - 13:36

    Lien de mon forum : http://www.pokeisland.net
    Lien HTML des badges : http://www.pokeisland.net/h11-les-nouveaux-badges
    Et j'ai rajouter "Badges obtenus" Wink

    Bonne journée :)
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 22 Nov 2015 - 14:44

    Alors j'ai fait un essai qui marche plutôt bien sur mon forum test.

    PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript
    On va rajouter ce code là en choisissant de l'afficher sur toutes les pages. Je te conseille de lui donner un nom clair pour le retrouver plus facilement ensuite.


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

        })
    }


    Ensuite, dans un profil, par exemple le tien, tu peux rajouter des badges, par exemple :
    Code:
    debat01;concours1;concours2

    Normalement le code marche tel quel :)

    Petite précision, si le membre peut éditer le champ "Badges obtenus", le champ ne disparaitra, pour qu'il puisse encore le changer directement en passant par la modification rapide. Par contre si c'est un simple membre qui n'a pas les autorisations pour cela, la ligne sera enlevée :)

    Si quoi que ce soit ne fonctionne pas, pas de panique : donne moi simplement le lien du profil où normalement cela devrait fonctionner et je regarderai ce qui cause problème :)

    Note : dans ta page HTML actuelle, il y a un badge qui a classe "obtenue", je te conseille de l'enlever, car sinon tous les membres l'auront en activé Wink.

    Voilà, j'espère que tout va bien aller, si tu ne comprends pas quelque chose, je suis là !


    Dernière édition par Nihil Scar Winspeare le Mer 21 Déc 2016 - 22:52, édité 2 fois
    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Dim 22 Nov 2015 - 16:31

    J'ai essayer mais je ne vois aucun changement. Voici ce que j'ai mis dans la Zone de texte, j'ai peut être mal compris et donc mal fait les choses :
    Nihil - [Nihil] Système de badge A_effa10

    Profil en question, le miens, donc ici : http://www.pokeisland.net/u1

    Merci d'avance :)
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 22 Nov 2015 - 17:07

    Top, c'est juste un tout petit soucis, parfois les noms des champs de profil n'ont pas de span avec la couleur autour on dirait. Pour palier à ça on va juste remplacer cette ligne là :

    Code:
    var $profilBadges = $("dt:contains('Badges obtenus')").closest("dl");


    En mettant "dt" à la place de "span" :)

    Code:
    var $profilBadges = $("span:contains('Badges obtenus')").closest("dl");


    Cela devrait régler le soucis Wink

    Si ça ne fonctionne pas, tu peux directement reprendre le code ici, je l'ai modifié aussi ^-^ => https://www.never-utopia.com/t57920-nihil-systeme-de-badge#882269


    Dernière édition par Nihil Scar Winspeare le Mer 21 Déc 2016 - 22:52, édité 1 fois
    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Dim 22 Nov 2015 - 17:52

    Sa marche ^^ Merci mais est-ce que c'est possible de centrer tout les badges, de mettre un cadre et un titre ?
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 22 Nov 2015 - 18:01

    Dans le CSS de ton forum tu peux rajouter ceci pour centrer et rajouter une bordure. J'ai également mis une toute petite marge :
    Code:
    /* style bloc badges */
    #badges-profil {
        border: 2px solid #eed02d;
        margin: 2px 2px 25px;
        text-align: center;
    }

    Pour le titre tu peux soit l'ajouter dans la page HTML, soit simplement le mettre en CSS avec ce code :
    Code:
    #badges-profil:before {
        content: "Badges obtenus";
        display: block;
        background: #eed02d url("http://2img.net/i/fa/subsilver/back_title_yellow.gif") repeat;
        border-bottom: 1px solid white;
        color: #20305e;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 5px;
        padding: 5px;
    }

    Le résultat → https://i.imgur.com/0bQZIaN.png

    ___

    Attention au fait dans le CSS de img.obtenue sur ton forum, il y a encore cette ligne là :
    Code:
    filter: grayscale(100%);

    Du coup sur firefox, l'image est en noir et blanc même une fois obtenue Wink (pas sur Chrome)

    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Dim 22 Nov 2015 - 18:57

    Merci beaucoup pour votre aide ^^ Tout me semble correct :)

    Bonne journée ! Wink
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Mer 8 Mai 2024 - 0:15