自定义用户卡片

[Discourse]

本指南介绍如何自定义 Discourse 上用户卡片的显示方式，包括添加自定义字段和隐藏用户个人资料。

所需用户级别：管理员

通过 CSS 自定义用户卡片，您可以个性化显示的外观和信息。

自定义用户卡片

用户卡片 可以通过 CSS 进行自定义。以下是一些可用的 CSS 自定义示例：

更改背景颜色

要更改用户卡片的背景颜色：

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

在用户卡片周围添加边框

要在用户卡片周围添加边框：

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

更改用户名的字体和颜色

要更改用户卡片上用户名的字体和颜色：

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

隐藏特定元素

要隐藏某些元素，例如用户的地点或加入日期：

.user-card .map-location,
.user-card .user-info .join-date {
    display: none;
}

基于用户组或特定用户的自定义外观

要为特定用户组或用户自定义用户卡片外观：

/* 为特定用户组自定义 */
.user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* 为特定用户名自定义 */
.user-card.user-card-Username {
    background-color: #FFD700;
}

只有用户的首要用户组才会被设置为类选择器。当用户没有首要用户组时，类选择器为 group-null。

自定义用户字段

此外，您可以通过以下步骤将自定义用户字段添加到用户卡片：

1. 导航到 /admin/customize/user_fields 页面。
2. 为您想在用户卡片上显示的字段选中“Show on user card?”（显示在用户卡片上？）复选框。

隐藏所有用户个人资料

如果您需要向公众隐藏用户个人资料，可以使用以下站点设置：

• hide user profiles from public（向公众隐藏用户个人资料）：为匿名用户禁用用户卡片、用户个人资料和用户目录。

其他自定义

可以通过主题组件进行其他自定义，例如：

• 个人资料上的可点击社交图标链接
• 用户卡片目录
• “最后在线时间”用户卡片

[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

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

此外，只有用户的首要群组被设置为类选择器。当用户没有首要群组时，类选择器为 group-null。

这意味着您无法定位管理员或版主的用户名卡片，因为这些群组无法设置为首要群组。如果您在此元论坛上检查管理员的用户名卡片，您会看到类选择器是 group-team。

[SaraDev (Sara Devlaeminck)]

@Turtle

我想让管理员在网站的任何地方都拥有蓝色用户名的显示

@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);
}