[PHPBB2] Mettez une icône ou une couleur à un membre choisi

 ,

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:



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:


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 Javascript
Mettre 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 style


collez 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  

 

Citation :

On part du principe que le membre "milouze"  a fait une grosse bêtise et que je l'ai sanctionné

 .........

  pauvre tit père , il est tout seul   .

Très intéressant merci Philippe  

Merci

 

merci

Merci Philippe

Merci   

Merci :)

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !