커스텀 아바타, 게시물, 멘션으로 스태프 사용자를 더 쉽게 식별하기

문서 사이트 관리
, ,
1

스태프 사용자를 다른 사용자가 즉시 알아볼 수 있도록 하는 다양한 방법이 있습니다.

모더레이터 방패 표시

모더레이터이거나 그리고 관리자인 모든 스태프 사용자의 사용자 이름 옆에 모더레이터 방패가 표시됩니다.

image
image444×209 12.3 KB

:left_speech_bubble: 팁: 스태프 사용자가 관리자 역할은 있지만 모더레이터 역할이 없는 경우 방패가 표시되지 않습니다.

방패 색상을 변경하는 CSS

모든 스태프 사용자의 색상 변경 
/*모든 스태프 사용자의 색상 변경*/
span.username.staff .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

image
image428×285 16.8 KB

토픽 내에서만 아니라 방패가 나타나는 모든 위치에서 방패 색상을 변경하려면:

span.username.staff .d-icon.d-icon-shield-halved,
.user-card .first-row .names .d-icon.d-icon-shield-halved,
.user-profile-names .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}
ADMIN 사용자와 MOD 사용자를 구별하여 색상 변경 
/*ADMIN 사용자와 MOD 사용자를 구별하여 색상 변경*/
span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: green;
  }

  &.admin .d-icon.d-icon-shield-halved {
    color: red;
  }
}

image
image425×253 15 KB

방패를 숨기는 CSS

포스트에서만 방패 숨기기 
.names .svg-icon-title {
    display: none;
}
포스트와 사용자 카드에서 방패 숨기기 
.names .svg-icon-title, 
.user-card .names .d-icon.d-icon-shield-halved {
  display: none;
}

제목 추가

모든 스태프 사용자는 /admin/users/list/staff에 액세스하여 자신의 계정에 대한 제목을 생성할 수 있습니다. 이 제목은 스태프 사용자의 사용자 이름 옆에 표시됩니다:

image
image930×124 9.34 KB

예를 들어 다음과 같습니다:

image
image679×572 41.1 KB

기존 제목을 사용자 지정하는 CSS

스태프 구성원의 제목 사용자 지정 
.names .staff ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
}

image
image707×573 41.3 KB

관리자와 모더레이터를 구별하여 제목 사용자 지정 
.names {
  .moderator ~ .user-title {
    background: green;
    color: white;
    padding: 3px 5px;
  }

  .admin ~ .user-title {
    background: red;
    color: white;
    padding: 3px 5px;
  }
}

image
image466×311 16.8 KB

:left_speech_bubble: 팁: 귀하의 조직의 스태프 사용자는 실제 사이트 관리자나 모더레이터일 필요가 없습니다. 특별한 권한이 없는 단순한 멤버일 수도 있습니다. 그들의 제목을 사용자 지정하려면 새로운 사용자 정의 그룹을 생성하고, 이를 기본으로 구성하고, 필요한 사용자를 추가하면 됩니다. 기본적으로 모든 멤버에게 할당되는 자동 제목을 설정하는 것도 가능합니다.

기본 사용자 정의 그룹에 속하는 관리자 및 모더레이터가 아닌 사용자의 제목 사용자 지정

YOUR-CUSTOM-GROUP을 그룹 이름으로 변경하십시오. 아래 예시에서는 .group--community ~ .user-title 등입니다.

image
image284×262 3.11 KB

.group--YOUR-CUSTOM-GROUP ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
  }

image
image480×526 27.8 KB

사용자가 할당된 제목과 다른 제목을 사용자 프로필에서 선택할 수 있다는 점을 기억하십시오. 이 경우 포스트의 제목은 사용자가 선택한 제목이 되며, "없음"으로 설정하는 것도 가능합니다. 이 경우 제목이 표시되지 않습니다.

이를 방지하려면 사용자 측에서 편집할 수 없도록 처음부터 사용자 정의 제목을 생성할 수 있습니다.

처음부터 사용자 정의 제목을 생성하는 CSS

