Trust levels order exhibition in the badges page

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?

3 Likes

It is listed in alphabetical order

4 Likes

You can do it with CSS, for example

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

Because of how the badge page layout is currently built (flexbox), you might also need to adjust some margins at different screen widths if you change the order.

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

The need to fuss with the margins will go away later this year once we drop IE11 support (because we can then build the layout with grid instead of flexbox).

7 Likes

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

1 Like

You can add custom CSS under admin > customize > themes, the easiest way to find the relevant CSS classes is to right click an element on the page you want to edit and inspect it in your browser.

Otherwise you have to dig through Discourse’s source for reference (note, you can’t directly edit Discourse’s CSS… you have to override what you need in a theme) The badge page CSS is in this file discourse/user-badges.scss at master · discourse/discourse · GitHub

1 Like