Personnaliser les cartes utilisateur

Documentation Gestion de site
,
1

:bookmark: Ce guide décrit comment personnaliser si et comment les cartes utilisateur sont affichées sur Discourse, y compris l’ajout de champs personnalisés et la masquage des profils utilisateur.

:person_raising_hand: Niveau d’utilisateur requis : Administrateur

La personnalisation des cartes utilisateur avec CSS vous permet de personnaliser l’apparence et les informations affichées.

Personnalisation des cartes utilisateur

Les cartes utilisateur peuvent être personnalisées avec du CSS. Voici quelques exemples de personnalisations CSS que vous pouvez utiliser :

Changement de la couleur de fond

Pour changer la couleur de fond des cartes utilisateur :

.user-card {
    background-color: #f0f0f0;
}

Ajout d’une bordure autour des cartes utilisateur

Pour ajouter une bordure autour des cartes utilisateur :

.user-card {
    border: 2px solid #4CAF50;
    border-radius: 10px;
}

Changement de la police et de la couleur des noms d’utilisateur

Pour changer la police et la couleur des noms d’utilisateur sur les cartes utilisateur :

.user-card .username {
    font-family: 'Arial', sans-serif;
    color: #FF5733;
}

Masquage d’éléments spécifiques

Pour masquer certains éléments tels que la localisation de l’utilisateur ou la date d’adhésion :

.user-card .map-location,
.user-card .user-info .join-date {
    display: none;
}

Personnalisation de l’apparence en fonction du groupe d’utilisateurs ou d’un utilisateur spécifique

Pour personnaliser l’apparence de la carte utilisateur pour un groupe d’utilisateurs ou un utilisateur spécifique :

/* Personnalisation pour un groupe d'utilisateurs spécifique */
.user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* Personnalisation pour un nom d'utilisateur spécifique */
.user-card.user-card-Username {
    background-color: #FFD700;
}

:information_source: Seul le groupe principal de l’utilisateur est défini comme sélecteur de classe. Lorsqu’un utilisateur n’a pas de groupe principal, le sélecteur de classe est group-null.

Champs utilisateur personnalisés

De plus, vous pouvez ajouter des champs utilisateur personnalisés aux cartes utilisateur en suivant ces étapes :

  1. Accédez à la page /admin/customize/user_fields.
  2. Cochez la case Afficher sur la carte utilisateur ? pour les champs que vous souhaitez afficher sur la carte utilisateur.

screenshot
screenshot697×512 19.7 KB

Masquage de tous les profils utilisateur

Si vous devez masquer les profils utilisateur au public, vous pouvez utiliser le paramètre de site suivant :

  • Masquer les profils utilisateur du public : Désactive les cartes utilisateur, les profils utilisateur et le répertoire utilisateur pour les utilisateurs anonymes.

Autres personnalisations

D’autres personnalisations peuvent être effectuées via des composants de thème, tels que :

7 « J'aime »
2

Cette partie ne fonctionne pas.
Il n’y a pas de ‘data-user-card’ sous la classe ‘user-card’.

3

J’essaie de faire en sorte que les administrateurs aient des noms d’utilisateur de couleur bleue partout sur le site - je ne sais pas s’il existe un sélecteur pour les noms d’utilisateur partout qui fonctionnera - mais voici ce que j’ai pour le CSS et ça ne fonctionne pas.

.group-admins .user-card .username {
    color: #2596be;
}

Des pensées ou des idées ? Le sélecteur est-il juste différent maintenant puisque cela fait plus de deux ans que cela a été publié ? @SaraDev tu sembles être la personne qui a écrit ceci, sais-tu ce qui se passe ?

4

Oui, cela ne semble pas à jour. Je pense que les déclarations actuelles seraient :

De plus, seul le groupe principal de l’utilisateur est défini comme sélecteur de classe. Lorsque l’utilisateur n’a pas de groupe principal, le sélecteur de classe est group-null.

Cela signifie que vous ne pouvez pas cibler les cartes d’utilisateurs des administrateurs ou des modérateurs, car ces groupes ne peuvent pas être définis comme groupes principaux. Si vous inspectez les cartes d’utilisateurs des administrateurs ici sur meta, vous verrez que le sélecteur de classe est group-team.

2 « J'aime »
6

Je peux confirmer que c’est correct, et actuellement la meilleure méthode à utiliser pour personnaliser l’apparence de la carte utilisateur en fonction du groupe d’utilisateurs ou de l’utilisateur spécifique.

Merci @manuel et @Turtle d’avoir souligné cela. :slightly_smiling_face:

J’ai mis à jour le guide ici avec ces informations également.

3 « J'aime »
7

D’accord, mais que faire si je veux changer la couleur du nom d’utilisateur sur la carte ? Qu’est-ce que j’ajoute ? Désolé, je ne connais pas grand-chose aux sélecteurs CSS.

1 « J'aime »
8

Pour ce type de personnalisation, vous voudrez utiliser le CSS suivant :

.name-username-wrapper {
   color: #f47dff;
}

Cela personnaliserait la couleur de l’élément username sur les cartes utilisateur de tous les utilisateurs d’un site.

Ex :

image
image1071×366 25.4 KB

De plus, pour vous aider à trouver les sélecteurs CSS spécifiques à utiliser pour des personnalisations comme celle-ci sur votre site, vous pouvez suivre : Trouver les bons sélecteurs CSS

2 « J'aime »
9

Suggestion rapide et mineure : lorsque les utilisateurs avaient un avatar avec la même couleur d’arrière-plan que la carte utilisateur, il n’y avait pas de séparation appropriée.

Nous avons simplement ajouté la même ombre portée à l’image d’avatar de la carte utilisateur, ce qui a résolu le problème.

.user-card .first-row .avatar {
    box-shadow: var(--shadow-dropdown);
}