Порядок отображения уровней доверия на странице значков

Поддержка
1

Я изменил названия уровней доверия, но это изменило порядок отображения на странице значков. Например, уровень доверия 1 отображается после уровня доверия 2. Можно ли это исправить?

image
image700×189 10.4 KB

BetaUser должен отображаться раньше BetaTester. Как это сделать?

2

Он расположен в алфавитном порядке

3

Вы можете сделать это с помощью 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 для построения разметки).

4

Где я могу найти CSS для бейджей? Можете показать мне путь? Спасибо.

5

Вы можете добавить пользовательский CSS в разделе «Администрирование > Настройка > Темы». Самый простой способ найти нужные CSS-классы — щёлкнуть правой кнопкой мыши по элементу на странице, которую вы хотите изменить, и открыть инструменты разработчика в браузере.

В противном случае вам придётся искать информацию в исходном коде Discourse (обратите внимание: напрямую редактировать CSS Discourse нельзя… вы можете переопределять только то, что необходимо, в рамках темы). CSS для страницы наград находится в этом файле: discourse/app/assets/stylesheets/common/base/user-badges.scss at main · discourse/discourse · GitHub