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.


    Appliquer la couleur du pseudo à plusieurs fonds de blocs

    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 32Messages : 88

    le Sam 12 Sep 2020 - 22:27

    Bonsoir,

    Je travaille actuellement sur un design et j'ai tenté de modifier la liste des membres. Jusqu'à présent, j'utilisais un code en libre service parce que je ne comprends rien au javascript et que ce que je souhaitais obtenir m'obligeait à y toucher, mais j'ai pris mon courage à deux mains pour essayer de m'y mettre... Et le résultat est catastrophique :han: J'ai réussi à faire mon code (HTML + CSS) sans soucis, mais lorsque j'essaye d'y appliquer le javascript, ça ne fonctionne pas.

    Voici le forum (un forum test, ne prenez pas peur) : https://sch-design.forumactif.com/memberlist

    En gros, je voudrais prendre la couleur du pseudo et l'appliquer à toutes les zones en rouge ! Voici mes codes :

    HTML :
    Code:
    <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr><td class="{memberrow.ROW_CLASS}" align="center">
     <!-- BEGIN memberrow -->
        <div id="LMBER">
      <div class="MBER" id="MBER">
         
        <div id="lst_mmb_nom"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>
        <div class="CMBER" id="lst_mmb_der"><span class="lst_mmb_der">{L_VISITED} : {memberrow.LASTVISIT}</span></div>
        <div class="CMBER" id="lst_mmb_arr"><span class="lst_mmb_der">{L_JOINED} : {memberrow.JOINED}</span></div>
        <div class="CMBER" id="lst_mmb_dc"><span class="lst_mmb_der">{L_INTERESTS} : {memberrow.INTERESTS}</span></div>
        <div class="CMBER" id="lst_mmb_mess"><span class="lst_mmb_der">{L_POSTS} : {memberrow.POSTS}</span></div>
        <div class="CMBER" id="lst_mmb_pro"><span class="lst_mmb_der">Voir le <a href="{memberrow.U_VIEWPROFILE}">profil</a></span></div>
        <div class="CMBER" id="lst_mmb_mp"><span class="lst_mmb_der"><a rel="nofollow" href="/privmsg?mode=post&u={CUR_USER_ID}" target="_blank">Envoyer un MP</a></span></div>
        <div class="CMBER" id="lst_mmb_cadre"></div>
        <div class="lst_mmb_av" id="lst_mmb_av"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div>

      </div>
     
    <script type="text/javascript">//<![CDATA[
    $( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
    $(this).closest('.CMBER').css("background-color", color);});});//]]></script>

        <!-- BEGIN switch_td_group -->
        <div style="display:none;">{memberrow.GROUPS}</div>
        <!-- END switch_td_group -->
      </div>
        <!-- END memberrow -->
        </td></tr>
        <!-- BEGIN switch_no_user -->
        <tr>
        <td colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
        </tr>
        <!-- END switch_no_user -->
        </table>

    Le CSS :
    Code:
    /* -------------------------- Liste des membres ------------------------------ */

    #LMBER {margin:auto;width:830px;}

    .MBER {float:left;margin:5px;width:403px;height:155px;margin-bottom:10px;background-color:green;}
    #MBER{width:403px;height:155px;display:grid;grid-template-columns:16px 85px 5px 85px 5px 85px 23px 5px 78px 5px 16px;
    grid-template-rows:10px 5px 24px 3px 21px 3px 21px 3px 21px 3px 26px 5px 10px;}

    #lst_mmb_nom{grid-area: 2 / 2 / 4 / 7;}
    #lst_mmb_der{grid-area: 5 / 2 / 6 / 7;background-color:red;}
    #lst_mmb_arr{grid-area: 7 / 2 / 8 / 7;box-shadow: 0 0 0 2px red inset;}
    #lst_mmb_dc{grid-area: 9 / 2 / 10 / 7;background-color:red;}
    #lst_mmb_mess{grid-area: 11 / 2 / 13 / 3;background-color:red;}
    #lst_mmb_pro{grid-area: 11 / 4 / 13 / 5;background-color:red;}
    #lst_mmb_mp{grid-area: 11 / 6 / 13 / 7;background-color:red;}
    #lst_mmb_cadre{grid-area: 2 / 8 / 13 / 11;background-color:red;}
    #lst_mmb_av{grid-area: 3 / 9 / 12 / 10;background-color:green;}

    .lst_mmb_av img{height:125px;}
    .lst_mmb_der{font-family: 'Abel', sans-serif;text-transform:uppercase;font-size:12px;text-align:left;line-height:14px;color:#e5e5e5;}

    .tleLMBER {margin:0 auto 5px; width:835px;}
    .tleLMBER th {margin-bottom:5px; padding:5px 0;text-transform:uppercase;font-family:Arial;font-size:16px;color:#666059;}

    Je précise que le javascript n'est pas de moi ! Je l'ai pris sur un forum en libre service et j'ai essayé d'adapter à ce que je cherchais comme rendu. Le créateur du javascript : https://crushcrushcrush.actifforum.com/t97-10-liste-des-membres

    Je ne sais pas ce que je dois modifier pour que ça fjonctionne, j'ai essayé tout ce que je trouvais sur le net, mais en vain et je perds un peu espoir... confused
    J'espère que quelqu'un saura éclairer ma lanterne et m'expliquer où est le problème !

    Merci d'avance de votre attention :hug:




    'Christa
    'Christa
    FémininAge : 35Messages : 139

    le Sam 12 Sep 2020 - 23:46

    Hello :)

    Oh! J'ai récemment croisé un code du même acabit sur Artifices, il pourrait mieux fonctionner si nécessaire :3

    Sans être une experte en JQuery, je peux le lire et m'aider de la documentation pour m'en sortir. Le script que tu utilises ici est le suivant :
    Code:
        $(document).ready(function () {
          $('a[href*="/u"] span').each(function () {
              var color = $(this).css("color");
              $(this).closest('.CMBER').css("background-color", color);
          });
        });
    Ce script :
    • Pour chaque élément <span> contenu dans chaque lien contenant /u dans l'adresse liée
      • Récupère la couleur attribuée à cet élément <span>
      • Attribue cette couleur à l'ancêtre le plus proche possédant la classe .CMBER

    Sauf que voilà, le lien en question, c'est celui qui est dans cette div :
    Code:
    <div id="lst_mmb_nom"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div>

    Elle n'a aucun parent de classe .CMBER, du coup le code ne peut pas marcher :< Une solution serait de remonter d'un cran et d'aller s'occuper des voisins, avec un code qui ressemblerait probablement à ça (non testé, basé sur mes vagues compétences en JS, je ne garantis rien) :
    Code:
    $(this).parent().find('.CMBER').css("background-color", color);
    (faut probablement mettre un each() quelque part, à la réflexion...)

    Vu la ressemblance entre l'affichage de ton code et celui sur Artifices, peut-être que tu gagnerais à te reposer sur ce LS là pour obtenir ton résultat? Le code est différent, mais il a le même résultat.

    Note importante : En HTML, un identifiant se doit d'être unique. Dans la mesure où ce code se répète autant de fois qu'il y a de membres, tu te retrouves avec autant d'identifiants dupliqués que de membres ! Retire ces identifiants ! (à noter également que la variable {CUR_USER_ID} ne marche pas)
    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 32Messages : 88

    le Dim 13 Sep 2020 - 10:06

    Bonjour !

    Ca fait plaisir de te revoir dans le rôle d'aide codeuse ! Very Happy

    Déjà, je te remercie de ton aide ! Pour Artifices, je ne connaissais pas du tout comme forum, mais effectivement c'est quasiment similaire à mon code. Le plan m'a été donné par un admin du forum pour lequel je fais le design, j'imagine qu'il avait dû voir ce LS sur un autre forum et l'adapter un peu à ses envies xD

    Enfin du coup je vais probablement partir sur ce LS et adapter un peu à ma sauce en créditant évidemment le forum ^^ Ce sera plus simple, parce que si j'ai compris d'où vient le problème, j'avoue que je suis encore trop perdue dans ce milieu pour réussir à corriger tout ça moi-même, même avec le tuto et ton explication >< D'ailleurs j'avais compris que le span devait entourer la variable où je voulais appliquer la couleur et non celle dont je voulais prendre, normal que ça ne fonctionne pas ^^"

    Pour ce qui est des identifiants, on me l'a effectivement dit par le passé, mais j'avoue que je ne voyais pas comment arriver à mon résultat sinon. En fait, j'utilisais toujours des tableaux que j'adaptais avec des marges négatives ou positives, mais comme on m'a signalé que les tableaux étaient obsolètes, j'avais cherché à les remplacer et j'avais découvert les grilles (grid) donc depuis j'utilise ça. Mais j'ai effectivement noté que ce n'est pas idéal parce que les identifiants se multiplient (ça me le fait aussi pour mes catégories de forum). Cela dit, en regardant le LS que tu m'as fourni, je vois qu'ils utilisent des "flex", est-ce que ça me donnerait le même rendu que des grilles, mais sans les identifiants ? Si c'est le cas, je vais me pencher sur la question pour virer toutes les grilles qui se répètent dans mes codages :hehe:

    Pour finir, la variable {CUR_USER_ID} m'a été donnée sur le Forum des Forums parce que je cherchais comment remplacer le bouton "MP" par un lien, on m'a donné cette réponse-là et j'avoue que comme elle fonctionne parfaitement, je n'ai pas cherché plus loin si elle existait ou non... Le sujet concerné : https://forum.forumactif.com/t399860-obtenir-l-id-d-un-membre-pour-l-envoi-d-un-message-prive
    Mais je me rends compte qu'en effet, elle ne fonctionne que sur le profil simple et non dans la liste des membres... Je vais voir pour trouver une autre solution !

    Encore une fois merci beaucoup de ton aide ! Je vais voir pour partir sur ce LS, ce sera plus simple et si tu me confirmes ce que je crois avec compris pour le flex, je vais voir pour me pencher sur la question et réparer mes horreurs :xD:

    Bonne journée !




    'Christa
    'Christa
    FémininAge : 35Messages : 139

    le Dim 13 Sep 2020 - 18:00

    Oooh, Crépuscule, j'avais pas tilté ton pseudo ^^ Salutations, ça faisait longtemps o/

    Alors, pour répondre à tes interrogations, parce que j'aime expliquer les choses :p

    • La variable {memberrow.USERNAME} contient généralement le code suivant
      Code:
      <span style="color:#XXXXXX;">Pseudo du membre</span>
      C'est pour ça que tu ne vois pas de span, il n'y a pas d'erreur dans le javascript de ce point de vue là ^^
    • Pourquoi as-tu besoin d'identifiants pour faire les grilles? Tu peux utiliser des classes partout, et même plusieurs classes par élément si besoin. Je t'avoue que je ne comprends pas ton raisonnement ?_? Les grilles ne dépendent pas des identifiants. Un peu de doc pour toi & ma bible personnelle (en anglais). De base tu peux coder sans jamais utiliser d'identifiants, donc je suis perplexité.
    • Pour le MP, si ton objectif est de "remplacer" l'image utilisée par la variable {memberrow.PM_IMG}, comme cette variable contient ce genre de code (c'est pour modernBB mais ça ne devrait pas être super différent pour phpbb2)
      Code:
      <a href="/privmsg?mode=post&u=1">
          <img src="https://2img.net/i/fa/modernbb/icon_contact_pm.png" class="i_icon_pm  " alt="Envoyer un message privé" title="Envoyer un message privé">
      </a>
      La meilleure solution serait simplement de cacher l'image avec un display:none; et d'utiliser le pseudo élément ::before sur le lien ou l'image pour insérer du texte.
      Mais, 'Christa, comment je cible cette image en particulier? Hé bah c'est très simple, les sélecteurs CSS c'est magique, il suffit simplement de faire un truc du genre
      Code:
      a[href^="/privmsg"] img { display: none; }
      (En ciblant un peu mieux parce que ce code là va affecter TOUS les liens vers la page des mps sur tout le site XD) Et en bonus, un peu de doc sur les sélecteurs d'attributs =D


    Les flexbox c'est magique et parfaitement adapté à ce que tu veux faire ^^ Encore de la doc pour toi & ma bible personnelle (en anglais)


    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 32Messages : 88

    le Dim 13 Sep 2020 - 18:36

    Je ne savais pas du tout pour la variable, merci des explications, ça me servira sans doute pour la suite !

    Pour les grilles, tu viens de changer totalement ma vie parce que je croyais qu'il fallait obligatoirement des identifiants pour que ça fonctionne xD En fait j'ai appris à les utiliser via ce site : http://cssgridgarden.com/#fr et comme ils utilisent des identifiants partout, j'étais bêtement partie dans l'idée qu'il fallait obligatoirement employer ça. Mais si ça marche avec des classes, je vais changer tout ça ! :joie: Je vais aller jeter un œil à ta documentation, ça me permettra peut-être de voir d'autres problèmes dans mon utilisation des grilles ^^"

    Et pour le MP, c'est totalement ça ! J'ai testé avec le display:none et j'ai appliqué un before avec mon texte et ça fonctionne parfaitement ! Je n'avais pas du tout pensé à cette solution je crois que je cherche toujours à tout compliquer ;_; Merci beaucoup !

    Pour les flexbox je te remercie pour les liens, je vais aller consulter tout ça et essayer de m'entraîner un peu pour utiliser ça à l'avenir !

    Encore merci pour ton aide, lorsque tu m'expliques je comprends décidément toujours mieux qu'en lisant des tutos :xD: Mille fois merci à toi ! =)




    'Christa
    'Christa
    FémininAge : 35Messages : 139

    le Dim 13 Sep 2020 - 19:10

    Je viens de finir de coder l'intégralité d'un forum pour quelqu'un du coup j'ai pu m'entrainer intensivement avec les grilles et flexbox, c'est un peu confus au début mais avec la pratique ça devient super simple en réalité! N'hésite pas à faire des expériences ^^ C'est magique, je te dis, MAGIQUE @o@

    Il a l'air sympa ce CSSGridGarden faudra que je regarde ça de plus près. Pour la question des identifiants, j'imagine que c'était plus pratique pour eux d'une façon ou d'une autre, mais retiens qu'en CSS ce que tu peux appliquer aux identifiants peut s'appliquer aux classes, c'est du pareil au même. La seule "distinction" entre un identifiant et une classe, c'est qu'un identifiant s'utilise une seule fois dans toute une page, alors qu'une classe s'utilise partout. Du coup, ça rajoute un niveau de "priorité" dans les sélecteurs CSS. Je ne maitrise pas trop les priorités en réalité du coup je me mouille assez peu avec les identifiants XD
    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 32Messages : 88

    le Dim 13 Sep 2020 - 19:32

    J'ai jeté un œil sur ton lien et effectivement ça a vraiment l'air très sympa. Je vais m'y mettre activement et ça finira par venir ! J'avais aussi un peu de mal avec les grilles au début et au final c'est très simple une fois qu'on a compris le principe, tout est une question de pratique ^^ En plus je viens de voir que le site dont j'ai donné le lien au-dessus fait aussi ça avec le flexbox donc je vais coupler ça à tes sites et ça devrait aller : http://flexboxfroggy.com/#fr

    Et d'accord, je comprends mieux ! C'est vrai que je n'ai jamais utilisé les identifiant (ou très rarement) avant de tester les grilles, donc je ne savais pas trop la différence entre les deux ;_; mais je vais voir pour remplacer tous mes identifiants par des classes et me mettre au flexbox pour essayer d'optimiser au maximum mon design (peut-être pas celui-ci vu qu'il est bien avancé, mais ce n'est pas perdu pour le prochain). Encore merci pour ton aide et tes conseils, ça va beaucoup m'aider ! :omg:




    'Christa
    'Christa
    FémininAge : 35Messages : 139

    le Dim 13 Sep 2020 - 19:58

    Ravie d'avoir pu t'aider, amuses-toi bien! :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 22 Oct 2020 - 22:36