Distinguer les messages du staff

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

  • 0

Astuce Distinguer les messages du staff

Message 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

Threax

Threax
Membre actif

Masculin
Messages : 17276
Inscrit(e) le : 27/08/2005

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

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

- Sujets similaires

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