This guide describes how to customize whether and how user cards are displayed on Discourse, including adding custom fields and hiding user profiles.
Required user level: Administrator
Customizing user cards with CSS allows you to personalize the appearance and information displayed.
Customizing user cards
User cards can be customized with CSS. Here are some examples of CSS customizations you can use:
Changing the background color
To change the background color of user cards:
.user-card {
background-color: #f0f0f0;
}
Adding a border around user cards
To add a border around user cards:
.user-card {
border: 2px solid #4CAF50;
border-radius: 10px;
}
Changing the font and color of usernames
To change the font and color of usernames on user cards:
.user-card .username {
font-family: 'Arial', sans-serif;
color: #FF5733;
}
Hiding specific elements
To hide certain elements such as the user’s location or join date:
.user-card .map-location,
.user-card .user-info .join-date {
display: none;
}
Customizing the appearance based on user group or specific user
To customize the user card appearance for a specific user group or user:
/* Customize for a specific user group */
.group-moderators .user-card {
background-color: #FFF8DC;
}
/* Customize for a specific username */
.user-card[data-user-card="specific_username"] {
background-color: #FFD700;
}
Custom User Fields
In addition, you can add custom user fields to user cards by taking the following steps:
- Navigate to the
/admin/customize/user_fieldspage. - Select the
Show on user card?checkbox for the fields you want to display on the user card.
Hiding all user profiles
If you need to hide user profiles from the public, you can use the following site setting:
-
hide user profiles from public: Disable user cards, user profiles, and the user directory for anonymous users.
Other Customizations
Other customizations can be made through theme components, such as:
Last edited by @SaraDev 2024-07-23T23:20:47Z
Check document
Perform check on document: