Coloriser la liste de membres en fonction de la couleur de pseudo

[Gaara du désert]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Je suis actuellement en train de faire le nouveau design d'un forum et j'ai modifié la liste des membres pour la faire apparaître sous la forme de blocs :



Seulement, je souhaiterais faire en sorte que la couleur du groupe soit en couleur de fond de manière à ce que je puisse uniformiser l'aspect des pseudos ! Je sais que c'est possible étant donné que le staff du forum m'a donné ce forum en exemple (pour que je visualise ce qu'ils souhaitent comme rendu), mais je n'arrive pas à trouver comment faire ><

Merci d'avance de votre aide ! =)

[Gaara du désert]

Bonjour, je cherche toujours ^^

[Neptunia]

Bonjour ^^


Comme je ne suis pas spécialement fière de la façon dont j'ai trouvé la solution vais vous donner la méthode pour le faire sous PunBB avec les explications de ce que j'ai compris sans intervenir ultérieurement dans le sujet.

Le forum indiqué en exemple passe par l'adjonction d'un code javascript dans le #template #memberlist_body

Voici donc le script actuellement en place tout à la fin du template de mon propre forum :

Code:

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

Code:

$('a[href*="/u"] span').each(function(){var color = (this).css("color")

Cette partie récupère la couleur des liens vers un profil (/uXXX) et l'enregistre dans la variable "color"

Code:

$(this).parent().parent().parent().parent().children().css("background-color", color);

Cette portion remonte l'arborescence jusqu'à cibler la ligne complète du membre (s'agissant d'une table on remonte jusqu'à une rangée - <tr>) puis recherche les descendants directs. Puisqu'on a une tr ses descendants sont des cellules (<td>). Pour terminer on modifie le css de chaque cellule.

Code:

$(this).css("color", "#000");

Un dernier détail à régler. Si on affecte au fond de cellule la même couleur que le pseudo, bah le pseudo deviendra invisible. On y remédie donc en modifiant sa couleur (ici du noir puisque je n'ai aucun groupe en noir)



En phpBB2 et avec la structure adoptée sur le forum exemple c'est encore plus simple, on se contente de remonter l'arborescence jusqu'au bloc membre .parent() ou bien jusqu'au conteneur le plus proche .closest(???) sans avoir besoin de redescendre pour cibler plusieurs colonnes comme sur une liste de membres standard

[Gaara du désert]

Bonsoir !

Alors tout d'abord merci de votre aide et d'avoir tout détaillé (c'est très agréable de comprendre ce qu'on nous explique). J'ai donc copié/collé votre code en modifiant la couleur de fin pour un pseudo blanc (le noir étant réservé aux nouveaux membres). Cependant, je me retrouve avec le pseudo ET les fonds de colorés en blanc comme vous pouvez le voir :



Je précise toutefois que j'ai modifié mon template pour pouvoir mettre deux profils côte-à-côte, ce qui fait que je n'ai plus de tableau dans mon template, est-ce que cela peut modifier le rendu ? Dans le doute, je vous montre le code modifié :



Encore merci de votre aide et de votre attention (je sais d'ores et déjà que je dois passer par un javascript et ça m'aide bien) ! ^^

[Neptunia]

Pour rappel

Comme je ne suis pas spécialement fière de la façon dont j'ai trouvé la solution vais vous donner la méthode pour le faire sous PunBB avec les explications de ce que j'ai compris sans intervenir ultérieurement dans le sujet.

Comprendre par là que j'ai "trouvé" la solution avec un clic droit > Examiner l'élément. J'ai donc trouvé le script tel quel et comme la question m'intéressait j'ai voulu porter le script sur une autre structure (PunBB). Si le portage réussit, ça veut dire que j'ai compris le principe mais ça ne veut pas dire que je m'autorise à vous dire comment copier le forum dont vous nous avez fourni le lien.

Je précise toutefois que j'ai modifié mon template pour pouvoir mettre deux profils côte-à-côte, ce qui fait que je n'ai plus de tableau dans mon template, est-ce que cela peut modifier le rendu ? Dans le doute, je vous montre le code modifié :

Donc oui, un copier-coller de "mon" code ne fonctionnera pas parce que d'une part je suis en PunBB et ma structure est différente de phpBB2, et d'autre part mon template est d'origine (modifié mais pas au niveau de la structure, juste la largeur des colonnes et l'identifiant des cellules).

Que votre liste de membres soit en table ou en div ne change rien au problème. Il faut juste faire en sorte d'avoir un conteneur pour chacun des membres de la liste pour naviguer à l'intérieur du DOM comme il faut (.parent() / .closest() / .children())

C'est à ce niveau là que votre code contient une erreur, vous ne ciblez pas le bon élément et du coup le résultat n'est pas à la hauteur.

J'ai moi-même tâtonné avant de parvenir à un résultat. J'avais toutes mes cellules d'une couleur inutilisé dans ma page simplement à cause d'un .parent() en plus ou en moins.

---

Cela dit, j'ai pris la peine d'expliquer le fonctionnement du code pour vous permettre de transposer le raisonnement sur un autre forum sans que je n'ai l'impression de "plagier" le codage d'un autre. Pour garder intacte ce qu'il reste de ma conscience, je ne pense plus intervenir sur ce sujet.

[Gaara du désert]

Bonsoir,

Avant toute chose je précise que je ne compte pas "copier" le forum comme vous dites. J'ai codé moi-même tout le rendu actuel (avec une petite aide extérieure pour aligner mes deux profils) et je n'ai rien repris sur le forum montré (vu qu'ils m'ont donné le lien après que j'ai fait la présentation actuelle, juste pour que je vois qu'il était possible de mettre le fond en couleur suivant les groupes). Bref, tout ça pour dire que le but de ce sujet n'est pas de repomper un autre forum, si j'ai mis le lien c'est simplement pour illustrer mes propos, pas simplement pour qu'on me refile le code du-dit forum ^^

Ce détail réglé, je dirais simplement que tout le monde n'a pas des connaissances poussées en matière de script. Moi-même je suis simplement capable de modifier les phrases de mon qui est en ligne, mais je ne m'y connais pas assez pour pouvoir savoir comment nommer mes éléments en les ciblant comme vous dites, c'est justement pour cette raison que j'appelle à l'aide (et non pour copier comme dit) ^^
Je vais essayer de voir si je trouve des variables ou des choses de ce genre qui pourraient m'aider à adapter le code à mon forum, mais je laisse le sujet toujours ouvert au cas où quelqu'un souhaiterait m'apporter une dernière aide. Je vous remercie tout de même de l'aide apportée et du temps passé à m'expliquer tout ça !

Bonne soirée =)

[Neptunia]

Il y a une heure j'avais mauvaise conscience non pas parce que je pensais que vous copiez un forum, mais parce que moi en vous fournissant un début de réponse, j'avais l'impression de vous refiler les codes de ce forum sans autorisation.

Mais maintenant mon point de vue a changé !

J'ai codé moi-même tout le rendu actuel (avec une petite aide extérieure pour aligner mes deux profils) et je n'ai rien repris sur le forum montré

Je vous conseille d'envisager de poursuivre ce forum parce que ce forum utilise la même structure que le votre, la même présentation et jusqu'au même nom de class qui ne figure même pas dans la version de base du template. Si c'est vous qui avez tout fait vous même il est évident que si quelqu'un a copié l'autre, c'est le forum exemple. Le seul changement qu'il a effectué a été de remplacer votre tableau pour les boutons de contact par un span.

Quoi qu'il en soit vous avez cette structure pour chaque membre

Code:

<div class="member row1">
   <div class="avatar_mini avatar">L'avatar et son lien</div>
   <div class="member_infos">
      <span class="gen pseudo_perso_membre">Le pseudo et son lien</span><br /><br />
   </div>
</div>

Le javascript cible le span (ici je n'en ai mis qu'un seul, celui qui contient le pseudo en couleurs)
Le parent de ce span est la div member_infos.
La div member_infos a elle même pour parent la div member qui elle même contient toutes les autres div du profil. J'ai volontairement indenté le code pour que la hiérarchie soit visible.

Le script va donc remonter de deux niveaux et non de 4 comme mentionné dans votre template.
Et pas besoin de redescendre dans l'arborescence vu que vous pouvez mettre une couleur de fond directement à une div.

Bien que je ne puisse pas tester facilement en phpBB2 il me semble que cette portion de script fait ce que vous attendiez

Code:

$(this).parent().parent().css("background-color", color);

D'ailleurs comme le forum exemple a repris intégralement votre structure, c'est exactement le même script que celui auquel je suis parvenue. On remonte de deux crans dans l'arborescence et c'est tout.

---

C'était plus intéressant avec mon template de base, j'ai du faire fonctionner mes petites cellules grises pour que toutes mes colonnes prennent la couleur voulue et pas seulement la case du pseudo

[Gaara du désert]

A dire vrai c'est un peu compliqué parce qu'en fait le forum exemple est en reconstruction depuis deux/trois ans comme vous pouvez le voir et comme j'étais membre de ce forum à l'époque, j'avais aidé au codage du nouveau design. Mais comme le staff a finalement déserté du forum sans donner de nouvelles, j'ai décidé de reprendre les codages (que j'avais codés moi-même et qui m'appartiennent donc) sans les fonds colorés (qui sont des personnalisations de la fondatrice qui a mis les codages en place) pour mon design actuel, donc c'est pour cette raison que les titres des css sont les mêmes ! Désolée, j'aurais peut-être dû préciser ça dès le début, il est vrai que ça peut avoir l'air d'une tentative de plagiat et je comprends tout à fait votre réaction ^^

Bref, j'ai donc essayé avec votre code et là j'avais juste le fond du pseudo qui était coloré, mais toujours en blanc, donc j'ai tenté de voir ce que ça donnait en supprimant la ligne de code qui mettant le pseudo en blanc et là bizarrement, ça me met le fond de la bonne couleur comme vous pouvez le voir :



Mais du coup je me retrouve avec le problème que vous avez souligné (le pseudo de la couleur du fond) j'ai essayé de remplacer ça en passant par les CSS, mais apparemment même avec un !important ça ne veut pas. J'ai comme l'impression qu'en fait il me met un fond blanc parce que le code demande de mettre le pseudo en blanc en remplacement de la couleur >< Est-ce que ça peut venir du fait que j'ai personnalisé mes pseudos dans les CSS ?

[Neptunia]

Deux petits problèmes sur votre code actuellement.

1/ Désolé de ne pas l'avoir vu plus tôt mais votre script est placé dans la boucle :
<!-- BEGIN memberrow --> ... <!-- END memberrow -->
et s'exécute donc une fois pour chaque membre. J'avais précisé au début

Voici donc le script actuellement en place tout à la fin du template de mon propre forum :

En plaçant le script hors de la boucle, il ne sera exécuté qu'une seule fois. D'où gain de temps à l'exécution.

2/ Toujours dans ma première réponse, j'avais découpé le script en 3 parties pour expliquer le fonctionnement. Hors dans mon dernier message je n'ai posté que la partie du script qui sert à remonter l'arborescence et attribuer la couleur initiale du pseudo à sa case. Du coup vous avez oublié la dernière portion du code, celle qui modifie la couleur du pseudo.

Je ne me cache pas que je suis allé voir d'autres sujets que vous aviez ouvert et j'y ai lu que vous vouliez apprendre ou plutôt comprendre le code qu'on vous transmet et j'aurai pu évidemment vous fournir le code complet, mais ayant moi aussi cette soif de comprendre le fonctionnement des codes que j'utilise j'ai pensé que ça serait plus facile d'apprendre en tentant de compiler les réponses disséminées dans plusieurs messages et en se plantant. Je me suis moi même plantée deux ou trois fois avant de mettre ça en place provisoirement sur mon forum.

---

Au final le script devrait ressembler à ça

Code:

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

J'ai juste une incertitude sur le nombre de .parent() nécessaire. J'avais calculé deux, il y en a 3 dans votre script actuel et moi non plus je suis pas très à l'aise avec cela. Je procède encore par tâtonnements.

---

Edité à 0h40

Ouuupsss, suis allée voir trop vite sur le forum sans lire entièrement votre réponse :

Bref, j'ai donc essayé avec votre code et là j'avais juste le fond du pseudo qui était coloré, mais toujours en blanc, donc j'ai tenté de voir ce que ça donnait en supprimant la ligne de code qui mettant le pseudo en blanc et là bizarrement, ça me met le fond de la bonne couleur comme vous pouvez le voir :

Si mon code ne mettait pas la couleur sur le bon élément c'est que j'ai foiré dans l'arborescence (pas assez de .parent() )
Si ça a marché quand vous avez supprimé le code pour uniformiser la couleur du pseudo c'est que vous avez dû rajouter ce parent() volontairement ou non.

[Gaara du désert]

Mon objectif est bel et bien d'apprendre à utiliser les codes pour pouvoir ensuite les modifier à ma guise ou régler les éventuels bugs que je pourrais avoir ! Du coup je préfère largement procéder de la sorte plutôt qu'en ayant juste un code terminé. Le simple copié/collé ne m'intéresse effectivement pas, donc je vous remercie de toutes les explications que vous me fournissez !

1/ J'avais bien vu que vous disiez de placer en fin de template, mais quand je le fais, je n'ai plus aucun résultat sur mon rendu tandis que ça fonctionne quand je le mets entre les balises memberrow. Là je l'ai mis en fin de forum et vous pouvez voir qu'il n'y a plus rien qui fonctionne :



2/ Je pense qu'il en faut effectivement 3, comme j'avais pris la modification que vous m'avez donné avant et que j'avais seulement le fond du pseudo qui était coloré (le reste était gris), alors qu'avez 3 j'ai la totalité du fond. Cela dit il y a toujours le problème que le fond prend finalement la couleur que je mets dans la dernière partie du code (celle censée recolorer le pseudo pour le différencier du fond) et non la couleur de base du pseudo. Vu que vous me dites que c'est similaire au code du forum exemple, (qui est de la même version que moi), je ne pense pas que ça vient de là

Je ne sais pas si je suis claire et vu que vous me dites que vous ne maîtrisez pas forcément ce code, vous ne voyez peut-être pas d'où peut venir le problème (dans ce cas ne vous ennuyez pas trop, j'ai effectivement posé la même question sur un autre forum où ils trouveront peut-être la solution, vous m'avez déjà énormément aidée comme ça ^^).

[Neptunia]

Pourriez-vous poster l'intégralité du template (afin que je puisse reproduire sur un forum test) ainsi que le CSS associé s'il y en a un ?

Ca va de soi que dans votre CSS, vous ne devriez pas gérer la couleur des pseudos, celle-ci devant s'effectuer par le script.

[Gaara du désert]

Bien sûr !

Voici la totalité du template memberlist_body :



Ainsi que les CSS liés :



Après je ne pense pas que ça peut venir d'une autre css, normalement tout est là !
Encore merci de votre aide et de votre patience (et je vous souhaite une bonne nuitée si vous allez aussi rejoindre Morphée) !

[Gaara du désert]

Bonsoir !

Finalement j'ai trouvé le problème qui m'empêchait de l'avoir fonctionnel ! Il suffisait de mettre le code après :

Code:

<!-- END memberrow -->

Et avant la suite du codage et tout fonctionne parfaitement ^^

Je vous remercie beaucoup de votre patience et de votre bonne volonté Neptunia- sans vous je n'y serais jamais arrivée !