Customize User Cards

[Discourse]

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

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

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:

• Clickable Social Icon Links on Profile
• User Card Directory
• “Last Seen” User Card

Last edited by @SaraDev 2025-03-04T00:49:27Z

Check document

Perform check on document:

[Mason_L]

@Discourse

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

This part doesn’t work.
There is no ‘data-user-card’ under ‘user-card’ class.

[Turtle]

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?

[nolo (Manuel)]

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

@Discourse

/* 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;
}

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.

[SaraDev (Sara Devlaeminck)]

@Turtle

I’m trying to make it so admins have blue colored usernames everywhere on the site

@nolo

I believe current declarations would be:

@Discourse

/* 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;
}

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.

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.

I’ve updated the guide here with this information as well.

[Turtle]

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.

[SaraDev (Sara Devlaeminck)]

@Turtle

change the username color on the card though

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