Customize User Cards

[Discourse]

Это руководство описывает, как настроить отображение карточек пользователей на Discourse, включая добавление пользовательских полей и скрытие профилей пользователей.

Требуемый уровень доступа: Администратор

Настройка карточек пользователей с помощью CSS позволяет персонализировать их внешний вид и отображаемую информацию.

Настройка карточек пользователей

Карточки пользователей можно настраивать с помощью CSS. Вот несколько примеров таких настроек:

Изменение цвета фона

Чтобы изменить цвет фона карточек пользователей:

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

Добавление рамки вокруг карточек пользователей

Чтобы добавить рамку вокруг карточек пользователей:

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

Изменение шрифта и цвета имени пользователя

Чтобы изменить шрифт и цвет основного имени/имени пользователя, отображаемого на карточках:

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

Скрытие определенных элементов

Чтобы скрыть определенные элементы, такие как местоположение пользователя или дата регистрации:

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

Настройка внешнего вида в зависимости от группы пользователей или конкретного пользователя

Чтобы настроить внешний вид карточки пользователя для конкретной группы или пользователя:

/* Настройка для конкретной группы пользователей */
.user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* Настройка для конкретного имени пользователя */
.user-card.user-card-Username {
    background-color: #FFD700;
}

В качестве селектора класса указывается только основная группа пользователя. Если у пользователя нет основной группы, селектор класса — group-null.

Пользовательские поля

Кроме того, вы можете добавить пользовательские поля на карточки пользователей, выполнив следующие шаги:

1. Перейдите на страницу /admin/config/user-fields.
2. Установите флажок Показывать на карточке пользователя? для тех полей, которые вы хотите отображать на карточке.

Скрытие всех профилей пользователей

Если вам нужно скрыть профили пользователей от публичного доступа, используйте следующую настройку сайта:

• Скрыть профили пользователей от публичного доступа: Отключает карточки пользователей, профили пользователей и каталог пользователей для анонимных пользователей.

Другие настройки

Другие настройки можно выполнить с помощью компонентов тем, например:

• Кликабельные ссылки на иконки социальных сетей в профиле
• Каталог карточек пользователей
• Карточка пользователя “Последний визит”

[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?

[manuel (Manuel Kostka)]

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

@manuel

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 @manuel 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

[jrgong]

Quick and small suggestion: whenever users have an avatar with the same background color as the user card, there wasn’t proper separation.

We simply added the same box shadow to the user card avatar img, which did the trick

.user-card .first-row .avatar {
    box-shadow: var(--shadow-dropdown);
}