사용자 카드 사용자 지정

[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;
}

This part doesn’t work.
There is no ‘data-user-card’ under ‘user-card’ class.

[Turtle]

I’m trying to make it so admins have blue colored usernames everywhere on the site- not sure if there’s like a selector for usernames everywhere that’ll work- but here’s what I have for CSS and it isn’t working.

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

Any thoughts or ideas? Is the selector just different now since it’s been over two years since this was published? @SaraDev you look to be the person who wrote this, do you know what’s up?

[manuel (Manuel Kostka)]

Yes, this doesn’t seem up-to-date. I believe current declarations would be:

@Discourse

/* Customize for a specific user group */
user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* Customize for a specific username */
.user-card.user-card-Username {
    background-color: #FFD700;
}

Also, only the user’s primary group is set as a class selector. When the user has no primary group, the class selector is group-null.

That means you can’t target user cards of admins or moderators, as these groups can’t be set as primary groups. If you inspect the user cards of admins here on meta, you’ll see the class selector is group-team.

[SaraDev (Sara Devlaeminck)]

@Turtle

I’m trying to make it so admins have blue colored usernames everywhere on the site

@manuel

I believe current declarations would be:

@Discourse

/* Customize for a specific user group */
user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* Customize for a specific username */
.user-card.user-card-Username {
    background-color: #FFD700;
}

Also, only the user’s primary group is set as a class selector. When the user has no primary group, the class selector is group-null.

I can confirm that this is correct, and currently the best method to use for customizing the user card appearance based on user group or specific user.

Thanks @manuel and @Turtle for pointing this out.

I’ve updated the guide here with this information as well.

[Turtle]

Alright, but what if I want to change the username color on the card though? What do I add? Sorry, I don’t know much about CSS selectors.

[SaraDev (Sara Devlaeminck)]

@Turtle

change the username color on the card though

For this type of customization, you would want to use the following CSS:

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

This would customize the color of the username element on the user cards of all users on a site.

Ex:

Also, to help with finding the specific CSS selectors to use for customizations like this on your site, you can follow: Finding the right CSS selectors

[jrgong]

Quick and small suggestion: whenever users have an avatar with the same background color as the user card, there wasn’t proper separation.

We simply added the same box shadow to the user card avatar img, which did the trick

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