徽章页面中的信任等级排序展览

[jenni_alencar (Jennifer Alencar Araujo)]

I changed the name of my trust levels, but it changed the order shown on the badges page, for example, trust level 1 is being displayed after trust level 2, is there a way to change that?

BetaUser should be showing up before BetaTester, how can I do it?

[AndreSpecker (Andre Tiago)]

It is listed in alphabetical order

[awesomerobot (Kris)]

您可以使用 CSS 来实现，例如：

.badge-card.betauser {
    order: -1;
}

由于当前的徽章页面布局是基于 Flexbox 构建的，如果您更改了顺序，可能还需要在不同屏幕宽度下调整一些边距。

.badge-card.betauser {
    order: -1;
  @media screen and (max-width: 850px) {
    margin-right: 1.63%
  }
}

.badge-card.betatester {
  @media screen and (max-width: 850px) {
    margin-right: 0;
  }
}

今年晚些时候，当我们停止支持 IE11 后，就不再需要调整边距了（因为届时我们可以使用 Grid 而不是 Flexbox 来构建布局）。

[jenni_alencar (Jennifer Alencar Araujo)]

Where can I find the CSS of the badges? Can you show the path to me? Thank you

[awesomerobot (Kris)]

您可以在 管理 > 自定义 > 主题 下添加自定义 CSS。找到相关 CSS 类最简单的方法是：右键点击您想要编辑的页面元素，然后在浏览器中检查它。

否则，您必须深入浏览 Discourse 的源代码以参考（注意：您无法直接编辑 Discourse 的 CSS……您需要在主题中覆盖所需的部分）。徽章页面的 CSS 位于此文件中：discourse/app/assets/stylesheets/common/base/user-badges.scss at main · discourse/discourse · GitHub