Rendez les utilisateurs du staff plus reconnaissables avec des avatars, des posts et des mentions personnalisés

[Discourse]

Il existe diverses méthodes permettant de rendre un utilisateur du personnel immédiatement reconnaissable par les autres utilisateurs.

Afficher le bouclier de modérateur

Tout utilisateur du personnel qui est modérateur, ou administrateur et modérateur, aura le bouclier de modérateur à côté de son nom d’utilisateur.

Conseils : le bouclier n’apparaîtra pas si l’utilisateur du personnel a le rôle d’administrateur mais pas celui de modérateur.

CSS pour changer la couleur du bouclier

Changer la couleur pour tous les utilisateurs du personnel

/*Changer la couleur pour tous les utilisateurs du personnel*/
span.username.staff .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

Pour changer la couleur du bouclier partout où il apparaît, et pas seulement dans un sujet :

span.username.staff .d-icon.d-icon-shield-halved,
.user-card .first-row .names .d-icon.d-icon-shield-halved,
.user-profile-names .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

Changer la couleur pour différencier les utilisateurs ADMIN des utilisateurs MOD

/*Changer la couleur pour différencier les utilisateurs ADMIN des utilisateurs MOD*/
span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: green;
  }

  &.admin .d-icon.d-icon-shield-halved {
    color: red;
  }
} 

CSS pour masquer le bouclier

Masquer le bouclier uniquement dans les messages

.names .svg-icon-title {
    display: none;
}

Masquer le bouclier dans les messages et la carte utilisateur

.names .svg-icon-title, 
.user-card .names .d-icon.d-icon-shield-halved {
  display: none;
}

Ajouter des titres

Tout utilisateur du personnel peut accéder à /admin/users/list/staff et créer un titre pour son propre compte. Le titre apparaîtra à côté du nom d’utilisateur des utilisateurs du personnel :

Voir à titre d’exemple :

CSS pour personnaliser un titre existant

Personnaliser le titre pour les membres du personnel

.names .staff ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
}

Personnaliser le titre pour différencier les administrateurs et les modérateurs

.names {
  .moderator ~ .user-title {
    background: green;
    color: white;
    padding: 3px 5px;
  }

  .admin ~ .user-title {
    background: red;
    color: white;
    padding: 3px 5px;
  }
}

Conseils : les utilisateurs du personnel de votre organisation n’ont pas besoin d’être de véritables administrateurs ou modérateurs du site ; ils peuvent simplement être des membres sans permissions spéciales. Pour personnaliser leur titre, créez simplement un nouveau groupe personnalisé, configurez-le comme groupe principal et ajoutez les utilisateurs nécessaires. Il est possible de définir un titre automatique qui sera attribué par défaut à tous les membres.

Personnaliser le titre des utilisateurs non-admin et non-mod appartenant à un groupe personnalisé principal

Remplacez VOTRE-GROUPE-PERSONNALISÉ par le nom du groupe ; dans l’exemple ci-dessous, il s’agit de .group--community ~ .user-title, etc.

.group--VOTRE-GROUPE-PERSONNALISÉ ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
  }

N’oubliez pas qu’un utilisateur peut choisir un autre titre que celui qui lui est attribué, depuis son profil utilisateur. Dans ce cas, le titre affiché dans les messages sera celui choisi par l’utilisateur ; il peut également le configurer sur « aucun » — dans ce cas, aucun titre ne sera affiché.

Pour éviter cela, il est possible de créer un titre personnalisé de zéro afin qu’il ne soit pas modifiable par l’utilisateur.

CSS pour créer un titre personnalisé de zéro

Exemple :

Conseils pour créer un titre après le nom d'utilisateur