예시:

image

사용자 이름 뒤에 제목을 생성하는 팁 
/*모든 STAFF 사용자의 사용자 이름 뒤에 사용자 정의 제목 표시
사이트 설정 "ux에서 사용자 이름 우선"이 비활성화되면 표시되지 않습니다 */
.username.staff::after {
    content: 'Staff user';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*선택 사항 - 사용자 카드에서 크기 축소*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*선택 사항 - 포스트에서만 모더레이터 방패 숨기기*/
.names .svg-icon-title {
    display:none;
}

image

/*ADMIN 사용자와 MOD 사용자를 구별하여 사용자 이름 뒤에 사용자 정의 제목 표시
사이트 설정 "ux에서 사용자 이름 우선"이 비활성화되면 표시되지 않습니다 */
.username {
  &.admin:after {
    content: 'Admin user' !important;
    color: red !important;
    border: 1px solid red !important;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }

  &.moderator:after {
    content: 'Moderator user';
    color: green;
    border: 1px solid green;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }
}

/*선택 사항 - 포스트에서만 아이콘 방패 숨기기*/
.names .svg-icon-title {
  display: none;
}

image
image518×308 18.6 KB

이름 뒤에 제목을 생성하는 팁 
/*모든 STAFF 구성원의 전체 이름 뒤에 사용자 정의 제목 표시*/
span.staff :after {
  content: "Staff";
    color: white;
    background-color: #00A9DB;
    border-radius: 8px;
    margin-left:5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
}

image

/*ADMIN 사용자와 MOD 사용자를 구별하여 전체 이름 뒤에 사용자 정의 제목 표시 */
span {
  &.admin :after {
    content: "Admin" !important; 
    color: white;
    background-color: red !important;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }

  &.moderator :after {
    content: "Moderator";
    color: white;
    background-color: green;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }
}

image
image518×295 18.4 KB

질문: 두 가지 사용자 정의 제목을 모두 추가할 수 있나요?

네, 가능합니다. 다만 중복됩니다. 아래 예시를 참조하십시오:

.username.staff::after {
    content: 'Staff user';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*선택 사항 - 사용자 카드에서 크기 축소*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*선택 사항 - 모더레이터 방패 숨기기*/
.names .svg-icon-title {
    display:none;
}


span {
  &.admin :after {
    content: "Admin" !important; 
    color: white;
    background-color: red !important;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }

  &.moderator :after {
    content: "Moderator";
    color: white;
    background-color: green;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }
}

image
image587×326 19.7 KB

아바타 플레어 추가

스태프 사용자의 아바타 오른쪽 아래에 플레어를 추가할 수 있습니다:

image
image395×293 16 KB

사용자 정의 그룹을 생성하고 스태프 사용자를 멤버로 추가한 후 그룹을 기본으로 설정해야 합니다. 자세한 내용은 Add group flair on member avatars 을 참조하십시오.

아이콘 대신 사용자 정의 이미지를 추가하려면 이미지를 웹사이트에 업로드하고 원격 테마 및 구성 요소에 자산 포함 섹션 가이드에 설명된 대로 URL을 사용하면 됩니다. 테마의 업로드 섹션에 이미지를 추가하면 이미지의 변수와 직접 링크가 표시됩니다. 직접 링크를 마우스 오른쪽 버튼으로 클릭하여 링크를 복사한 후 아바타 플레어 이미지 필드에 붙여넣으십시오.

스태프 이름 및 사용자 이름 사용자 지정

CSS를 조금만 사용하여 포스트의 스태프 사용자 이름을 사용자 지정할 수 있습니다.

아래에 표시된 내용은 예시일 뿐이며, 각자 원하는 대로 스타일을 수정할 수 있습니다!

사용자 이름 색상 변경

기본적으로 사용자 이름은 전체 이름 앞에 표시됩니다.

모든 스태프 사용자의 사용자 이름 색상 변경 
span.username.staff a {
      color: #00A9DB;
}

image
image391×250 14.8 KB
관리자와 모더레이터를 구별하여 사용자 이름 색상 변경 
span.username {
  &.moderator {
    a {
      color: green;
    }
  }

  &.admin {
    a {
      color: red;
    }
  }
}

image
image391×254 14.9 KB

이 변형은 (거의) 사용자 정의 제목에 사용된 것과 동일한 CSS를 사용합니다.

span.username {
  &.moderator {
    a {
        color: white;
        background-color: green;
        border-radius: 8px;
        margin-left: 5px;
        padding-left: 4px;
        padding-right: 4px;
    }
  }

  &.admin {
    a {
        color: white;
        background-color: red;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
    }
  }
}

image
image400×248 15 KB

이름 색상 변경

전체 이름이 사용자 이름 앞에 나타나도록 하려면 사이트 설정 display name on posts를 활성화하고 prioritize username in ux를 비활성화하십시오.

모든 스태프 사용자의 이름 색상 변경 
.names span.staff a {
   color: #00A9DB;
}

image
image397×252 15.3 KB

이 변형은 (거의) 사용자 정의 제목에 사용된 것과 동일한 CSS를 사용합니다.

.names span.staff a {
    color: #00A9DB;
    background-color: #D3F5FF; /*밝은 색상 사용*/
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
}

image
image416×265 16.1 KB

관리자와 모더레이터를 구별하여 이름 색상 변경 
.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

  &.admin {
    a, i {
      color: red;
    }
  }
}

image
image408×251 14.9 KB

이 변형은 (거의) 사용자 정의 제목에 사용된 것과 동일한 CSS를 사용합니다.

.names span {
  &.moderator {
    a {
        color: green;
        border: 1px solid green;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 5px;
    }
  }

  &.admin {
    a {
        color: red;
        border: 1px solid red;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 5px;
    }
  }
}

image
image406×259 15.9 KB

:left_speech_bubble: 팁: 특정 이유(예: 사이트 창립자나 특히 가치 있는 멤버)로 단일 스태프 구성원을 사용자 지정하고 싶을 수 있습니다. 단일 사용자를 대상으로 하는 방법에 대한 예시는 다음과 같습니다. - 그리고 네, 동일한 방법은 스태프가 아닌 모든 사용자에게도 사용할 수 있습니다.

사용자 이름 
/*USERNAME을 해당 사용자의 사용자 이름으로 변경*/
.topic-meta-data .names span.username a[data-user-card=USERNAME] {
  color: blue;
}

image

이름 
/*USERNAME을 해당 사용자의 이름으로 변경*/
.topic-meta-data .full-name a[data-user-card=USERNAME] {
  color: blue;
}

image

이름과 사용자 이름 모두 
.topic-meta-data .names span a[data-user-card=USERNAME] {
    color: blue;
}

image

스태프 포스트 배경 사용자 지정

스태프 사용자는 포스트의 Add Staff Color 버튼을 사용하여 수동으로 스태프 색상을 추가할 수 있습니다.

image
image179×302 4.04 KB

그리고 결과는 다음과 같습니다:

image
image793×208 10.5 KB

포스트 전체에 배경 색상 추가

CSS 몇 줄을 추가하면 Add Staff Color 버튼을 클릭할 때 포스트 전체에 배경 색상을 적용할 수 있습니다.

.moderator {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
    background: #ffffd0; /*여기서 색상 변경*/
  }
}

