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.

Le Deal du moment : -52%
Lecteur de Cartes SD/Micro SD, USB Type C Micro USB ...
Voir le deal
7.64 €

    Badges dans le profil des sujets. [EN PAUSE]

    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Dim 15 Déc 2019 - 22:17

    Bonjour,
    J'aurai grand besoin de votre aide et je vous dit déjà merci d'avance si vous tenter l'aventure ! :love:
    Je ne savais pas comment nommer ça, j'espère que ça ira... Embarassed Je pense également que cet endroit convient mieux à mon soucis que l'autre, désolée, je suis un peu perdue sur ce forum. Embarassed Embarassed
    Voilà, j'utilise depuis quelques temps le système de badges de Nihil pour profil simple sur mes forums privés et c'est super sympa pour "personnaliser" mes personnages, leur donner une personnalité en images un peu à la sims. Jusque là, tout va bien. J'ai eu la bonne idée de proposer à mes co-admins de faire la même chose sur notre forum ouvert qui marche plutôt bien pour lui donner un côté un peu ludique et amusant, réduire le profil niveau écriture et lui donner de la couleur ...
    Sauf que je bloque complètement sur comment amener les badges jusqu'au profil dans les sujets. scratch Je pense que le soucis vient du javascript qui n'est donc pas le même mais vu que je suis une grosse débutante dans l'histoire, je parviens à rien du tout. :euh: Si vous pouviez m'aider à trouver une solution ce serait super ! Embarassed

    https://inkedbystars.forumactif.com/t104-testing

    L'idée :
    Spoiler:
    Badges dans le profil des sujets. [EN PAUSE] 310

    Donc ce que j'ai utilisé c'est :
    - Utilisé ce système de badges de Nihil.
    - Système badge 2

    HTML Badges:
    Spoiler:
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <style>

    .default {
    display: none;
    }

    .default2 {
        height: 2em;
        margin: 5px;
    }
    </style> 
    <div id="badges-profil">
                                 <img src="https://i.postimg.cc/bwN4DfGm/printemps2.png" title="aime le printemps" class="default spring" />                <img src="https://i.postimg.cc/15KL33zg/t-2.png" title="aime l'été" class="default summer" />                <img src="https://i.postimg.cc/m24v4HTf/autumn2.png" title="aime l'automne" class="default fall" />                <img src="https://i.postimg.cc/9Q8KygZC/hiver.png" title="aime l'hiver" class="default winter" />                <img src="https://i.postimg.cc/767R8xcZ/b-lier.png" title="bélier" class="default bélier" />                <img src="https://i.postimg.cc/Zqv7pbJx/taureau.png" title="taureau" class="default nom" />                <img src="https://i.postimg.cc/c1RzFLwD/g-meau.png" title="gémeaux" class="default gémeaux" />                <img src="https://i.postimg.cc/PJjRdgsz/cancer.png" title="cancer" class="default cancer" />                <img src="https://i.postimg.cc/15yj21Ky/lion.png" title="lion" class="default lion" />                <img src="https://i.postimg.cc/Y91dDdG4/vierge.png" title="vierge" class="default vierge" />                <img src="https://i.postimg.cc/DzRNMWxN/balance.png" title="balance" class="default balance" />                <img src="https://i.postimg.cc/qvRZBcYY/scorpion.png" title="scorpion" class="default scorpion" />                <img src="https://i.postimg.cc/qv5DNhH7/sagittaire.png" title="sagittaire" class="default sagittaire" />                <img src="https://i.postimg.cc/yxyrxL7q/capricornus.png" title="capricorne" class="default capricorne" />                <img src="https://i.postimg.cc/JnwTQfnV/verseau.png" title="verseau" class="default verseau" />                <img src="https://i.postimg.cc/sDKNRHn7/poisson.png" title="poisson" class="default poisson" />                <img src="https://i.postimg.cc/ZRRMn8C0/single.png" title="est célibataire" class="default single" />                <img src="https://i.postimg.cc/5tzgjsmP/fianc-s.png" title="est fiancé" class="default fianced" />                <img src="https://i.postimg.cc/P59Ktg1p/married.png" title="est marrié" class="default married" />                <img src="https://i.postimg.cc/pTtZjKGP/s-par.png" title="est divorcé" class="default divorced" />                <img src="https://i.postimg.cc/3xdnQ80Q/inarelationship.png" title="est en couple" class="default couple" />                <img src="https://i.postimg.cc/Wbp5S623/lesbian.png" title="est un couple gay" class="default lesbian" />                <img src="https://i.postimg.cc/T1fCzngt/gay.png" title="est un couple gay" class="default gay" />                <img src="https://i.postimg.cc/HW9SQP1R/pregnant.png" title="est enceinte" class="default pregnant" />                <img src="https://i.postimg.cc/pX0qShTB/baby2.png" title="a des enfants" class="default baby" />                <img src="https://i.postimg.cc/ZnHV40L4/heartbroken.png" title="a le coeur brisé" class="default heartbroken" />                <img src="https://i.postimg.cc/Fsq0cjzw/lgbt.png" title="est lgbt+" class="default lgbt" />                <img src="https://i.postimg.cc/cJf7drs2/coffeelover.png" title="aime le café" class="default coffee" />                <img src="https://i.postimg.cc/76s54kTj/tealover.png" title="aime le thé" class="default tea" />                <img src="https://i.postimg.cc/m26ywvXX/cocktaillover.png" title="aime les cocktails" class="default cocktail" />                <img src="https://i.postimg.cc/7hZS19gr/gourmand.png" title="est gourmand" class="default food" />                  <img src="https://i.postimg.cc/ZRZ8n4nR/ecologiste.png" title="est écologiste" class="default ecolo" />                <img src="https://i.postimg.cc/7P9VCGgy/fastfoodlover2.png" title="aime les fastfood" class="default fastfood" />                <img src="https://i.postimg.cc/d3gD7j6B/vegetarian.png" title="est végétarien/vegan" class="default vegetarian" />                <img src="https://i.postimg.cc/mrScdMZL/sunny.png" title="est du matin" class="default morning" />                <img src="https://i.postimg.cc/442ckz6n/nightowl.png" title="est du soir" class="default night" />                <img src="https://i.postimg.cc/43G7bwg2/responsable.png" title="est responsable" class="default responsable" />                <img src="https://i.postimg.cc/RhpKgtR6/irresponsable.png" title="est irresponsable" class="default irresponsable" />                <img src="https://i.postimg.cc/mgvNxQG7/childlover.png" title="aime les enfants" class="default children" />                <img src="https://i.postimg.cc/Yqj1hXr1/hate-children.png" title="n'aime pas les enfants" class="default nochildren" />                <img src="https://i.postimg.cc/BQvC2SgP/bruyant.png" title="est bavard" class="default bavard" />                <img src="https://i.postimg.cc/wM17TGXM/travellover.png" title="aime voyager" class="default travel" />                <img src="https://i.postimg.cc/K8krs0CZ/fid-le.png" title="fidèle" class="default fidèle" />                <img src="https://i.postimg.cc/R0xfp4cR/loveoutdoor.png" title="aime la nature/être dehors" class="default nature" />                <img src="https://i.postimg.cc/5NHCx6gg/observateur.png" title="est observateur" class="default observateur" />                <img src="https://i.postimg.cc/CLWfdS6g/perfectionniste.png" title="est perfectionniste" class="default ruler" />                <img src="https://i.postimg.cc/XYfXJFCf/independant.png" title="est independant" class="default independant" />                <img src="https://i.postimg.cc/4NhmDj4F/clingy.png" title="est collant" class="default dependant" />                <img src="https://i.postimg.cc/VNHSQwtp/bienveillant.png" title="est extraverti" class="default outgoing" />                <img src="https://i.postimg.cc/GppB5t4v/lonewolf.png" title="est solitaire" class="default lonewolf" />                <img src="https://i.postimg.cc/HWFQ8wVR/ACTIF.png" title="aime bouger" class="default active" />                <img src="https://i.postimg.cc/KY4z5WWN/lazy.png" title="est fainéant" class="default lazy" />                <img src="https://i.postimg.cc/8cZBx91C/booklover.png" title="aime lire" class="default reader" />                <img src="https://i.postimg.cc/Y931mZLx/gamer.png" title="aime les jeux vidéos" class="default gamer" />                <img src="https://i.postimg.cc/k4WPqNZ8/artlover.png" title="aime l'art" class="default artlover" />                <img src="https://i.postimg.cc/wv0mBNnf/musiclover.png" title="aime la musique" class="default musiclover" />                <img src="https://i.postimg.cc/7hhTJ6kx/movielover.png" title="aime le cinéma" class="default cinemalover" />                <img src="https://i.postimg.cc/BbzPT0S2/netflix.png" title="est netflix and chill" class="default netflix" />                <img src="https://i.postimg.cc/fR9mvJ0y/likechess.png" title="aime les échecs" class="default chess" />                <img src="https://i.postimg.cc/ZRKWXR0r/target.png" title="aime le tir à l'arc" class="default archery" /> 
    </div>

    CSS :
    Spoiler:
    Code:
    /* style bloc badges */
    #badges-profil {
        border: 2px solid #eed02d;
        margin: 2px 2px 25px;
        text-align: center;
        margin-top:10px;
    }
    #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;
    }

    .default {
    display: none;
    }

    .default2 {
        height: 2em;
        margin: 5px;
    }

    Javascript pour profil simple :
    Spoiler:
    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 = "6"; /* 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 = $("#"+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("default2").removeClass("default");
                            } 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 */
              $(".badges-profil").html($badges);
            });

        })
    }

    J'ai ajouté : "<*div id="badges-profil"><*/div>" dans viewtopic_body.




    Dernière édition par bloomandwander le Jeu 19 Déc 2019 - 14:57, édité 2 fois
    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Jeu 19 Déc 2019 - 14:55

    Up Embarassed

    (Je pense que je peux, si j'ai bien compris. Je suis pas habituée aux ups acceptés. Embarassed )
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Sam 21 Déc 2019 - 16:46

    Hello !
    Les up sont acceptés et même encouragés pour savoir si tu cherches encore. D'ailleurs, vu que ça va faire un petit moment : tu cherches encore ? Si oui je me penche sur ton cas =3



    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Dim 22 Déc 2019 - 1:40

    Oui, je cherche encore ! =p
    Merci pour l'information ! ^^
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Dim 22 Déc 2019 - 12:10

    Ok alors je vois plusieurs soucis. Après je fais ça sur le code de Nihil donc elle répondra peut-être mieux que moi. Cela dit, une chose qui est pour certaine : l'id va te poser problème dès que tu vas avoir plus d'un message dans un sujet. En effet, chaque profil aura une id et normalement, une id ne doit apparaître qu'une seule fois. Une id c'est unique sur une page, donc toi il te faute une classe.
    Heureusement, c'est possible, car comme le dit Nihil dans ce sujet dans son dernier message, tu peux modifier ton javascript pour marcher avec une classe. Bien sûr il va falloir changer le CSS aussi.

    Du coup on va déjà modifier ça et on va voir ce que ça donne. Je crois qu'il y a un autre soucis dans le JS amis je suis pas certaine encore à 100%.

    Est-ce que tu pourrais aussi me donner le viewtopic_body pour que je puisse voir ce que tu as mis au niveau du profil ?



    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Lun 23 Déc 2019 - 2:01

    Merci beaucoup de tenter l'aventure et m'aider, j'apprécie ! :hug:
    D'accord, je comprends. :hum: J'ai changer l'id pour une class du coup et changer le CSS.

    Voici le viewtopic_body :

    Spoiler:
    Code:
    <script type="text/javascript">
    //<![CDATA[
    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
    $(function(){

        if(typeof(_atc) == "undefined") {
            _atc = { };
        }
       
        _atc.cwait = 0;
        $('.addthis_button').mouseup(function(){
            if ($('#at15s').css('display') == 'block') {
                addthis_close();
            }
        });
    });

    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
    showHiddenMessage = function(id)
    {
        try
        {
            var regId = parseInt(id, 10);
            if( isNaN(regId) ) { regId = 0; }
           
            if( regId > 0)
            {
                $('.post--' + id).toggle(0, function()
             {
                if( $(this).is(":visible") )
                {
                   $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                }
                else
                {
                   $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                }
             });
            }
        }
        catch(e) { }
       
       return false;
    };

    //]]>
    </script>

    <table width="100%" border="0" cellspacing="2" cellpadding="0">
       <tr>
          <td align="left" valign="middle" nowrap="nowrap">
             <span class="nav">
             <!-- BEGIN switch_user_authpost -->
             <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
             <!-- END switch_user_authpost -->
             <!-- BEGIN switch_user_authreply -->
             <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
             <!-- END switch_user_authreply -->
             </span>
          </td>      
          <td class="nav" valign="middle" width="100%">
             <span class="nav">
                    <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                    <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                    {NAV_CAT_DESC_SECOND}
                </span>
          </td>      
          <td align="right" valign="bottom" nowrap="nowrap" width="100%">
             <!-- BEGIN switch_twitter_btn -->
             <span id="twitter_btn" style="margin-left: 6px; ">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
             </span>
             <!-- END switch_twitter_btn -->
             
             <!-- BEGIN switch_fb_likebtn -->         
             <script>(function(d, s, id) {
               var js, fjs = d.getElementsByTagName(s)[0];
               if (d.getElementById(id)) return;
               js = d.createElement(s); js.id = id;
               js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
               fjs.parentNode.insertBefore(js, fjs);
             }(document, 'script', 'facebook-jssdk'));</script>   
             <div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
             <!-- END switch_fb_likebtn -->
             
             <span class="gensmall bold">
                <a class="addthis_button" href="https://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
                <!-- BEGIN switch_plus_menu -->
                 | 
                <script type="text/javascript">//<![CDATA[
                   var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
                   var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
                   var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
                   var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
                   var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
                   
                   insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
                //]]>
                </script>
                <!-- END switch_plus_menu -->
             </span>
          </td>
       </tr>
    </table>

    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
       <tr align="right">
          <td class="catHead" colspan="3" height="28">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td width="9%" class="noprint"> </td>
                   <td align="center" class="t-title">
                      <h1 class="cattitle"> {TOPIC_TITLE}</h1>
                   </td>
                   <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
                </tr>
             </table>
          </td>
       </tr>
       <!-- BEGIN topicpagination -->
       <tr>
          <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
       </tr>
       <!-- END topicpagination -->
       {POLL_DISPLAY}
       <tr>
          <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
       </tr>
       <!-- BEGIN postrow -->
       <!-- BEGIN hidden -->
       <tr>
          <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
       </tr>
       <!-- END hidden -->
       <!-- BEGIN displayed -->
       <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                      <span class="postdetails poster-profile"><span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong><div class="ava">{postrow.displayed.POSTER_AVATAR}</div><div class="pseudpro">{postrow.displayed.POSTER_NAME}</div></strong></span>
    <div class="z">  <div class="postrang">{postrow.displayed.POSTER_RANK}<br /></div>
    {postrow.displayed.RANK_IMAGE}
     
      <div class="infosbonus" style="margin-top:-369px;margin-left:2px;"> <!-- BEGIN profile_field -->
        <span class="profil"><div class="vx">{postrow.displayed.profile_field.LABEL}</div>{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
                                      <!-- END profile_field --></div>
     
                <div class="profils"> <!-- BEGIN profile_field -->
                                    <span class="profil"> <vv>{postrow.displayed.profile_field.LABEL}</vv>{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
                                      <!-- END profile_field --></div>
      {postrow.displayed.POSTER_RPG}</div>
                        <div class="badges-profil"></div></span><div style="margin-top:2px;"></div>
                      <center><!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> </center>
                     
             <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                   <td valign="top" nowrap="nowrap" class="post-options">
                      {postrow.displayed.THANK_IMG} <span class="i_icon_multiquote">{postrow.displayed.MULTIQUOTE_IMG}</span> {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                   </td>
                </tr>
                <tr>
                   <td colspan="2" class="hr">
                      
                   </td>
                </tr>
                <tr>
                   <td colspan="2">
                      <!-- BEGIN switch_vote_active -->
                      <div class="vote gensmall">
                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                         <!-- END switch_vote -->

                         <!-- BEGIN switch_bar -->
                         <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                            <!-- BEGIN switch_vote_plus -->
                            <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                            <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                         <!-- END switch_bar -->

                         <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                         <!-- END switch_no_bar -->

                         <!-- BEGIN switch_vote -->
                         <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                         <!-- END switch_vote -->
                      </div>
                      <!-- END switch_vote_active -->

                      <div class="postbody">

                         <div>{postrow.displayed.MESSAGE}</div>

                         <!-- BEGIN switch_attachments -->
                         <dl class="attachbox">
                            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                            <dd>
                               <!-- BEGIN switch_post_attachments -->
                               <dl class="file">
                                  <dt>
                                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                     <!-- BEGIN switch_dl_att -->
                                     <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_dl_att -->

                                     <!-- BEGIN switch_no_dl_att -->
                                     {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                     <!-- END switch_no_dl_att -->
                                  </dt>

                                  <!-- BEGIN switch_no_comment -->
                                  <dd>
                                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                  </dd>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <dd>
                                     <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                  </dd>
                                  <!-- END switch_no_dl_att -->

                                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                               </dl>
                               <!-- END switch_post_attachments -->
                            </dd>
                         </dl>
                         <!-- END switch_attachments -->

                         <div class="clear"></div>
                         <!-- BEGIN switch_signature -->
                         <div class="signature_div">
                            {postrow.displayed.SIGNATURE}
                         </div>
                         <!-- END switch_signature -->

                      </div>
                      <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                   </td>
                </tr>
             </table>
          </td>
       </tr>
       <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
             <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
          </td>
          <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
             <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td valign="middle">
                                              {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} <span class="i_icon_email">{postrow.displayed.EMAIL_IMG}</span> {postrow.displayed.ONLINE_IMG}
                   </td>
                </tr>
             </table>
          </td>
       </tr>
       <!-- BEGIN first_post_br -->
    </table>
    <hr />
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
          <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
       </tr>
       <!-- END first_post_br -->
       <!-- END displayed -->
       <!-- END postrow -->
       <!-- BEGIN no_post -->
       <tr align="center">
          <td class="row1" colspan="3" height="28">
             <span class="genmed">{no_post.L_NO_POST}</span>
          </td>
       </tr>
       <!-- END no_post -->
       <tr align="right">
          <td class="catBottom" colspan="3" height="28">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td width="9%" class="noprint"> </td>
                   <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
                   <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
                </tr>
             </table>
          </td>
       </tr>
    </table>
    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
       <tr>
          <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
          <!-- BEGIN topicpagination -->
          <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
          <!-- END topicpagination -->
       </tr>
       <!-- BEGIN switch_user_logged_in -->
       <!-- BEGIN watchtopic -->
       <tr>
          <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
       </tr>
       <!-- END watchtopic -->
       <!-- END switch_user_logged_in -->
    </table>

    <!-- BEGIN promot_trafic -->
    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
       <tr>
          <td class="catBottom" height="28">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
                   <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
                </tr>
             </table>
          </td>
       </tr>
    </table>

    <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
       <tr>
          <td class="catBottom" height="28">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
                   <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                </tr>
             </table>
          </td>
       </tr>
       <tr>
          <td class="row2 postbody" valign="top">
             <!-- BEGIN link -->
             » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
             <!-- END link -->
          </td>
       </tr>
    </table>
    <!-- END promot_trafic -->

    <!-- BEGIN switch_forum_rules -->
    <table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
       <tbody>
          <tr>
             <td class="catBottom">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                   <tbody>
                      <tr>
                         <td valign="top">
                            <h1 class="cattitle"> {L_FORUM_RULES}</h1>
                         </td>
                      </tr>
                   </tbody>
                </table>
             </td>
          </tr>
          <tr>
             <td class="row1 clearfix">
                <table>
                   <tr>
                      <!-- BEGIN switch_forum_rule_image -->
                      <td class="logo">
                         <img src="{RULE_IMG_URL}" alt="" />
                      </td>
                      <!-- END switch_forum_rule_image -->
                      <td class="rules postbody">
                         {RULE_MSG}
                      </td>
                   </tr>
                </table>
             </td>
          </tr>
       </tbody>
    </table>
    <!-- END switch_forum_rules -->

    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td class="row2" colspan="2" align="center" style="padding:0px">
             <!-- BEGIN switch_user_logged_in -->
             <a name="quickreply"></a>
             {QUICK_REPLY_FORM}<br />
             <!-- END switch_user_logged_in -->
          </td>
       </tr>
       <tr>
          <td style="margin:0; padding: 0;" colspan="2">
             <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
                <tbody>
          <!-- BEGIN show_permissions -->
          <tr>
             <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
             <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
          </tr>
          <!-- END show_permissions -->
          <tr>
             <td class="catBottom" colspan="2" height="28">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                   <tr>
                      <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                      <!-- BEGIN show_permissions -->
                      <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                      <!-- END show_permissions -->
                   </tr>
                </table>
             </td>
          </tr>
       </tbody>
             </table>
          </td>
       </tr>
       <tr>
          <td style="margin:0; padding: 0;" colspan="2">
             <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
                <tbody>
          <tr>
             <td class="catBottom" colspan="2" height="28">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                   <tr>
                      <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                      <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
                   </tr>
                </table>
             </td>
          </tr>
       </tbody>
             </table>
          </td>
       </tr>
    </table>

    <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
       <tr>
          <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
             <span class="nav">
                <!-- BEGIN switch_user_authpost -->
                <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
                <!-- END switch_user_authpost -->
                <!-- BEGIN switch_user_authreply -->
                <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
                <!-- END switch_user_authreply -->
             </span>
          </td>

          <!-- BEGIN viewtopic_bottom -->
          <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
          <!-- END viewtopic_bottom -->

          <!-- BEGIN moderation_panel -->
          <td align="center">
             <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
          </td>
          <td align="center" width="250">
             <span class="gensmall"> </span>
          </td>
          <!-- END moderation_panel -->
       </tr>
    </table>
    </form>

    <!-- BEGIN viewtopic_bottom -->
    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
       <tr>
          <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
             <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
                <input type="hidden" name="t" value="{TOPIC_ID}" />

                <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
                <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

                <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
             </form>
          </td>
       </tr>
    </table>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN switch_image_resize -->
    <script type="text/javascript">
    //<![CDATA[
    $(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
    //]]>
    </script>
    <!-- END switch_image_resize -->
    <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Lun 23 Déc 2019 - 9:47

    Bon je pense que je vais devoir mettre tout ça sur un forum de test pour tester parce que juste comme ça je vais pas m'en sortir :mdr: Je peux juste te demander de me redonner ton CSS et javascript/page html actuelle ? Comme ça je suis certaine d'avoir tout comme toi.



    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Lun 23 Déc 2019 - 15:25

    Je comprends, totalement ! Merci beaucoup d'y jeter un oeil en tout cas ! :love:

    Je te donne l'entièreté du css concernant le profil, au cas où:
    Spoiler:
    Code:
    /* style bloc badges */
    .badges-profil {
        border: 2px solid #eed02d;
        margin: 2px 2px 25px;
        text-align: center;
        margin-top:10px;
    }
    .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;
    }

    .default {
    display: none;
    }

    .default2 {
        height: 2em;
        margin: 5px;
    }
    /*PROFIL*/
     .z img {
        max-width: 200px;
    }
     .z {
        width: 205px;
        max-height: 220px;
        overflow-y: auto;
        text-align: justify;
    }

     vv {
        margin: auto;
        text-transform: lowercase;
        font-family: 'Lato', sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #c5ac34;
    }
     .profil {
        padding: 2px;
        text-align: justify;
        text-transform: lowercase;
        font-size: 10px;
        line-height: normal;
    }
     .bouton {
        display: inline-block;
        height: 22px;
        text-transform: uppercase;
        font-family:'Lato', sans-serif;
        font-size: 10px;
        font-weight: bold;
        line-height: 22px;
        color: black;
    }
     .pseudpro {
        margin: 4px 0 4px 0;
        padding: 4px;
        border-bottom: 1px dashed #d7d7d7;
        font-family:  'EB Garamond', serif;
        font-size: 20px;
        font-style: italic;
        font-weight: 400!important;
        text-align: center;
        text-transform: uppercase;

    }

     .z::-webkit-scrollbar {
        display: none;
    }
     .postdetails {
        text-transform: uppercase;
        font-size: 8px;
    }
     .postdetails.poster-profile span.label {
        white-space: normal;
    }
     .postdetails textarea {
        width: 200px;
        height: 100px;
        border-color: white;
        font-family: open sans,serif;
        font-size: 10px;
        font-style: italic;
        line-height: normal;
        background-color: #f8f4f2;
    }
    /*----------profil hover---------*/
    .ava {
      display: block;
      width: 200px;
      margin: 2px 2px 0px 2px;
      height: 320px;
      overflow: hidden;
      transition:0.4s ease;
    }

    .ava:hover {
      display: block;
      width: 200px;
      margin: auto;
      height: 320px;
      overflow: hidden;
    }

    .infosbonus {
      position: absolute;
      width: 200px;
      height: 320px;
      overflow: 320px;
      background-color: white;
      font-size: 11.5px;
      color: #3E352E;
      text-align: justify;
      padding:0px;
      opacity: 0;
      transform: all;
      transition: 1s;
    }

    .infosbonus:hover {
      opacity: 0.9;
      transform: all;
      transition: 1s;
    }

    /* on cache tous les champs du profil */
    .infosbonus .profil { display: none;}
     
    /* on affiche juste le 3ème */
    .infosbonus .profil:nth-child(1) { display: block; }
    .infosbonus .profil:nth-child(2) { display: block; }

    /* on masque juste le 3ème */
    .profils .profil:nth-child(1) { display: none; }
    .profils .profil:nth-child(2) { display: none; }

    .vx {
      border-bottom: 1px solid #eaeaea;
        color: #262626;
        font-family: Lato, sans-serif;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .5px;
        margin-bottom: 10px;
        padding: 7px 5px 2px;
        text-align: center;
        text-transform: uppercase;
    }


    Javascript :
    Spoiler:
    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 = "6"; /* 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 = $("#"+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("default2").removeClass("default");
                            } 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 */
              $(".badges-profil").html($badges);
            });

        })
    }

    Page Html:
    Spoiler:
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <style>

    .default {
    display: none;
    }

    .default2 {
        height: 2em;
        margin: 5px;
    }
    </style> 
    <div id="badges-profil">
                                 <img src="https://i.postimg.cc/bwN4DfGm/printemps2.png" title="aime le printemps" class="default spring" />                <img src="https://i.postimg.cc/15KL33zg/t-2.png" title="aime l'été" class="default summer" />                <img src="https://i.postimg.cc/m24v4HTf/autumn2.png" title="aime l'automne" class="default fall" />                <img src="https://i.postimg.cc/9Q8KygZC/hiver.png" title="aime l'hiver" class="default winter" />                <img src="https://i.postimg.cc/767R8xcZ/b-lier.png" title="bélier" class="default bélier" />                <img src="https://i.postimg.cc/Zqv7pbJx/taureau.png" title="taureau" class="default nom" />                <img src="https://i.postimg.cc/c1RzFLwD/g-meau.png" title="gémeaux" class="default gémeaux" />                <img src="https://i.postimg.cc/PJjRdgsz/cancer.png" title="cancer" class="default cancer" />                <img src="https://i.postimg.cc/15yj21Ky/lion.png" title="lion" class="default lion" />                <img src="https://i.postimg.cc/Y91dDdG4/vierge.png" title="vierge" class="default vierge" />                <img src="https://i.postimg.cc/DzRNMWxN/balance.png" title="balance" class="default balance" />                <img src="https://i.postimg.cc/qvRZBcYY/scorpion.png" title="scorpion" class="default scorpion" />                <img src="https://i.postimg.cc/qv5DNhH7/sagittaire.png" title="sagittaire" class="default sagittaire" />                <img src="https://i.postimg.cc/yxyrxL7q/capricornus.png" title="capricorne" class="default capricorne" />                <img src="https://i.postimg.cc/JnwTQfnV/verseau.png" title="verseau" class="default verseau" />                <img src="https://i.postimg.cc/sDKNRHn7/poisson.png" title="poisson" class="default poisson" />                <img src="https://i.postimg.cc/ZRRMn8C0/single.png" title="est célibataire" class="default single" />                <img src="https://i.postimg.cc/5tzgjsmP/fianc-s.png" title="est fiancé" class="default fianced" />                <img src="https://i.postimg.cc/P59Ktg1p/married.png" title="est marrié" class="default married" />                <img src="https://i.postimg.cc/pTtZjKGP/s-par.png" title="est divorcé" class="default divorced" />                <img src="https://i.postimg.cc/3xdnQ80Q/inarelationship.png" title="est en couple" class="default couple" />                <img src="https://i.postimg.cc/Wbp5S623/lesbian.png" title="est un couple gay" class="default lesbian" />                <img src="https://i.postimg.cc/T1fCzngt/gay.png" title="est un couple gay" class="default gay" />                <img src="https://i.postimg.cc/HW9SQP1R/pregnant.png" title="est enceinte" class="default pregnant" />                <img src="https://i.postimg.cc/pX0qShTB/baby2.png" title="a des enfants" class="default baby" />                <img src="https://i.postimg.cc/ZnHV40L4/heartbroken.png" title="a le coeur brisé" class="default heartbroken" />                <img src="https://i.postimg.cc/Fsq0cjzw/lgbt.png" title="est lgbt+" class="default lgbt" />                <img src="https://i.postimg.cc/cJf7drs2/coffeelover.png" title="aime le café" class="default coffee" />                <img src="https://i.postimg.cc/76s54kTj/tealover.png" title="aime le thé" class="default tea" />                <img src="https://i.postimg.cc/m26ywvXX/cocktaillover.png" title="aime les cocktails" class="default cocktail" />                <img src="https://i.postimg.cc/7hZS19gr/gourmand.png" title="est gourmand" class="default food" />                  <img src="https://i.postimg.cc/ZRZ8n4nR/ecologiste.png" title="est écologiste" class="default ecolo" />                <img src="https://i.postimg.cc/7P9VCGgy/fastfoodlover2.png" title="aime les fastfood" class="default fastfood" />                <img src="https://i.postimg.cc/d3gD7j6B/vegetarian.png" title="est végétarien/vegan" class="default vegetarian" />                <img src="https://i.postimg.cc/mrScdMZL/sunny.png" title="est du matin" class="default morning" />                <img src="https://i.postimg.cc/442ckz6n/nightowl.png" title="est du soir" class="default night" />                <img src="https://i.postimg.cc/43G7bwg2/responsable.png" title="est responsable" class="default responsable" />                <img src="https://i.postimg.cc/RhpKgtR6/irresponsable.png" title="est irresponsable" class="default irresponsable" />                <img src="https://i.postimg.cc/mgvNxQG7/childlover.png" title="aime les enfants" class="default children" />                <img src="https://i.postimg.cc/Yqj1hXr1/hate-children.png" title="n'aime pas les enfants" class="default nochildren" />                <img src="https://i.postimg.cc/BQvC2SgP/bruyant.png" title="est bavard" class="default bavard" />                <img src="https://i.postimg.cc/wM17TGXM/travellover.png" title="aime voyager" class="default travel" />                <img src="https://i.postimg.cc/K8krs0CZ/fid-le.png" title="fidèle" class="default fidèle" />                <img src="https://i.postimg.cc/R0xfp4cR/loveoutdoor.png" title="aime la nature/être dehors" class="default nature" />                <img src="https://i.postimg.cc/5NHCx6gg/observateur.png" title="est observateur" class="default observateur" />                <img src="https://i.postimg.cc/CLWfdS6g/perfectionniste.png" title="est perfectionniste" class="default ruler" />                <img src="https://i.postimg.cc/XYfXJFCf/independant.png" title="est independant" class="default independant" />                <img src="https://i.postimg.cc/4NhmDj4F/clingy.png" title="est collant" class="default dependant" />                <img src="https://i.postimg.cc/VNHSQwtp/bienveillant.png" title="est extraverti" class="default outgoing" />                <img src="https://i.postimg.cc/GppB5t4v/lonewolf.png" title="est solitaire" class="default lonewolf" />                <img src="https://i.postimg.cc/HWFQ8wVR/ACTIF.png" title="aime bouger" class="default active" />                <img src="https://i.postimg.cc/KY4z5WWN/lazy.png" title="est fainéant" class="default lazy" />                <img src="https://i.postimg.cc/8cZBx91C/booklover.png" title="aime lire" class="default reader" />                <img src="https://i.postimg.cc/Y931mZLx/gamer.png" title="aime les jeux vidéos" class="default gamer" />                <img src="https://i.postimg.cc/k4WPqNZ8/artlover.png" title="aime l'art" class="default artlover" />                <img src="https://i.postimg.cc/wv0mBNnf/musiclover.png" title="aime la musique" class="default musiclover" />                <img src="https://i.postimg.cc/7hhTJ6kx/movielover.png" title="aime le cinéma" class="default cinemalover" />                <img src="https://i.postimg.cc/BbzPT0S2/netflix.png" title="est netflix and chill" class="default netflix" />                <img src="https://i.postimg.cc/fR9mvJ0y/likechess.png" title="aime les échecs" class="default chess" />                <img src="https://i.postimg.cc/ZRKWXR0r/target.png" title="aime le tir à l'arc" class="default archery" /> 
    </div>
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Lun 23 Déc 2019 - 15:55

    Hmmm, une dernière question, dans quel endroit tu mets les badges obtenus dans le profil ? Dans le sens le texte qui doit être "lu" pour trouver les badges qu'a un membre ?



    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Lun 23 Déc 2019 - 17:22

    N'étant pas sûre d'avoir compris, j'ai fait deux captures (je ne suis pas douée en explications) en espérant répondre à ta question. Embarassed Embarassed
    Si non, désolée, la fatigue m'aide pas aujourd'hui. Razz
    https://i.servimg.com/u/f38/20/14/33/09/profil10.png
    https://i.servimg.com/u/f38/20/14/33/09/profil11.png
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Lun 23 Déc 2019 - 18:03

    Les captures d'écran sont parfaites, t'inquiète pas !

    Et grâce à ça je vois déjà le problème.
    Si tu veux, le JS va chercher sur la page actuelle l'élément du profil qui va inclure les badges (le var idChamp = "field_id1"Wink. Donc en gros, quand tu es sur ton profil, tu as un champ "badges" qui est remplit par quelqu’un et qui est affiché dans le profil. Et là, on va chercher ce champ, le lire et afficher les bonnes images (vu qu'on veut l'afficher dans le profil même, donc pas de soucis).
    Dans ton cas, on est dans les messages, donc on a pas accès à cette information, vu qu'elle n'est disponible que dans les profils.

    On peut cependant afficher cela dans les messages (en cochant le faite qu'on veut afficher ça dans les messages), mais là aussi on a un soucis car on a cette configuration pour cette partie :
    Code:
    <div class="profils"> <!-- BEGIN profile_field -->
                                    <span class="profil"> <vv>{postrow.displayed.profile_field.LABEL}</vv>{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
                                      <!-- END profile_field --></div>
    Donc contrairement au profil où chaque élément a un numéro précis, ici il faudrait chercher le label qui a la bonne chose pour ensuite chercher le texte ensuite et le séparer. Ca change un petit peu le code, et je pense aussi qu'idéalement on met cette partie en display: none pour ne pas avoir à double les badges.
    Maintenant la question est: tu veux afficher les badges que dans les messages ou aussi dans le s profils ?



    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Mer 25 Déc 2019 - 15:45

    Ah d'accord, je pense que je comprends mieux le principe et effectivement, grâce à tes explications, ça a du sens pourquoi ça fonctionne pas du coup. scratch
    Idéalement, les deux ce serait sympa je trouve, si c'est possible du coup, mais le plus important serait dans les messages. Embarassed Vu que je ne sais pas si ce sera "lourd" comme codage à faire tout ça. Razz

    Un grand merci pour ton aide et tes explications, j'apprécie beaucoup ton aide. Et je te souhaite un joyeux noël, j'espère que tu passes de bonnes fêtes ! :hug:
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Ven 27 Déc 2019 - 10:17

    Coucou ! Désolée du retard de réponse, j'étais en train de passer Noël en famille et faire une réponse plus longue c'est compliqué ^^" Du coup je te souhaite aussi de bonnes fêtes et j'espère que tu as passé un merveilleux Noël ! :heart:

    Alors pour ce qui est d'afficher dans les messages et le profil, c'est absolument possible ! Cependant, je pense qu'on va utiliser deux codes JS distincts, un "Sur toutes les pages" (vu que y'a pas que "sur le profil") et une "Sur les sujets" pour qu'elle ne soit que sur les messages. Ou alors les intégrer direct au template, c'est selon ce que tu préfères. :hum: Du coup tu peux probablement déjà installer tout ce qui se rapporte à l'affichage dans le profil. Si tu as besoin d'aide pour cette partie hésite pas à demander, mais je pense que tu arriveras à faire cette partie seule.

    Pour ce qui est de dans les messages, je vois en faite plusieurs problèmes. Parce que le soucis c'est qu'on a pas qu'une seule partie à lire et à remplacer (contrairement aux profils) mais plusieurs dans un même sujet (un par message pour être précis). Du coup je suis pas certaine de comment on va faire ça, surtout parce que je suis rouillée en JS :face: Mais je vais plancher là dessus et faire des tests. Cela dit, avec mon déménagement tout bientôt je ne sais pas combien de temps j'aurais, donc je préfère te prévenir que ça risque de me prendre plus ou moins long ^^"



    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Lun 30 Déc 2019 - 15:45

    Hello ! Merci beaucoup ! Oui, j'ai été gâtée, c'était super. :love: J'espère que le tiens a été tout aussi bien. Very Happy Je te souhaite une bonne année d'avance. :ange:

    D'accord, je vais installer ça alors, vu que j'y suis déjà arrivée par le passé ça doit être la même chose. :face: Ce sera effectivement pour le reste que j'aurai besoin de ton aide et prends le temps qu'il te faut, c'est déjà bien gentil de m'offrir ton aide ainsi ! :hug: J'apprécie vraiment, c'est super gentil ! :coeur:
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Jeu 2 Jan 2020 - 16:36

    Coucou Bloom !
    Juste pour te prévenir que je n'ai pas internet (je viens de déménager) et que du coup sur natel avec la 4g c'est pas vraiment possible de tester le JS. Et mon fixe n'ayant pas wifi je peux pas non plus partager la connexion haha.

    Je voulais te prévenir pas que tu penses que je t'ai abandonnée :heart:



    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Jeu 2 Jan 2020 - 18:05

    Merci de prévenir, c'est super sympa :hug:
    Je comprends totalement ton soucis actuel, les déménagements c'est souvent galère sur tous les points de toute façon. Razz
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Jeu 9 Jan 2020 - 16:10

    Merci pour ta compréhension <3
    Je m'y mets ce w-e, parce que c'est pas quelque chose que je peux faire vite fait x)



    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Jeu 16 Jan 2020 - 17:09

    Coucou !
    J'espère que ton déménagement s'est bien déroulé :coeur:
    Je viens voir si tu t'en sors avec mon casse-tête :lovebomb:
    Merci :heart:
    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Jeu 23 Jan 2020 - 14:41

    Up :love:
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Jeu 23 Jan 2020 - 14:59

    Coucou !
    Je t'ai pas oublié mais j'ai oublié de te répondre ! J'ai pas eu une tonne de temps cette semaine mais ça devrait aller mieux ce w-e... Enfin j'espère haha
    En tout cas j'ai une bonne idée de ce que je dois faire, je vais un peu mixer le code de Nihil avec celui de multi-profil d'Onyx. Min seul soucis est de chopper le bon champ de profil mais je trouverai bien une solution !



    bloomandwander
    bloomandwander
    FémininAge : 26Messages : 17

    le Ven 7 Fév 2020 - 15:19

    Petit up Embarassed Embarassed
    Shaneliae
    Shaneliae
    FémininAge : 23Messages : 283

    le Ven 20 Mar 2020 - 12:31

    Hello @bloomandwander

    Est-ce que tu as pu résoudre ton problème ?

    Bonjour, nous sommes sans nouvelles...Ce sujet est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de cette demande.
    Attention, l'absence de réponse à ce message entrainera l'archivage du sujet d'ici 2 semaines.



    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Mar 7 Avr 2020 - 17:53

    Shane, vu que c'est moi qui m'en occupait et quelque chose de demandé, tu pourrais plutôt le garder ? J'ai commencé mais malheureusement pas fini et vu que ça semble intéresser plusieurs personnes, je pense que c'est une bonne idée de LS en vrai et je voudrais le conserver quelque part. Quitte à déplacer dans les demandes de tutos ^^"



    Nasträlya
    Nasträlya
    FémininAge : 25Messages : 242

    le Mer 8 Avr 2020 - 9:15

    Moi j'avoue je fais partie des personnes intéressées :ange: Un petit LS sur ça se serait top :love:



    :friends:
    Badges dans le profil des sujets. [EN PAUSE] 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    Shaneliae
    Shaneliae
    FémininAge : 23Messages : 283

    le Mer 8 Avr 2020 - 16:24

    Pas de soucis Nyo, je te laisse gérer ce sujet 😉



    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Juil 2020 - 11:14