/*Afficher un titre personnalisé après le nom d'utilisateur pour tous les utilisateurs du PERSONNEL
Il ne sera pas affiché si le paramètre du site « privilégier le nom d'utilisateur dans l'interface utilisateur » est désactivé */
.username.staff::after {
    content: 'Utilisateur du personnel';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*Optionnel - Réduire la taille dans la carte utilisateur*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*Optionnel - Masquer le bouclier de modérateur uniquement dans les messages*/
.names .svg-icon-title {
    display:none;
}

/*Afficher un titre personnalisé après le nom d'utilisateur pour différencier les utilisateurs ADMIN des utilisateurs MOD
Il ne sera pas affiché si le paramètre du site « privilégier le nom d'utilisateur dans l'interface utilisateur » est désactivé */
.username {
  &.admin:after {
    content: 'Utilisateur Admin' !important;
    color: red !important;
    border: 1px solid red !important;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }

  &.moderator:after {
    content: 'Utilisateur Modérateur';
    color: green;
    border: 1px solid green;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }
}

/*Optionnel - Masquer l'icône du bouclier uniquement dans les messages*/
.names .svg-icon-title {
  display: none;
}

Conseils pour créer un titre après le nom complet

/*Afficher un titre personnalisé après le nom complet pour tous les membres du PERSONNEL*/
span.staff :after {
  content: "Personnel";
    color: white;
    background-color: #00A9DB;
    border-radius: 8px;
    margin-left:5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
}

/*Afficher un titre personnalisé après le nom complet pour différencier les utilisateurs ADMIN des utilisateurs MOD */
span {
  &.admin :after {
    content: "Admin" !important; 
    color: white;
    background-color: red !important;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }

  &.moderator :after {
    content: "Modérateur";
    color: white;
    background-color: green;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }
}

Question : Puis-je ajouter les deux titres personnalisés ?

Oui, c’est possible, bien que redondant. Voir l’exemple ci-dessous :

.username.staff::after {
    content: 'Utilisateur du personnel';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*Optionnel - Réduire la taille dans la carte utilisateur*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*Optionnel - Masquer le bouclier de modérateur*/
.names .svg-icon-title {
    display:none;
}


span {
  &.admin :after {
    content: "Admin" !important; 
    color: white;
    background-color: red !important;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }

  &.moderator :after {
    content: "Modérateur";
    color: white;
    background-color: green;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }
}

Ajouter un ornement d’avatar

Vous pouvez ajouter un ornement en bas à droite de l’avatar d’un utilisateur du personnel :

Vous devez créer un groupe personnalisé, ajouter les utilisateurs du personnel en tant que membres et rendre le groupe principal. Voir Add group flair on member avatars pour plus de détails.

Si vous souhaitez ajouter une image personnalisée au lieu d’une icône, vous pouvez la télécharger sur votre site web et utiliser l’URL comme décrit dans le guide Inclusion d’actifs dans les thèmes et composants distants. Après avoir ajouté l’image dans la section Téléchargements du thème, la variable de l’image et son lien direct apparaîtront. Faites un clic droit sur le lien direct et copiez le lien dans le champ Image de l’ornement d’avatar.

Personnaliser les noms et les noms d’utilisateur du personnel

À l’aide d’un peu de CSS, vous pouvez personnaliser les noms d’utilisateur du personnel dans les messages.

Notez que ceux présentés ci-dessous ne sont que des exemples ; chacun peut modifier le style comme il le souhaite !

Changer la couleur du nom d’utilisateur

Par défaut, le nom d’utilisateur apparaît avant le nom complet.

Changer la couleur du nom d'utilisateur pour tous les utilisateurs du personnel

span.username.staff a {
      color: #00A9DB;
}

Changer la couleur du nom d'utilisateur pour différencier les administrateurs et les modérateurs

span.username {
  &.moderator {
    a {
      color: green;
    }
  }

  &.admin {
    a {
      color: red;
    }
  }
}

Cette variante utilise (presque) le même CSS que celui utilisé pour le titre personnalisé.

span.username {
  &.moderator {
    a {
        color: white;
        background-color: green;
        border-radius: 8px;
        margin-left: 5px;
        padding-left: 4px;
        padding-right: 4px;
    }
  }

  &.admin {
    a {
        color: white;
        background-color: red;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
    }
  }
}

Changer la couleur du nom

Si vous souhaitez que le nom complet apparaisse avant le nom d’utilisateur, activez le paramètre du site afficher le nom dans les messages et désactivez privilégier le nom d'utilisateur dans l'interface utilisateur.

Changer la couleur du nom pour tous les utilisateurs du personnel

.names span.staff a {
   color: #00A9DB;
} 

Cette variante utilise (presque) le même CSS que celui utilisé pour le titre personnalisé.

.names span.staff a {
    color: #00A9DB;
    background-color: #D3F5FF; /*utilisez une couleur claire*/
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
}

Changer la couleur du nom pour différencier les administrateurs et les modérateurs

.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

  &.admin {
    a, i {
      color: red;
    }
  }
}

Cette variante utilise (presque) le même CSS que celui utilisé pour le titre personnalisé.

.names span {
  &.moderator {
    a {
        color: green;
        border: 1px solid green;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 5px;
    }
  }

  &.admin {
    a {
        color: red;
        border: 1px solid red;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 5px;
    }
  }
}

Conseils : pour une raison quelconque, vous souhaiterez peut-être personnaliser un seul membre du personnel — peut-être le fondateur du site ou un membre particulièrement apprécié. Voici un exemple de la manière de cibler un seul utilisateur — et oui, la même méthode peut être utilisée pour n’importe quel utilisateur, même non membre du personnel-

Nom d'utilisateur

/*Remplacez NOM-UTILISATEUR par le nom d'utilisateur de l'utilisateur*/
.topic-meta-data .names span.username a[data-user-card=NOM-UTILISATEUR] {
  color: blue;
}

Nom

/*Remplacez NOM-UTILISATEUR par le nom de l'utilisateur*/
.topic-meta-data .full-name a[data-user-card=NOM-UTILISATEUR] {
  color: blue;
}

Nom et nom d'utilisateur

.topic-meta-data .names span a[data-user-card=NOM-UTILISATEUR] {
    color: blue;
}

Personnaliser l’arrière-plan des messages du personnel

Les utilisateurs du personnel peuvent manuellement ajouter une couleur du personnel en utilisant le bouton Ajouter une couleur du personnel sur les messages.

et le résultat sera :

Ajouter une couleur d'arrière-plan à tout le message

En ajoutant quelques lignes de CSS, la couleur d’arrière-plan peut être appliquée à tout le message lorsque le bouton Ajouter une couleur du personnel est cliqué.

.moderator {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
    background: #ffffd0; /*changez la couleur ici*/
  }
}

