Nick or name customize, colorful and icon, how to do it?

Product Support

AI-generated summary

The discussion revolves around customizing usernames with colors and icons on a Discourse-based forum. danielabc asks how to achieve this, providing examples of customized usernames from other forums.

cocococosti suggests that staff accounts can be customized with CSS, and provides links to relevant tutorials. They also mention that customizing usernames user-by-user is not possible without an admin manually applying CSS or using a custom plugin.

ClawdiaWolf shares an example of how to customize a username with CSS, demonstrating the effect on cocococosti’s username.

Moin and danielabc share a link to the forum that inspired the question, https://bcharts.com.br/. PaulinaMX analyzes the CSS code used on that forum to customize usernames based on group membership.

PaulinaMX also shares a working example of CSS code that can be used to customize usernames, and even applies it to the discussion’s original poster, danielabc.

1

I’m seeing a lot of forums based on Discourse, that you can customize the nick/name of users with colored and stylized fonts and icons, how do you do that?

image
image
image
image
image
image
image

2

Are those staff accounts? If so, you can customize them with CSS, please check: Make staff users more recognizable with customized avatars, posts, and mentions

You can do something similar based on the group they belong to, check: Changing username colors

I don’t think the username can be customized user by user, unless an admin does it manually with CSS. Or with a custom plugin that introduces that feature.

3

Something like this should work unless a user’s profile is private:

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

This is what that code looks like here on Meta with your username @cocococosti

image

EDIT: Misread your post, but still it’s a simple enough example for those who don’t know how to do it. :slight_smile:

4

Can you link to this forum please?

5

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

6

Apparently they use color in usernames according to groups:

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

@danielabc I already tried the CSS code on my forum and it works. :heart:

I can imagine that you are the moderator of the forum, try with yourself before forming the groups.

// 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