Customize User Cards

: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 */
.user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* Customize for a specific username */
.user-card.user-card-Username {
    background-color: #FFD700;
}

:information_source: Only the userā€™s primary group is set as a class selector. When the user has no primary group, the class selector is group-null .

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.

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 2025-03-04T00:49:27Z

Check documentPerform check on document:
6 Likes

This part doesnā€™t work.
There is no ā€˜data-user-cardā€™ under ā€˜user-cardā€™ class.

Iā€™m trying to make it so admins have blue colored usernames everywhere on the site- not sure if thereā€™s like a selector for usernames everywhere thatā€™ll work- but hereā€™s what I have for CSS and it isnā€™t working.

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

Any thoughts or ideas? Is the selector just different now since itā€™s been over two years since this was published? @SaraDev you look to be the person who wrote this, do you know whatā€™s up?

Yes, this doesnā€™t seem up-to-date. I believe current declarations would be:

Also, only the userā€™s primary group is set as a class selector. When the user has no primary group, the class selector is group-null.

That means you canā€™t target user cards of admins or moderators, as these groups canā€™t be set as primary groups. If you inspect the user cards of admins here on meta, youā€™ll see the class selector is group-team.

2 Likes

I can confirm that this is correct, and currently the best method to use for customizing the user card appearance based on user group or specific user.

Thanks @nolo and @Turtle for pointing this out. :slightly_smiling_face:

Iā€™ve updated the guide here with this information as well.

3 Likes

Alright, but what if I want to change the username color on the card though? What do I add? Sorry, I donā€™t know much about CSS selectors.

1 Like

For this type of customization, you would want to use the following CSS:

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

This would customize the color of the username element on the user cards of all users on a site.

Ex:

Also, to help with finding the specific CSS selectors to use for customizations like this on your site, you can follow: Finding the right CSS selectors

2 Likes