# 更改默认徽章颜色（青铜、银色、金色）

**URL:** https://meta.discourse.org/t/change-default-badge-colors-bronze-silver-gold/273245
**Category:** Development
**Tags:** badges
**Created:** [2023年七月29日 19:26 UTC](https://meta.discourse.org/t/change-default-badge-colors-bronze-silver-gold/273245 "2023-07-29T19:26:48Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![discoursejl](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@discoursejl](https://meta.discourse.org/u/discoursejl)
#### Post date: [2023年七月29日 19:26 UTC](https://meta.discourse.org/t/change-default-badge-colors-bronze-silver-gold/273245/1 "2023-07-29T19:26:48Z")

</div>

可以将徽章的颜色从金色、银色和青铜色更改为更符合我们主题颜色的 3 种颜色吗？希望更改它们以更好地匹配。

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2023年七月29日 20:22 UTC](https://meta.discourse.org/t/change-default-badge-colors-bronze-silver-gold/273245/2 "2023-07-29T20:22:27Z")

</div>

我不是 CSS 专家，但这是我的解决方案……只需从下方更改颜色，以更好地匹配您的主题颜色。我还建议阅读此主题，它过去对我非常有帮助，因为它帮助我学会了为我的网站做很酷的事情。

> [@Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101):
>
> bookmark This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. person_raising_hand Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…

* * *

Bronze

```css
.badge-card .badge-contents .badge-icon.badge-type-bronze .fa {
    color: #cd7f32 !important;
}

```

Silver

```css
.badge-card .badge-contents .badge-icon.badge-type-silver .fa {
    color: silver !important;
}

```

Gold

```css
.badge-card .badge-contents .badge-icon.badge-type-gold .fa {
    color: #e7c300 !important;
}

```

---

<div class="post-metadata">

### Author: ![discoursejl](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@discoursejl](https://meta.discourse.org/u/discoursejl)
#### Post date: [2023年七月30日 03:19 UTC](https://meta.discourse.org/t/change-default-badge-colors-bronze-silver-gold/273245/4 "2023-07-30T03:19:01Z")

</div>

太棒了。非常感谢！

---

<div class="post-metadata">

### Author: ![discoursejl](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@discoursejl](https://meta.discourse.org/u/discoursejl)
#### Post date: [2023年七月30日 03:20 UTC](https://meta.discourse.org/t/change-default-badge-colors-bronze-silver-gold/273245/5 "2023-07-30T03:20:17Z")

</div>

你只是用检查来查找东西吗？我都改好了，但现在正在尝试处理用户卡上显示的内容。Chrome 检查是找出事物名称的方法吗？

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2023年七月30日 09:18 UTC](https://meta.discourse.org/t/change-default-badge-colors-bronze-silver-gold/273245/6 "2023-07-30T09:18:32Z")

</div>

是的，只需检查元素即可找到您需要进行自定义的类。我也觉得[styleguide](https://meta.discourse.org/t/styleguide-plugin-now-in-discourse-core/167293)很有帮助。

---

<div class="post-metadata">

### Author: ![discoursejl](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@discoursejl](https://meta.discourse.org/u/discoursejl)
#### Post date: [2023年七月30日 12:06 UTC](https://meta.discourse.org/t/change-default-badge-colors-bronze-silver-gold/273245/7 "2023-07-30T12:06:02Z")

</div>

太棒了！那个风格指南是关键。它确实帮助我在发布前调整了所有样式。你知道可以从那里访问管理部分吗？我没找到。唯一需要解决的是用户按信任级别的颜色。我尝试检查但没有任何东西能改变这个小小的青铜色容器。这是最后的任务，我决心今天完成它，哈哈

 ![Screenshot 2023-07-30 at 8.02.18 AM](https://global.discourse-cdn.com/meta/original/4X/9/4/b/94b00298dd3b2eda39125ea744ea5ebdd0eba8a6.png)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年七月31日 02:50 UTC](https://meta.discourse.org/t/change-default-badge-colors-bronze-silver-gold/273245/8 "2023-07-31T02:50:19Z")

</div>

那在管理员仪表板中，普通用户反正也看不到。但这是你要的：

TL 1：

```plaintext
.user-metrics .table-cell.user-basic {
    background: [在此处插入颜色代码或变量];
}

```

TL 2：

```plaintext
.user-metrics .table-cell.user-member {
    background: [在此处插入颜色代码或变量];
}

```

TL 3：

```plaintext
.user-metrics .table-cell.user-regular {
    background: [在此处插入颜色代码或变量];
}

```

TL 4：

```plaintext
.user-metrics .table-cell.user-leader {
    background: [在此处插入颜色代码或变量];
}

```

---

<div class="post-metadata">

### Author: ![discoursejl](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@discoursejl](https://meta.discourse.org/u/discoursejl)
#### Post date: [2023年七月31日 12:41 UTC](https://meta.discourse.org/t/change-default-badge-colors-bronze-silver-gold/273245/9 "2023-07-31T12:41:09Z")

</div>

太棒了。我的强迫症非常感谢您！！！ 😂