image
image802×300 15.5 KB

이 기능을 자동화하고 CSS를 사용하여 스태프 사용자가 작성한 모든 포스트를 다양한 방식으로 사용자 지정할 수 있습니다. 이를 수행하려면 위에서 설명한 대로 기본 사용자 정의 그룹을 생성해야 합니다. Flair 장을 참조하십시오. 스태프 구성원이 기본 그룹에 있으면 CSS로 그들의 포스트를 대상으로 할 수 있습니다.

:left_speech_bubble: 팁: 그룹에 모든 스태프 구성원을 추가하거나 관리자만 또는 모더레이터만 추가하도록 결정할 수 있습니다. 관리자와 모더레이터에 대해 두 개의 다른 기본 그룹을 생성할 수도 있습니다(참고: "admins"와 "moderators"는 자동 그룹에 이미 사용된 이름이므로 두 가지 다른 이름을 사용해야 합니다) 그리고 CSS를 설정하여 관리자 포스트와 모더레이터 포스트를 구별할 수 있습니다.

모든 스태프 사용자의 포스트 배경 자동 변경 

/*GROUP-NAME을 그룹 이름으로 변경*/
.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*여기서 색상 변경*/
}

image
image776×298 20.7 KB

또는

.topic-post.group-GROUP-NAME .topic-body { 
    background-color: #ffffd0; /*여기서 색상 변경*/
}

