Personnaliser les cartes utilisateur

[Discourse]

Ce guide décrit comment personnaliser l’affichage et le comportement des cartes d’utilisateur sur Discourse, y compris l’ajout de champs personnalisés et la masquage des profils d’utilisateurs.

Niveau d’utilisateur requis : Administrateur

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

Personnalisation des cartes d’utilisateur

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

Modifier la couleur de fond

Pour modifier la couleur de fond des cartes d’utilisateur :

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

Ajouter une bordure autour des cartes d’utilisateur

Pour ajouter une bordure autour des cartes d’utilisateur :

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

Modifier la police et la couleur des noms d’utilisateur

Pour modifier la police et la couleur du nom principal/nom d’utilisateur affiché sur les cartes d’utilisateur :

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

Masquer des éléments spécifiques

Pour masquer certains éléments tels que l’emplacement de l’utilisateur ou la date d’inscription :

.user-card .location,
.user-card .metadata__user-created {
    display: none;
}

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

Pour personnaliser l’apparence de la carte d’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;
}

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.

Champs d’utilisateur personnalisés

En outre, vous pouvez ajouter des champs d’utilisateur personnalisés aux cartes d’utilisateur en suivant les étapes ci-dessous :

1. Accédez à la page /admin/config/user-fields.
2. Cochez la case Afficher sur la carte d'utilisateur ? pour les champs que vous souhaitez afficher sur la carte d’utilisateur.

Masquer tous les profils d’utilisateurs

Si vous devez masquer les profils d’utilisateurs au public, vous pouvez utiliser le paramètre du site suivant :

• masquer les profils d'utilisateurs au public : Désactive les cartes d’utilisateur, les profils d’utilisateurs et le répertoire des utilisateurs pour les utilisateurs anonymes.

Autres personnalisations

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

• Liens cliquables vers les icônes de réseaux sociaux sur le profil
• Répertoire des cartes d’utilisateur
• Carte d’utilisateur « Dernière connexion »

[Mason_L]

@Discourse

.user-card[data-user-card="specific_username"] {
    background-color: #FFD700;
}

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

[Turtle]

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 ?

[manuel (Manuel Kostka)]

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

@Discourse

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

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

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.

[SaraDev (Sara Devlaeminck)]

@Turtle

J’essaie de faire en sorte que les administrateurs aient des noms d’utilisateur de couleur bleue partout sur le site

@manuel

Je pense que les déclarations actuelles seraient :

@Discourse

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

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

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.

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.

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

[Turtle]

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.

[SaraDev (Sara Devlaeminck)]

@Turtle

changer la couleur du nom d’utilisateur sur la carte

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 :

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

[jrgong]

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);
}