
,
l'astuce n'est pas de moi , mais je trouvais que ce tutoriel était vraiment très utile
pour vous en faire part

.
La source En fait , le tutoriel donne une icône ou une couleur ou même les deux si besoin ,
pour afficher soit que le membre fait parti du groupe bla ou simplement dire que ce membre
a reçu un avertissement

, à vous de faire la part des choses
et de vous laisser aller à votre imagination

.
On part du principe que le membre "milouze" a fait une grosse bêtise et que je l'ai sanctionné ,
on verra alors sur tout le forum quelque soit l'emplacement ceci:
L'aperçu imagé sur l'index:
![[PHPBB2] Mettez une icône ou une couleur à un membre choisi 119](https://i.servimg.com/u/f38/11/26/21/37/119.png)
Il aura une couleur rouge et une icône signalant un problème
Pour groupe "Photoshop" par exemple , on pourra avoir cette apparence:
L'aperçu imagé sur l'index:
![[PHPBB2] Mettez une icône ou une couleur à un membre choisi 214](https://i.servimg.com/u/f38/11/26/21/37/214.png)
Il y aura une couleur blanche avec l'icône Photoshop .
On va commencer par créer un javascript :
Modules/
HTML JAVASCRIPT/
Gestion des codes Javascript/
Créer un nouveau JavascriptMettre un titre explicite.
Cocher sur toutes les pages.
Collez ceci
- Code:
-
jQuery(document).ready(function(){
jQuery("a:contains('Le Pseudo du membre')").wrapInner(jQuery('<span class="Membre1"></span>'));
});
Remplacez "Le Pseudo du membre" par le pseudo désiré .
Le Javacript contient seulement un membre

,
pour en rajouter un autre et ainsi de suite,
il suffira d'ajouter ceci:
- Code:
-
jQuery("a:contains('Le Pseudo du membre')").wrapInner(jQuery('<span class="Membre2"></span>'));
Ce qui donnera:
- Code:
-
jQuery(document).ready(function(){
jQuery("a:contains('Le Pseudo du membre')").wrapInner(jQuery('<span class="Membre1"></span>'));
jQuery("a:contains('Le Pseudo du membre')").wrapInner(jQuery('<span class="Membre2"></span>'));
});
Pour cinq membres , le Javscript sera comme ceci:
- Code:
-
jQuery(document).ready(function(){
jQuery("a:contains('Le Pseudo du membre')").wrapInner(jQuery('<span class="Membre1"></span>'));
jQuery("a:contains('Le Pseudo du membre')").wrapInner(jQuery('<span class="Membre2"></span>'));
jQuery("a:contains('Le Pseudo du membre')").wrapInner(jQuery('<span class="Membre3"></span>'));
jQuery("a:contains('Le Pseudo du membre')").wrapInner(jQuery('<span class="Membre4"></span>'));
jQuery("a:contains('Le Pseudo du membre')").wrapInner(jQuery('<span class="Membre5"></span>'));
});
Pensez a cliquer sur le bouton

Dans la feuille de style:
Affichage/
Images et Couleurs/
Couleurs/
Feuille de stylecollez ceci :
- Code:
-
.Membre1
{
color: #ED1254; /*La couleur de police*/
padding-right: 21px; /*ne pas toucher*/
background: transparent url('LIEN DE L IMAGE') no-repeat center right;
}
.Membre2
{
color:#ffffff; /*La couleur de police*/
padding-right: 21px; /*ne pas toucher*/
background: transparent url('LIEN DE L IMAGE') no-repeat center right;
}
Pour avoir un effet sympa , l'icône ne devra pas dépasser la taille de 16px
Pensez à valider les modifications en cliquant sur le bouton