Bandeau des modérateurs dans les réponses

[Invité]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://thegameforum.forumactif.com

Description du problème

Bonjour,

J'ai remarqué lorsque des membres du Staff ont écrit des messages, un Bandeau de la couleur de leur groupe (Exemple pris au dessus avec les images, vert pour modérateur, violet pour créactif et rouge pour administrateur).

Et je voulais tout simplement savoir comment vous avez fais ça car je trouve ce procédé tout bonnement stylé et très pratique car il permet de reconnaître tout de suite la réponse du Staff

[Neptunia]

Bonjour ^^


Il existe un tutoriel sur ce sujet :
Fond de message différent pour le staff (dégradé)

Ce que vous voyez ici, n'est rien d'autre qu'une variante du tutoriel ci-dessus.

[Invité]

Ah ben justement j'y étais, cependant, j'ai pas compris comment ils ont fait pour que ça ne soit pas un fond de message mais le haut au dessus du titre du message.

Merci de votre réponse @Neptunia

[Neptunia]

Le tutoriel se compose de deux éléments.

Un script qui cible un élément si et seulement si un autre élément est détecté.
-> On peut changer la cible du script si l'ensemble du message ne nous convient pas.

Un code CSS qui s'applique à l'élément que le script a ciblé.
Si vous remplacez le background-image du tutoriel par un background-color, vous obtenez ce que vous voyez ici.

Un exemple ici où le demandeur souhaitait n'avoir le dégradé que sur le message, et non sur la partie profil
Dégradé Administrateur aussi sur le cadre.
On a juste changé le sélecteur. Mais on aurait pu aussi changer le CSS en lui-même. Par exemple en utilisant une propriété border-color comme c'est le cas ici.

[Invité]

Merci de votre réponse mais je ne sais pas comment faire pour "changer la cible" et la mettre que au dessus des titres de messages, je comprends le tutoriel mais je ne sais pas quoi modifier ^^

[Neptunia]

Je passe la main sur cette demande parce que :

- Je saurais fournir le code nécessaire mais ça ne sert strictement à rien si le code n'est pas compris. Nous sommes sur un forum d'entraide. Non sur un forum de commandes.
- Vous demandez à avoir la bordure colorée en haut de message, c'est à dire exactement comme ici.

Ca m'arrive de faire un effort et de coder à la place du demandeur, mais là ce que vous demandez ce n'est plus de coder mais ni plus ni moins de copier le forum de support. Tout comme dans votre sujet pour les trames de modération.
Ca aussi je sais faire, mais je n'en n'ai ni le droit, ni l'envie.

[Invité]

Non loin de là, ce n'est pas pour copier mais plus pour m'intéresser. En fait, je voulais savoir juste pour comprendre comment cela marchait et non pour forcément le reproduire.
Cependant, le cadre me servirait beaucoup mais je ne le copierai pas arguments par arguments, je le modifierai
Je tiens vraiment à m'excuser car ce n'est pas l'action que j'ai voulue faire.

[Neptunia]

Il me semble avoir expliqué comment cela marchait.

On va prendre un exemple, votre forum.
-> Icônes de messages

Si on place le script tel quel

Code:

    $(function() {
    $('.Administrateur').parent().parent().parent().addClass('bgAdministrateur');
    });

La commande .parent() remonte au niveau supérieur d'imbrication des balises.
Comme on exécute 3 fois la commande, on recherche donc l'arrière-grand-parent de tout élément de classe Administrateur et on lui attribue la class bgAdministrateur.

Sur cette première capture, on a le code de la page en bas, et le résultat en haut. Ici j'ai sélectionné le rang Administratrice

Voilà ce qui est sélectionné :


Remontons l'arborescence d'un rang donc le parent.

Il s'agit donc du parent. Dans le code de votre page cela correspond à

Code:

<span class="postdetails poster-profile">.....

Ce qui correspond aux informations de profil

Remontons un niveau supplémentaire :

Voici le grand-parent et voilà son code dans votre page :

Code:

<td class="row1" width="150" valign="top">.....

Correspond à l'ensemble du volet profil.

Pour finir on remonte d'un troisième et dernier cran.

Voici l'arrière-grand-parent ciblé par le script et voici le début de son code HTML

Code:

<tr class="post post--4" id="p4" style="">.....

Cette fois on cible l'ensemble du message et le css associé va donc mettre un dégradé à toutes les colonnes du message (celle de gauche avec le profil, celle de droite avec le corps du message).

Il suffit ainsi d'enlever un seul .parent() dans le script pour cibler uniquement le profil et non le contenu du message.

Même chose pour le css.
Le tutoriel utilise la propriété background-image.

Il suffirait par exemple d'utiliser la propriété color pour que le texte du message et/ou du profil change de couleur pour les administrateurs.

[Invité]

Ah d'accord j'ai compris, c'est mieux expliqué que le tutoriel car je n'avais pas compris que le Parent servait à cibler le contenu précédent et ainsi de suite.

Merci beaucoup @Neptunia

[Neptunia]

Le but d'un tutoriel est d'expliquer la mise en place d'un code précis et non d'expliquer chaque instruction javascript. En fait ici c'est du jQuery.

Pour des détails sur les propriétés CSS, balises HTML, fonctions javascript ou jQuery il existe des sites externes conçues pour cela.

Par exemple pour .parent() on pourrait avoir ces pages
http://www.jquery-fr.com/manuel/Les-parcours/parent/
https://sutterlity.gitbooks.io/apprendre-jquery/content/parcourir_le_dom/les_parents.html

Si on ne connaît pas une instruction, par exemple addclass(), direction un moteur de recherche et on cherchera par exemple : addclass javascript
Ce type de recherche produisant des résultats plus souvent anglophones que francophones, soit vous maitrisez la langue de Shakespeare, soit vous savez comment demander au moteur un filtrage sur la langue des pages proposées, soit vous avez déjà votre site de référence et dans ce cas vous recherchez directement sur ce site.

[Invité]

D'accord merci, j'ai de la chance, je sais au moins retreindre les résultats en Français et sais parler Anglais

Sinon je n'ai pas du tout de site de référence.

[Invité]

Merci de votre aide et sinon je mets en résolu, j'ai es informations qu'il me fallait.

Merci beaucoup infiniment @Neptunia

[Neptunia]

Quand vous aurez fait quelques recherches du même genre, vous allez vite retrouver un site que vous aviez déjà consulté. Ce site pourrait devenir votre site de référence.

Vous trouverez aussi quelques liens à la fin de ce sujet :
Javascript sur Forumactif

[Invité]

Ah d'accord merci ^^