AccueilFAQRechercherMembresGroupesS'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.


    (GinKitsune) Système de collection dans les profils

    Partagez
    avatar
    CaraDelevngnie
    FémininAge : 19Messages : 370

    le Lun 18 Sep 2017 - 8:48

    Rappel du premier message :

    Ma demande



    Bonjour les amis :ange:
    Alors voilà, je ne sais pas trop si je peux faire ce type de demande... Mais après tout, c'est quand même du codage pour un élément de forum, alors j'imagine que je peux xD
    J'aimerai mettre en forme un endroit sous le profil où je pourrais créer des collections pour les membres. Je m'explique :
    Le principe est que quand un membre fait tel action (avoir posté X messages, X rps, X fois dans le flood, participé à une intrigue, etc) il reçoit un trophée qui sera placé dans sa collection en-dessous de son profil, je vous fais un petit schéma plus bas ! Oui, voilà le soucis c'est que j'ai l'impression de carrément plagier NU, et c'est un peu gênant donc je comprendrai si vous refusez pas demande Embarassed
    Il y aurait plusieurs collections du style Pierres & cristaux, couleur, plantes, signe astrologique, planète, etc. bref tout ce qui touche à la sorcellerie en réalité comme c'est le thème du forum. C'est fou ce que les choses sont bien faites ! Et lorsque le membre à complété sa collection, il recevrait un petit cadeau ainsi qu'un trophée ultime de la collection :zen: (Je profite pour dire à ma membre Akie, que si elle passe par ici, qu'elle est prié d'être sous secret professionnel et de n'en parler à personne ! :angry: )
    Bref, je sais pas si j'ai été claire, je vous mets le max d'infos possible ci-dessous !


    Schéma(s) et Eléments


    Schémas :
    État des profils actuels:
    Ce que je souhaiterai:
    Tailles des éléments : Je ne les connais pas, mais si vous en avez besoin, dites-moi juste où je peux les trouver :chomp:
    À part les images de taille 65*65 \o/
    Effets voulus : Si possible, juste au passage de la souris avoir le nom du trophée
    Version de votre forum : PHPBB2


    Ressources


    Pour les couleurs utilisées : #FAF5BE pour l'écriture, #5C282C pour le fond, #454545 pour les fonds de sous-titre et un simple noir pour le fond du titre, maintenant libre à vous de mettre les couleurs que vous souhaitez pour le LS, je saurais toujours me dépatouiller ! ^^

    Pour l'affichage des profils, j'utilise un LS trouvé sur le site CCCrush et j'ignore si je peux vous le poster ici ou pas ou même s'il vous sera utile, si besoin demandez !


    Autres précisions ?


    Du coup, j'imagine que chaque code doit être propre à chaque membre, je crois que je ne sais pas dans quelle aventure je me lance xD N'hésitez pas à me demander si vous avez besoin de précisions supplémentaires, ou me dire ce qui ne va pas... Enfin je sais pas, mais si vous avez quelque chose à dire, dites-le !



    Dernière édition par CaraDelevngnie le Mar 5 Déc 2017 - 23:41, édité 3 fois



    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Ven 1 Déc 2017 - 12:16

    Merci beaucoup Zaw !!! :heart:
    Je vais pouvoir m'occuper de ça ^^ !



    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Lun 18 Déc 2017 - 20:38

    Coucou par ici :)

    Ca va, ça avance ? Il y a besoin d'un petit coup de main ? :hudada:

    Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de ce problème.
    Attention, l'absence de réponse à ce message entrainera l'archivage du topic d'ici une dizaine de jours.
    avatar
    CaraDelevngnie
    FémininAge : 19Messages : 370

    le Lun 18 Déc 2017 - 22:10

    Coucouuu ! Oui c'est toujours d'actualité :friends:
    Pour l'instant c'est GinKitsune qui gère tout, donc je ne sais pas si elle a besoin d'aide ou non ^-^



    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Lun 18 Déc 2017 - 22:44

    Coucou !

    J'avoue me noyer dans le Javacript XDD Tout le reste est fait (et j'espère ne pas avoir mal fait) mais je n'arrive pas à m'en sortir avec le JS ...

    Je ne serais pas contre un coup de main :aww: Si ça ne dérange pas :ange:



    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Ven 22 Déc 2017 - 21:46

    Coucou ! Merci d'avoir répondu aussi vite Nihil ♥

    Comme sur ce topic, j'ai crée la page html, la zone de texte dans les champs de profils et les nouvelles classes pour chaque badge (et j'espère l'avoir fait correctement).

    Mais, lorsque j'utilise ensuite le javascript et que j'essaye de le remplir selon les conseils indiqués ça ne fonctionne pas .. :/ Je me suis sans doute trompée (plusieurs fois) mais je ne sais pas où .. :titanic: J'ai réessayer depuis le code de base 5 fois mais c'est toujours pas bon ... :wall:

    Donc, comme je commence à désespérer, je veux bien un coup de main

    Je ne sais pas ce dont vous avez besoin donc je met ce que je pense utile :

    - forum test : http://noname18.forumgratuit.be/
    - profil avec les badges : http://noname18.forumgratuit.be/u1
    - page html des badges : http://noname18.forumgratuit.be/h10-collections-profil
    J'ai fait la même zone de texte "Badges obtenus" visible en invité.

    Et voici mon JS qui doit être bourré d'erreurs et je m'en excuse :
    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 = "10"; /* 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(couleursrouge).split(";");

                    /* pour chaque badge, on ajoute la classe si besoin */
                    for (var i = 0, l = badgesUser; i < l; i++) {
                        if (badgesUser[i].length > 0) {
                            try {
                                $badges.find("couleursrouge" + badgesUser[i].trim()).addClass("oui").removeClass("non");
                            } 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 beaucoup d'avance et merci d'avoir pris le temps de lire mon pavé ^^ ♥



    avatar
    CaraDelevngnie
    FémininAge : 19Messages : 370

    le Dim 7 Jan 2018 - 11:35

    (Toujours d'actu ♥)



    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Dim 14 Jan 2018 - 21:08

    Oups, j'avais complètement oublié de topic :toto:

    Ce sujet peut être utile http://www.never-utopia.com/t64412-resolu-systeme-de-badges-de-nihil

    En fait la commande avait été faite pour un forum qui n'était pas en phpbb2, et avec un profil avancé. Dans le sujet au dessus, j'ai fait quelques modifs

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

    par :
    Code:
    var $profilBadges = $("#field_id1");


    ---
    J'ai vu également que tu avais remplacé la ligne :
    Code:
    var badgesUser = $profilBadges.find(".field_uneditable").text(couleursrouge).split(";");
    Normalement il n'y a pas le "couleursrouge", c'est :
    Code:
    var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");

    En gros on lui dit "trouve le texte dans ce champs du profil et découpe le en fonction des points virgules"
    J'ai pas touuuut relu encore, mais on peut déjà corriger ça :)
    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Lun 15 Jan 2018 - 9:18

    Pas de problème ! On a tous beaucoup de choses à penser :coeur:

    Merci beaucoup d'avoir pris le temps de t'en occuper ♥

    J'ai fait les modifications que tu m'as demander et je regardais le lien ce soir lorsque j'aurais le temps !

    Encore merci ! Bonne semaine ! :)



    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Sam 20 Jan 2018 - 22:00

    :up:



    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Jeu 8 Fév 2018 - 16:10

    :up:



    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Mar 13 Fév 2018 - 14:56

    :up:



    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Lun 12 Mar 2018 - 22:47

    Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de ce problème.
    Attention, l'absence de réponse à ce message entrainera l'archivage du topic d'ici une dizaine de jours.


    Olalala, ce sujet dure depuis tellement longtemps, je suis désolée T___T

    Est ce que je pourrais avoir le code complet du template + le nouveau code JS s'il te plait ?

    Je copie les liens pour ne pas les perdre :
    - forum test : http://noname18.forumgratuit.be/
    - profil avec les badges : http://noname18.forumgratuit.be/u1
    - page html des badges : http://noname18.forumgratuit.be/h10-collections-profil



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Mer 14 Mar 2018 - 22:52

    Coucou ! Oui c'est toujours d'actu ^^

    Pas de problème :3

    Voilà le JS :
    Code:
    /*
     * SYSTEME DE BADGE 
     * LIBRE SERVICE NEVER UTOPIA
     */

    /* on vérifie si on est bien sur la page de profil */
    if (/^\/u\d+$/.test(document.location.pathname)) {
        var idPage = "10"; /* 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 = $("#field_id1");

                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("oui").removeClass("non");
                            } 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);
            });

        })
    }

    Et le code complet de quel template ? Celui du profil ?



    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Jeu 15 Mar 2018 - 12:10

    Coucou :)

    Sorry je passe en vitesse du coup je vais à l'essentiel T_T, je suis désolée >-<. Je voulais parler du template du profil :)

    Je sais plus si on en avait posté le lien avant mais il y a ce topic qui peut aider : http://www.never-utopia.com/t62158-badges-sur-profil-simple#947392

    Un premier petit truc dans la page HTML c'est qu'il faut entourer l'ensemble des badges par une div avec l'id badges-profil :hudada:



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Jeu 15 Mar 2018 - 14:48

    Coucou !

    J'ai rajouté la div avec l'id "badges-profil" :)

    Ah ! D'accord. Donc voici le template du profil :
    Code:
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
    <div class="PFIL"><div class="namePFIL">{L_ABOUT_USER}</div>
    <div class="avPFIL"><div id="adminPFIL"><div><!-- BEGIN switch_auth_user --><span>{L_ADMINISTRATE_USER} :</span> {ADMINISTRATE_USER}{BAN_USER}<!-- END switch_auth_user --></div></div>{AVATAR_IMG}</div>

    <div class="boxPFIL"><div class="sbjPFIL"><a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a></div><div class="msgPFIL"><a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></div><div id="lstPFIL"><span>{L_LAST_VISITED} :</span> {LAST_VISIT_TIME}</div><br/>

    <div class="abtPFIL"><!-- BEGIN profile_field --><div id="field_id{profile_field.ID}"><div><span class="gen">{profile_field.LABEL}</span> {profile_field.CONTENT}</div></div><!-- END profile_field --></div><div id="ktactPFIL"><!-- BEGIN contact_field --><div class="ktactPFIL">{contact_field.CONTENT}</div><!-- END contact_field --></div>
    </div>
    <!-- BEGIN switch_rpg -->
    <div class="boxRPG"><div style="float:left; margin:10px;">{RPG_IMAGE}</div>
     <!-- BEGIN rpg_fields -->
     <span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span> {switch_rpg.rpg_fields.F_VALUE_NEW}<br/>
     <!-- END rpg_fields -->
     {U_ADMIN_RPG}
     </div>
     <!-- END switch_rpg -->
    <!-- BEGIN switch_admin_user_comment_active --><span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span> {ADMIN_USER_COMMENT}<!-- END switch_admin_user_comment_active -->
    </div>
    </table>
    <br />
    <script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
     $(document).ready(function(){
     $('[id^=field_id]').each(function(){
     if ( $(this).find('.field_editable').is('span, div') )
     {
     $(this).hover(function()
     {
     if( $(this).find('.field_editable.invisible').is('span, div') )
     {
     $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
     $(this).find('.ajax-profil_edit').attr({
     alt: "{L_FIELD_EDIT_VALUE}",
     title: "{L_FIELD_EDIT_VALUE}"
     }).click(function(){
     $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
     $(this).prev().find('.ajax-profil_valid').attr({
     alt: "{L_VALIDATE}",
     title: "{L_VALIDATE}"
     }).click(function(){
     var content = new Array();
     $(this).parent().find('[name]').each(function(){
     var type_special = $(this).is('input[type=radio],input[type=checkbox]');
     if ( (type_special && $(this).is(':checked')) || !type_special )
     {
     content.push(new Array($(this).attr('name'), $(this).attr('value')));
     }
     });
     var id_name = $(this).parents('[id^=field_id]').attr('id');
     var id = id_name.substring(8, id_name.length);
     $.post(
     "{U_AJAX_PROFILE}",
     {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
     function(data){
     $.each(data, function(i, item){
     $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
     });
     },
     "json"
     );
     });
     $(this).remove();
     });
     }
     },function()
     {
     if( $(this).find('.field_editable.invisible').is('span, div') )
     {
     $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
     $(this).find('.ajax-profil_edit').remove();
     }
     });
     }
     });
     });
    //]]>
    </script>
    <iframe style="height: 200%; width: 100%; margin: auto;" src="http://noname18.forumgratuit.be/h10-collections-profil" frameborder="0"></iframe>

    Et, j'ai fait les modifs comme proposées sur le topic et ça m'a permit d'enlever des erreurs. Mais ça ne fonctionne toujours pas ... :/
    Du coup, voilà mon Js après quelques modifications grâce au lien ^^ :
    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 = "10"; /* numéro de la page HTML */
        var idChamp = "field_id1"; /* ID du champ à modifier */


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

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

                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("oui").removeClass("non");
                            } 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);
            });

        })
    }

    Encore merci de m'aider ! ♥



    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Jeu 15 Mar 2018 - 15:02

    Normalement on y est preeeeesque !

    Tout à la fin :
    Code:
    $("#profile-advanced-details").closest("#page-body").after($badges);

    On va remettre comme avant, avec ça :
    Code:
    $("#page-body").after($badges);

    En fait la ligne avec "profile-advanced-details" c'est pour ceux qui activent le profil avancé de forumactif

    Il restera une modif en plus que je voudrai faire avant mais déjà ça devrait être un peu mieux 🤔

    Courage XD



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Ven 16 Mar 2018 - 20:39

    Ouiiiiiii \o/

    J'ai fais la modification ^^

    Courage à vous aussi ! Et merci beaucoup :aww:



    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Ven 16 Mar 2018 - 22:09

    On y est presque je crois :hudada:

    Le CSS des badges en fait il faut le mettre dans le CSS du forum aussi 🤔



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    GinKitsune
    FémininAge : 20Messages : 98

    le Sam 17 Mar 2018 - 14:47

    :omg: :omg: :omg: :omg: :omg: :omg: :omg: :omg: :omg: :omg: :omg:

    ça fonctionne !!!!!!! :omg: OMG ça y est ! C'est fait :joie:

    (désolée pour les emoji mais c'est tellement la joie !)

    Merciiiiiiii beaucoup !! C'est juste incroyable ! Vous êtes un vrai ange du codage !




    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Sam 17 Mar 2018 - 18:35

    Contente de voir que c'est bon :hudada: (et tu peux me tutoyer ;___; )
    Je continue de surveiller le sujet, hésite pas à prévenir en cas de problème.

    Au passage, le bloc de badges n'est pas centré sur toutes les largeurs d'écrans. Pour centrer un bloc, le mieux c'est de lui donner une largeur en CSS + des marges latérales automatiques.

    Exemple :
    Code:
    .example {
        width: 200px;
        margin: auto;
    }



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    anonimazur
    FémininAge : 50Messages : 14

    le Sam 14 Avr 2018 - 21:36

    Sujet très intéressant . Merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 18:15