Distinguer les messages du staff

par Threax Mar 10 Juil 2012 - 17:18

Distinguer les messages du staff

Voici une explication pour identifier différemment les messages du staff du forum (dégradé en fond de message, bordure de couleur...). Ce tutoriel fonctionne sur les six versions de forum.

Création d'un rang

Panneau d'administration  Utilisateurs & groupes  Rangs - Administration des rangs

Cliquez ensuite sur le bouton edit

d'un rang ou sur "Ajouter un nouveau rang". Dans la case "Titre du rang", on y insère ce code :

Code:: <span class="Administrateur">Administrateur</span>

Vous pouvez personnaliser le nom de la class par ce que vous souhaitez, en faisant bien attention de le remplacer également dans la suite du tutoriel. Pour que le messages d'un utilisateur soit affiché différemment, il vous faudra lui assigner le rang en question.

Création du script

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "différents messages du staff" et pour placement "Sujets".

Toutes versions sauf AwesomeBB

Insérez-y le code suivant :

Code:: $(function() { $('.Administrateur').closest('.post').addClass('bgAdministrateur'); });

Version AwesomeBB

Insérez-y le code suivant :

Code:: $(function() { $('.Administrateur').closest('.post-wrap').addClass('bgAdministrateur'); });

Personnalisation de l'apparence des messages

Jusqu'à présent, nous avons créé un rang qui n'apparait que pour l'utilisateur qui a ce rang. Ce rang comporte une classe qui permet d'identifier l'utilisateur. Le script recherche cette classe et, s'il la trouve, ajoute une classe .bgAdministrateur au message entier du posteur. Grâce à cela vous pouvez personnaliser l'apparence d'un post de cet utilisateur, en ajoutant un dégradé en fond par exemple, ou en ajoutant une bordure de couleur.

Invision : vous pouvez agir sur le message grâce à ce sélecteur CSS :

Code:
.bgAdministrateur .post-container
phpBB2 : vous pouvez agir sur le message grâce à ce sélecteur CSS :

Code:
.bgAdministrateur td.row1, .bgAdministrateur td.row2
phpBB3 : vous pouvez agir sur le message grâce à ce sélecteur CSS :

Code:
.post.bgAdministrateur
PunBB : vous pouvez agir sur le message grâce à ce sélecteur CSS :

Code:
.bgAdministrateur .postmain
ModernBB : vous pouvez agir sur le message grâce à ce sélecteur CSS :

Code:
.post.bgAdministrateur
AwesomeBB : vous pouvez agir sur l'en-tête des messages grâce à ce sélecteur CSS :

Code:
.bgAdministrateur .post-header

Vous pouvez agir sur le corps des messages grâce à ce sélecteur CSS :

Code:
.bgAdministrateur .post

Exemple : ajouter un dégradé de couleur en fond des messages du staff

Panneau d'administration  Affichage  Couleurs - onglet Feuille de style CSS

En ajoutant le code suivant, le fond des utilisateurs ayant ce rang apparaitront (sur la version phpBB3 et la version ModernBB) avec un fond dégradé :

Code:: .post.bgAdministrateur { background-image: url('http://www.allo-image.net/stockimg/upload/1596903058560f823ddb78cbleuvert.png'); }

Résultat :

Distinguer les messages du staff Tuto122

	Un grand nombre de dégradés est disponible dans le libre service : cliquez ici.

Exemple : afficher une bordure de couleur aux messages du staff

Panneau d'administration  Affichage  Couleurs - onglet Feuille de style CSS

En ajoutant le code suivant, le fond des utilisateurs ayant ce rang apparaitront (sur la version phpBB3 et la version ModernBB) avec une bande rouge en en-tête de leurs messages :

Code:: .post.bgAdministrateur { border-top: 10px solid #FF0000; }

Résultat :

Distinguer les messages du staff Tuto218