昵称或名字自定义，彩色和图标，如何做到？

支持
1

我看到很多基于 Discourse 的论坛，你可以用彩色和风格化的字体及图标自定义用户的昵称/名字，这是怎么做到的？

image
image
image
image
image
image
image

1 个赞
2

那些是员工账户吗？如果是，您可以使用 CSS 自定义它们，请查看：Make staff users more recognizable with customized avatars, posts, and mentions

您可以根据他们所属的群组做类似的事情，请查看：Changing username colors

我认为用户名无法逐个用户自定义，除非管理员手动使用 CSS 进行设置。或者通过引入该功能的自定义插件来实现。

4 个赞
3

除非用户的个人资料是私有的，否则类似这样的代码应该有效：

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

这是在 Meta 上使用您的用户名 @cocococosti 时代码的外观

image

编辑：我误读了您的帖子，但对于那些不知道如何操作的人来说，这仍然是一个足够简单的示例。 :slight_smile:

3 个赞
4

请问可以链接到这个论坛吗？

2 个赞
5

我想是这样

3 个赞
6

Apparently they use color in usernames according to groups:

// 按组着色名称
.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 个赞
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;
  }
}
5 个赞
8