image
image781×253 14 KB

또는 심지어

/*GROUP-NAME을 그룹 이름으로 변경*/

.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*여기서 색상 변경*/
}

.topic-post.group-GROUP-NAME .names span { 
    background-color: #ffffd0; /*여기서 색상 변경*/
}

image
image783×215 13.7 KB

모든 스태프 사용자의 포스트 글꼴 색상 및 글꼴 패밀리 자동 변경 
/*GROUPNAME을 그룹 이름으로 변경*/
.topic-post.group-GROUPNAME .topic-body .cooked { 
    color: #fec601; /*여기서 글꼴 색상 변경*/
    font-family: ......; /* 여기에서 글꼴 패밀리 변경 */
}
첫 번째 포스트가 아닌 스태프의 답변 배경만 자동 변경

토픽의 각 포스트에는 post_number 형식의 ID가 있습니다. 토픽의 첫 번째 포스트의 ID는 post_1이며, 답변에는 post_2, post_3과 같은 ID가 있습니다.

첫 번째 포스트를 제외한 모든 스태프 포스트에 배경을 추가하려면:

/*GROUP-NAME을 그룹 이름으로 변경*/
.topic-post.group-GROUPNAME .onscreen-post:not(#post_1) .topic-body .cooked { 
    background-color: #ffffd0; /*여기서 색상 변경*/
}

image
image1270×1000 95.2 KB

스태프 포스트에 추가 콘텐츠 추가

간단한 서명 
.topic-post.group-GROUP-NAME .topic-body .cooked::after {
    content: "From your friendly staff";
    font-size: small;
    color: #d29400;
    float:right;
    font-style: italic;
}

image
image802×173 13.2 KB

간단한 로고 
.topic-post.group-GROUP-NAME .topic-body .cooked::after {
    background-image: url("IMAGE-URL");
    background-repeat: no-repeat;
    background-size: 138px 36px; /*이미지 크기에 따라 이 값 변경*/
    width: 138px; /*이미지 크기에 따라 이 값 변경*/
    height: 36px; /*이미지 크기에 따라 이 값 변경*/
    display: block;
    float: right;
    content: "";
}

image
image785×196 17.3 KB

멘션 색상 사용자 지정

참조: Customize mention colors

58개의 좋아요
How to make it obvious who is staff?
Can I display a Font Awesome class icon next to a user Title?
How to add a symbol next to someone’s name
Make Staff Responses More Visible
Help "sorting" my users
Using CSS to hide specific elements based on user role
Nick or name customize, colorful and icon, how to do it?
Staff color by default for group members
Admin / Mod post in different color
Adjust user titles to look like “team” or “Tester” above
CSS username colors only working for admin/moderators?
Create custom badges for admin moderator or employee group
Update our admins and moderator shields
The /about page does not display moderators that are also administrators
Flair image and Admin Icon next to my username not visible
Trust Level Permissions Reference
Icons and text next to the user info
Resources for using Discourse in the classroom
Please update 'Understanding Discourse Trust Levels' — or is there a different doc?
As admin I want to be able to change usernames, regardless of filters
Custom Icons for admins and moderators (and other groups)
Avatar flair image not visible for 'Staff' Group
Shield icon for Admins (in discussion threads)
Post Logo doesn't show up
How to display the shield icon on topics and on the admin profile to all members
Customize mention colors