Il est possible d’automatiser cette fonction et de personnaliser tous les messages écrits par les utilisateurs du personnel de diverses manières en utilisant CSS. Pour ce faire, il est nécessaire de créer un groupe personnalisé principal comme décrit ci-dessus, voir le chapitre Ornements. Lorsque vos membres du personnel sont dans un groupe principal, vous pouvez cibler leurs messages avec CSS.

Conseils : vous pouvez ajouter tous les membres du personnel dans le groupe ou décider d’ajouter uniquement les administrateurs ou uniquement les modérateurs. Vous pouvez également créer deux groupes principaux différents pour les administrateurs et les modérateurs (notez que vous devrez utiliser deux noms différents car « administrateurs » et « modérateurs » sont des noms déjà utilisés pour les groupes automatiques) et configurer le CSS pour différencier les messages des administrateurs de ceux des modérateurs.

Changer automatiquement l'arrière-plan des messages pour tous les utilisateurs du personnel

/*Remplacez NOM-GROUPE par le nom de votre groupe*/
.topic-post.group-NOM-GROUPE .topic-body .cooked { 
    background-color: #ffffd0; /*changez la couleur ici*/
}

ou

.topic-post.group-NOM-GROUPE .topic-body { 
    background-color: #ffffd0; /*changez la couleur ici*/
}

ou même

/*Remplacez NOM-GROUPE par le nom de votre groupe*/

.topic-post.group-NOM-GROUPE .topic-body .cooked { 
    background-color: #ffffd0; /*changez la couleur ici*/
}

.topic-post.group-NOM-GROUPE .names span { 
    background-color: #ffffd0; /*changez la couleur ici*/
}

Changer automatiquement la couleur de la police et la famille de polices pour tous les utilisateurs du personnel

/*Remplacez NOMGROUPE par le nom de votre groupe*/
.topic-post.group-NOMGROUPE .topic-body .cooked { 
    color: #fec601; /*changez la couleur de la police ici*/
    font-family: ......; /* changez la famille de polices ici */
}

Changer automatiquement l'arrière-plan uniquement des réponses du personnel et pas de leur premier message

Chaque message dans un sujet a un ID avec ce format : post_number. Pour le premier message dans un sujet, l’ID est post_1, les réponses ont des IDs comme post_2, post_3, etc.

Si vous souhaitez ajouter un arrière-plan à tous les messages du personnel sauf le premier :

/*Remplacez NOM-GROUPE par le nom de votre groupe*/
.topic-post.group-NOM-GROUPE .onscreen-post:not(#post_1) .topic-body .cooked { 
    background-color: #ffffd0; /*changez la couleur ici*/
}

Ajouter du contenu supplémentaire dans les messages du personnel

Une simple signature

.topic-post.group-NOM-GROUPE .topic-body .cooked::after {
    content: "De votre personnel sympathique";
    font-size: small;
    color: #d29400;
    float:right;
    font-style: italic;
}

Un simple logo

.topic-post.group-NOM-GROUPE .topic-body .cooked::after {
    background-image: url("URL-IMAGE");
    background-repeat: no-repeat;
    background-size: 138px 36px; /*changez ces valeurs selon la taille de l'image*/
    width: 138px; /*changez cette valeur selon la taille de l'image*/
    height: 36px; /*changez cette valeur selon la taille de l'image*/
    display: block;
    float: right;
    content: "";
}

Personnaliser les couleurs des mentions

Voir : Customize mention colors

[one1]

@Discourse

Conseils : vos utilisateurs du personnel n’ont pas à être nécessairement des administrateurs ou des modérateurs du site, ils peuvent simplement être des membres sans permissions spéciales.

Je suis confus par cela. Quand il dit, « vos utilisateurs du personnel », le personnel dont il est question est-il le personnel de l’organisation ou de l’entreprise (par exemple, les employés) qui n’a rien à voir avec la gestion du forum ? Parce que dans le contexte de Discourse, « personnel » a une signification très spécifique, c’est-à-dire les modérateurs et les administrateurs.

Si tel est le cas, je recommanderais de changer la formulation pour lire :

Conseils : les utilisateurs employés de votre organisation n’ont pas à être de véritables administrateurs ou modérateurs du site, ils peuvent simplement être des membres sans permissions spéciales.