Bandeau des modérateurs dans les réponses

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Bandeau des modérateurs dans les réponses

Message par julie10902 le Dim 4 Déc 2016 - 14:41

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


Dernière édition par julie10902 le Dim 4 Déc 2016 - 20:51, édité 1 fois
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bandeau des modérateurs dans les réponses

Message par Neptunia le Dim 4 Déc 2016 - 14:53

Bonjour ^^


Il existe un tutoriel sur ce sujet :
Right 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.
avatar

Neptunia
Membre actif

Féminin
Messages : 12377
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bandeau des modérateurs dans les réponses

Message par julie10902 le Dim 4 Déc 2016 - 14:54

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
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bandeau des modérateurs dans les réponses

Message par Neptunia le Dim 4 Déc 2016 - 15:19

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
résolu 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.
avatar

Neptunia
Membre actif

Féminin
Messages : 12377
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bandeau des modérateurs dans les réponses

Message par julie10902 le Dim 4 Déc 2016 - 17:57

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 ^^
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bandeau des modérateurs dans les réponses

Message par Neptunia le Dim 4 Déc 2016 - 18:10

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.
avatar

Neptunia
Membre actif

Féminin
Messages : 12377
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bandeau des modérateurs dans les réponses

Message par julie10902 le Dim 4 Déc 2016 - 19:11

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 Wink
Je tiens vraiment à m'excuser car ce n'est pas l'action que j'ai voulue faire.
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bandeau des modérateurs dans les réponses

Message par Neptunia le Dim 4 Déc 2016 - 20:11

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.
avatar

Neptunia
Membre actif

Féminin
Messages : 12377
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bandeau des modérateurs dans les réponses

Message par julie10902 le Dim 4 Déc 2016 - 20:24

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 Wink
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bandeau des modérateurs dans les réponses

Message par Neptunia le Dim 4 Déc 2016 - 20:45

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
Right http://www.jquery-fr.com/manuel/Les-parcours/parent/
Right 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.
avatar

Neptunia
Membre actif

Féminin
Messages : 12377
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bandeau des modérateurs dans les réponses

Message par julie10902 le Dim 4 Déc 2016 - 20:46

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

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

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bandeau des modérateurs dans les réponses

Message par julie10902 le Dim 4 Déc 2016 - 20:50

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

Merci beaucoup infiniment @Neptunia
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bandeau des modérateurs dans les réponses

Message par Neptunia le Dim 4 Déc 2016 - 21:12

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 :
Astuce Javascript sur Forumactif
avatar

Neptunia
Membre actif

Féminin
Messages : 12377
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bandeau des modérateurs dans les réponses

Message par julie10902 le Dim 4 Déc 2016 - 21:46

Ah d'accord merci ^^
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum