Differentiate Admin and Moderator Shield Icons

Given the surprising level of difficulty, maybe we should just leave this be.. not like it is broken the way it is.

1개의 좋아요

늦은 시간인 걸 알지만, CSS와 JS를 kullanarak 관리자 크라운(현재는 주제 페이지에서만)을 표시하는 제 해결책을 공유하고 싶어요. 그런데 왜 그런 건지 제 JS 코드가 작동하지 않아서 도움이 필요해요. 인라인 테마 JS 파일에는 보이지만 여전히 작동하지 않아요 (jsfiddle에서는 잘 작동하긴 해요).

CSS

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;

}

JS (호버 시 제목을 표시하기 위한 코드 - 하지만 말했듯이 안에 포함하면 작동하지 않아요)
작동하는 Jsfiddle 데모

var cdcrowntitle = document.querySelector(".names .admin a");
cdcrowntitle.setAttribute("title", "Community Admin");
2개의 좋아요

모더레이터 중 한 명에게도 동일한 피드백을 받았습니다. 지난 2년간 관리자/모더레이터 아이콘을 구분하는 데 진전이 있거나 아이디어가 있었나요?

1개의 좋아요

이 토픽에서 어디에도 보지 못했지만, 저는 포럼에서 CSS를 사용해 게시글의 모더레이터와 관리자(관리자가 모더레이터 그룹에 속하는 경우)의 방패 아이콘 색상을 다르게 설정하고 있습니다. 제 경우를 들어, 모더레이터는 금색 방패를, 관리자는 회색 방패를 사용합니다. 물론 해당 색상 속성에는 어떤 색상을 사용해도 됩니다.

공통 CSS

// * 게시글에서 관리자 및 모더레이터 사용자의 방패 색상 변경 * //

span.username {
  &.moderator .d-icon.d-icon-shield-alt {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-alt {
    color: #969696;
  }
} 

사용자 카드나 프로필에는 아직 적용하지 않았지만, 방법을 찾아낼 수 있을 것 같습니다.

게시글에서 관리자 및 모더레이터의 사용자 이름을 더 명확히 구분하기 위해 색상도 변경할 수 있습니다:

// * 관리자 및 모더레이터의 사용자 이름 색상 변경 * //

span.username {
  &.moderator a {
    color: #d5b907;
  }
  &.admin a {
    color: #969696;
  }
} 
6개의 좋아요

방패 색상 변경이 작동하지 않았습니다. 둘 다 여전히 같은 회색으로 보입니다. 이 글이 올라온 이후 셀렉터가 변경되었나요?

가능합니다. 페이지를 빠르게 검사하면 클래스를 확인할 수 있습니다.

2개의 좋아요

아이콘의 이름이 이제 d-icon-shield-halved입니다.

5개의 좋아요

네, 아이콘 이름이 변경되었기 때문에 이렇게 되어야 합니다

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

결과

4개의 좋아요

릴리, 고마워! 그리고… 코코쿼크, 그걸 어떻게 철자하는 건지 모르겠는데.

1개의 좋아요

혹시 관리자 아이콘을 마법사 모자로 교체한다면, 색상을 display none으로 바꾸고 .d-icon.d-icon-wizard 라인을 하나 추가하는 방식이 될까요? (마법사 모자의 fa 클래스 이름을 바로 떠올리지 못하겠습니다)

fa는 다음과 같습니다:
fa-solid fa-hat-wizard
그렇다면 CSS는 어떻게 되어야 할까요? 관리자 아이콘을 hat-wizard로 변경하고 싶다면요?

1개의 좋아요

같은 CSS입니다.
이 교체 방법을 사용하는 경우, 어떤 아이콘으로 교체하든 클래스는 여전히 d-icon-shalved-halved가 됩니다.

2개의 좋아요

이 작업을 수행하는 가장 쉬운 방법은 위와 동일한 코드를 사용하는 것입니다. 또한 head 태그 탭에 다음과 같은 아이콘 교체 코드를 추가해야 합니다:

<script type="text/discourse-plugin" version="0.8"> 
  
  api.replaceIcon('shield-halved', 'hat-wizard')

</script>

결과:

5개의 좋아요

관리자는 모자, модератор는 방패를 사용할 수 있도록 작동할까요? 아니면 사진에서처럼 모든 것이 대체되는 건가요? 만약 후자라면 우회 방법이 있을까요?

2개의 좋아요

음, 조건부 CSS를 해킹하거나 해당 스크립트의 코드를 수정할 수 있을지도 모릅니다. 하지만 그건 모든 아이콘을 대체하는 방법입니다.

1개의 좋아요

실제로는 마법사 아이콘도 현재 제대로 작동하지 않습니다. 헤드 부분에 주신 코드를 그대로 사용했습니다. 다시 시도해 볼게요. 일시적인 오류나 그런 건지 모르겠거든요.

SVG icon subset 사이트 설정에 마법사 모자 아이콘을 추가하셨나요?

1개의 좋아요

오프토픽 질문이지만, 저는 모더레이터에게는 halfshield를 유지하고 싶습니다. 하지만 어드민에게는 마법사 모자를 표시하고 싶은데… [저희 포럼에는 중년 여성 회원들이 몇 분 계시고, 그분들은 해리 포터 팬이십니다. 모자를 못 보시면 정말 서운해하실 텐데 :joy:]

하지만 모더레이터 문제 때문에 halfshield를 모자로 대체할 수는 없어요.

아, 정말…

정말 주제에 대한 글을 더 읽어야 했네요 :man_facepalming: 죄송합니다.

2개의 좋아요

제 포럼에서는 유저 카드와 프로필에만 표시되고, 토픽에는 표시되지 않아요.

이번에는 뭘 잘못한 걸까요?

1개의 좋아요

수정된 코드용 Shield svg.