Apelido ou nome personalizar, colorido e ícone, como fazer?

Suporte
1

Vejo muitos fóruns baseados no Discourse que permitem personalizar o apelido/nome dos usuários com fontes e ícones coloridos e estilizados, como se faz isso?

image
image
image
image
image
image
image

1 curtida
2

Essas são contas de staff? Se sim, você pode personalizá-las com CSS, por favor, verifique: Make staff users more recognizable with customized avatars, posts, and mentions

Você pode fazer algo semelhante com base no grupo a que pertencem, verifique: Changing username colors

Não acho que o nome de usuário possa ser personalizado usuário por usuário, a menos que um administrador o faça manualmente com CSS. Ou com um plugin personalizado que introduza esse recurso.

4 curtidas
3

Algo assim deve funcionar, a menos que o perfil de um usuário seja privado:

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

É assim que esse código se parece aqui no Meta com o seu nome de usuário @cocococosti

image

EDIT: Li mal o seu post, mas ainda assim é um exemplo simples o suficiente para quem não sabe como fazer. :slight_smile:

3 curtidas
4

Você pode me vincular a este fórum, por favor?

2 curtidas
5

Eu acho que é

3 curtidas
6

Aparentemente eles usam cores nos nomes de usuário de acordo com os grupos:

// Colorir nome por grupo
.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;
  }
}
4 curtidas
7

@danielabc Já tentei o código CSS no meu fórum e funciona. :heart:

Imagino que você seja o moderador do fórum, tente consigo mesmo antes de formar os grupos.

// 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;
  }
}
5 curtidas
8