Customize User Cards

Documentation Site Management
,
1

:bookmark: This guide describes how to customize whether and how user cards are displayed on Discourse, including adding custom fields and hiding user profiles.

:person_raising_hand: 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:

  1. Navigate to the /admin/customize/user_fields page.
  2. Select the Show on user card? checkbox for the fields you want to display on the user card.

screenshot
screenshot697×512 19.7 KB

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 documentPerform check on document:
6 Likes