닉네임 커스터마이징, 색상 및 아이콘 설정 방법?

제품 지원
1

Discourse 기반 포럼에서 사용자 닉네임/이름을 색상과 스타일화된 폰트 및 아이콘으로 커스터마이즈할 수 있는 것을 많이 보고 있습니다. 어떻게 해야 하나요?

image
image
image
image
image
image
image

2

그 계정들이 스태프 계정인가요? 그렇다면 CSS로 커스터마이징할 수 있습니다. 아래 링크를 확인해 보세요: Make staff users more recognizable with customized avatars, posts, and mentions

소속된 그룹을 기준으로 유사한 효과를 줄 수도 있습니다. 아래 링크를 확인해 보세요: Changing username colors

관리자가 CSS로 수동으로 처리하지 않는 한, 사용자별로 사용자 이름을 커스터마이징할 수 없다고 생각합니다. 또는 해당 기능을 도입하는 커스텀 플러그인을 사용하는 경우를 제외하고는요.

3

사용자의 프로필이 비공개가 아니라면, 다음과 같은 방법으로 작동해야 합니다:

span.username a[data-user-card="cocococosti"]{
border: solid green 3px;
}

이것이 Meta에서 @cocococosti 사용자 이름으로 해당 코드가 보이는 모습입니다.

image

수정: 게시물을 잘못 읽었지만, 방법을 모르는 사람들을 위해 여전히 간단한 예시입니다. :slight_smile:

4

이 포럼에 링크를 걸어 주시겠어요?

5

아마도
https://bcharts.com.br/t/spotify-global-21-04-bam-bam-entra-no-top-5-envolver-7-2-mamiii-13-1/249771
일 것 같습니다.

6

아마도 그들은 그룹에 따라 사용자 이름에 색상을 사용하는 것 같습니다:

// 그룹별 이름 색상 지정
.names {
  span.Banidos a  {
    text-decoration: line-through!important;
  }
  span.BigBrotherBrasil a {
    color: #5074f2!important;
  }
  span.Celebs a {
    color: #94dbea!important;
  }
  span.Variedades a {
    color: #ffa500!important;
  }
  span.Musica a {
    color: #e13d14!important;
  }
  span.Cinema-TV a {
    color: #59c35b!important;
  }
  span.Noticiario a {
    color: #74429b!important;
  }
  span.Geek a {
    color: #12A89D!important;
  }
  span.Gifs a {
    color: #f67fb4!important;
  }
  span.Adulto a {
    color: #ff1010!important;
  }
  span.VIP-Gold a {
    background: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  span.VIP-Gold a::after {
    content:"★";
    margin-left: 2px;
  }
  span.VIP-Rose a {
    background: linear-gradient(to left,#D7828D, #EFD1D5, #F6DFE1, #EBBEC4, #D998A3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  span.VIP-Diamond a {
    background: linear-gradient(to right,#2C5481, #BCD3E7, #3F679A, #84AFE2, #5F89B6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  span.VIP-Pearl a {
    background: linear-gradient(to right,#848B98, #C7C9CB, #D7D7D8, #AEB2B8, #959BA3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  span.VIP-Amethyst a {
    background: linear-gradient(to right,#9063CD, #7C56B3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  span.VIP-Ruby a {
    color: crimson!important;
  }
  span.VIP-Ruby a::after {
    //content:"🔥";
    //margin-left: 2px;
  }
  span.VIP-Emerald a {
    background: linear-gradient(to right,#00A881, #34AC90);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  span.VIP-Sapphire a {
    background: linear-gradient(to right,#2468d2, #0d49a7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
7

@danielabc 제 포럼에서 CSS 코드를 이미 시도해 봤고, 잘 작동합니다. :heart:

포럼의 관리자인 것 같은데, 그룹을 만들기 전에 직접 먼저 시도해 보세요.

// Colorir nome por grupo
.names {
span.moderator a {
    background: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  span.moderator a::after {
    content:"★";
    margin-left: 2px;
  }
}
8

https://bcharts.com.br/t/spotify-global-21-04-bam-bam-entra-no-top-5-envolver-7-2-mamiii-13-1/249771