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

[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;
}

Эта часть не работает.
В классе ‘user-card’ нет атрибута ‘data-user-card’.

[Turtle]

Я пытаюсь сделать так, чтобы у администраторов имена пользователей были синими на всём сайте. Не уверен, есть ли какой-то универсальный селектор для имён пользователей, который бы сработал. Вот мой CSS-код, но он не работает:

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

Есть какие-то мысли или идеи? Может быть, селектор просто изменился, ведь с момента публикации прошло уже более двух лет? @SaraDev, похоже, это вы писали этот код. Не могли бы вы подсказать, в чём дело?

[manuel (Manuel Kostka)]

Да, это, кажется, не актуально. Я полагаю, что текущие объявления выглядят так:

@Discourse

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

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

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

Это означает, что вы не можете адресовать карточки пользователей-администраторов или модераторов, так как эти группы не могут быть назначены в качестве основных. Если вы проверите карточки пользователей-администраторов здесь, на meta, то увидите, что селектор класса — group-team.

[SaraDev (Sara Devlaeminck)]

@Черепаха

Я пытаюсь сделать так, чтобы у администраторов везде на сайте были синие имена пользователей.

@manuel

На мой взгляд, текущие объявления выглядят так:

@Discourse

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

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

Также стоит отметить, что в качестве селектора класса указывается только основная группа пользователя. Если у пользователя нет основной группы, селектор класса будет group-null.

Могу подтвердить, что это верно и в настоящее время является лучшим способом настройки внешнего вида карточки пользователя в зависимости от группы или конкретного имени пользователя.

Спасибо @manuel и @Turtle за то, что обратили на это внимание.

Я также обновил руководство здесь, включив эту информацию.

[Turtle]

Хорошо, но что, если я хочу изменить цвет имени пользователя на карточке? Что мне добавить? Извините, я мало знаю о селекторах CSS.

[SaraDev (Sara Devlaeminck)]

@Turtle

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

Для такой настройки используйте следующий CSS:

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

Это изменит цвет элемента username на карточках пользователей всех участников сайта.

Пример:

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

[jrgong]

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

Мы просто добавили ту же тень к изображению аватара в карточке пользователя, и это помогло

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