自定义用户卡片

[Discourse]

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

所需用户等级：管理员

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

自定义用户卡片

用户卡片 可以通过 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. 为要在用户卡片上显示的字段选中“在用户卡片上显示？”复选框。

隐藏所有用户资料

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

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