사용자 카드 사용자 지정

[Discourse]

이 가이드는 Discourse에서 사용자 카드가 표시되는지 여부 및 표시 방식을 사용자 정의하는 방법에 대해 설명하며, 사용자 정의 필드 추가 및 사용자 프로필 숨김을 포함합니다.

필요한 사용자 권한: 관리자

CSS를 사용하여 사용자 카드를 사용자 정의하면 외관과 표시되는 정보를 개인화할 수 있습니다.

사용자 카드 사용자 정의

사용자 카드는 CSS를 통해 사용자 정의할 수 있습니다. 사용할 수 있는 CSS 사용자 정의 예시입니다:

배경색 변경

사용자 카드의 배경색을 변경하려면:

.user-card {
    background-color: #f0f0f0;
}

사용자 카드 테두리 추가

사용자 카드 주위에 테두리를 추가하려면:

.user-card {
    border: 2px solid #4CAF50;
    border-radius: 10px;
}

사용자 이름의 글꼴 및 색상 변경

사용자 카드에 표시되는 기본 이름/사용자 이름의 글꼴과 색상을 변경하려면:

.user-card .name-username-wrapper {
    font-family: 'Arial', sans-serif;
    color: #FF5733;
}

특정 요소 숨기기

사용자의 위치나 가입 날짜와 같은 특정 요소를 숨기려면:

.user-card .location,
.user-card .metadata__user-created {
    display: none;
}

사용자 그룹 또는 특정 사용자를 기반으로 외관 사용자 정의

특정 사용자 그룹 또는 사용자를 위한 사용자 카드 외관을 사용자 정의하려면:

/* 특정 사용자 그룹에 대해 사용자 정의 */
.user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* 특정 사용자 이름에 대해 사용자 정의 */
.user-card.user-card-Username {
    background-color: #FFD700;
}

사용자 카드 클래스 선택자로 설정되는 것은 사용자의 기본 그룹뿐입니다. 사용자가 기본 그룹이 없는 경우, 클래스 선택자는 group-null이 됩니다.

사용자 정의 필드

추가로, 다음 단계를 수행하여 사용자 카드에 사용자 정의 필드를 추가할 수 있습니다:

1. /admin/config/user-fields 페이지로 이동합니다.
2. 사용자 카드에 표시할 필드에 대해 Show on user card? 확인란을 선택합니다.

모든 사용자 프로필 숨기기

사용자 프로필을 공개에서 숨겨야 하는 경우, 다음 사이트 설정을 사용할 수 있습니다:

• hide user profiles from public: 익명 사용자의 경우 사용자 카드, 사용자 프로필 및 사용자 디렉토리를 비활성화합니다.

기타 사용자 정의

테마 구성 요소를 통해 다음과 같은 기타 사용자 정의를 수행할 수 있습니다:

• 프로필의 클릭 가능한 소셜 아이콘 링크
• 사용자 카드 디렉토리
• “마지막 접속” 사용자 카드

[Mason_L]

@Discourse

.user-card[data-user-card="specific_username"] {
    background-color: #FFD700;
}

이 부분은 작동하지 않습니다.
‘user-card’ 클래스 아래에 'data-user-card’가 없습니다.

[Turtle]

관리자 사용자의 닉네임이 사이트 전체에서 파란색으로 표시되게 하려고 시도 중인데, 사이트 전체의 닉네임을 선택할 수 있는 선택자가 있는지 확실하지 않아요. 현재 작성한 CSS는 다음과 같은데, 동작하지 않습니다.

.group-admins .user-card .username {
    color: #2596be;
}

어떤 생각이나 아이디어가 있으신가요? 이 글이 게시된 지 2년이 넘었으니 선택자가 바뀌었을까요? @SaraDev 이 글을 작성하신 분으로 보이는데, 무슨 문제가 있는지 아실까요?

[manuel (Manuel Kostka)]

네, 이 내용은 최신이 아닌 것 같습니다. 현재 선언은 다음과 같을 것입니다:

@Discourse

/* 특정 사용자 그룹을 위한 사용자 지정 */
user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* 특정 사용자 이름을 위한 사용자 지정 */
.user-card.user-card-Username {
    background-color: #FFD700;
}

또한, 사용자의 기본 그룹만 클래스 선택자로 설정됩니다. 사용자가 기본 그룹이 없는 경우 클래스 선택자는 group-null입니다.

즉, 관리자나 모더레이터의 사용자 카드를 대상으로 할 수 없습니다. 이는 이러한 그룹을 기본 그룹으로 설정할 수 없기 때문입니다. 메타 사이트에서 관리자의 사용자 카드를 검사해 보면 클래스 선택자가 group-team임을 확인할 수 있습니다.

[SaraDev (Sara Devlaeminck)]

@Turtle

관리자의 사용자 이름이 사이트 전체에서 파란색으로 표시되도록 설정하려고 합니다.

@manuel

현재 선언은 다음과 같을 것입니다:

@Discourse

/* 특정 사용자 그룹에 대한 커스터마이징 */
user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* 특정 사용자 이름에 대한 커스터마이징 */
.user-card.user-card-Username {
    background-color: #FFD700;
}

또한, 사용자의 1차 그룹만 클래스 선택자로 설정됩니다. 사용자가 1차 그룹이 없는 경우, 클래스 선택자는 group-null입니다.

이것이 정확하며, 현재 사용자 그룹이나 특정 사용자를 기반으로 사용자 카드 모양을 커스터마이징하는 데 사용할 수 있는 최선의 방법임을 확인합니다.

이 점을 지적해 주신 @manuel님과 @Turtle님께 감사합니다.

이 정보도 여기 가이드에 업데이트했습니다.

[Turtle]

좋아요, 그런데 카드에서 사용자 이름 색상을 변경하고 싶다면 어떻게 해야 하나요? 무엇을 추가해야 하나요? 죄송하지만 CSS 선택자에 대해 잘 모르겠습니다.

[SaraDev (Sara Devlaeminck)]

@Turtle

하지만 카드에서 사용자 이름 색상은 변경해 주세요

이러한 종류의 커스터마이징을 하려면 다음 CSS를 사용해야 합니다:

.name-username-wrapper {
   color: #f47dff;
}

이것은 사이트의 모든 사용자 카드에서 username 요소의 색상을 커스터마이징합니다.

예:

또한, 사이트에서 이러한 커스터마이징에 사용할 특정 CSS 선택자를 찾는 데 도움이 되도록 다음을 참고할 수 있습니다: 올바른 CSS 선택자 찾기

[jrgong]

간단하고 작은 제안입니다: 사용자의 아바타 배경색이 사용자 카드 배경색과 동일할 때, 둘 사이의 구분선이 제대로 보이지 않았습니다.

사용자 카드의 아바타 img에 동일한 박스 섀도우를 추가했는데, 이게 문제를 해결해 주었습니다.

.user-card .first-row .avatar {
    box-shadow: var(--shadow-dropdown);
}