Trust levels order exhibition in the badges page

Support
1

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?

image
image700Ă—189 10.4 KB

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

3 Likes
2

It is listed in alphabetical order

4 Likes
3

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
4

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

1 Like
5

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 https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/common/base/user-badges.scss

2 Likes
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.