배지 페이지에서 신뢰도 수준 순으로 전시

제품 지원
1

신뢰 등급 이름을 변경했는데, 배지 페이지에 표시되는 순서가 바뀌었어요. 예를 들어, 신뢰 등급 1이 신뢰 등급 2 뒤에 표시됩니다. 이 순서를 변경할 수 있는 방법이 있을까요?

image
image700×189 10.4 KB

BetaUser가 BetaTester보다 앞에 표시되어야 하는데, 어떻게 해야 하나요?

2

알파벳 순서로 나열되어 있습니다

3

CSS를 사용하여 다음과 같이 처리할 수 있습니다.

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

현재 배지 페이지 레이아웃이 flexbox로 구성되어 있기 때문에, 순서를 변경하면 화면 폭에 따라 일부 여백(margin)을 조정해야 할 수도 있습니다.

.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 지원이 종료되면(그때부터는 flexbox 대신 grid로 레이아웃을 구성할 수 있기 때문에) 여백을 세심하게 조정해야 하는 번거로움은 사라질 것입니다.

4

배지(badge)의 CSS를 어디서 찾을 수 있나요? 경로를 알려주실 수 있을까요? 감사합니다.

5

admin > customize > themes에서 사용자 지정 CSS를 추가할 수 있습니다. 편집하려는 페이지의 요소를 마우스 오른쪽 버튼으로 클릭하여 브라우저에서 검사하는 것이 관련 CSS 클래스를 찾는 가장 쉬운 방법입니다.

그렇지 않은 경우, Discourse 소스를 참고해야 합니다(참고: Discourse의 CSS를 직접 편집할 수 없으며, 필요한 부분을 테마에서 오버라이드해야 합니다). 배지 페이지의 CSS는 이 파일에 있습니다: discourse/app/assets/stylesheets/common/base/user-badges.scss at main · discourse/discourse · GitHub