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?
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?
Are those staff accounts? If so, you can customize them with CSS, please check: How to make a staff user more recognizable
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.
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
EDIT: Misread your post, but still it’s a simple enough example for those who don’t know how to do it.
Can you link to this forum please?
I guess it is
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;
}
}
@danielabc I already tried the CSS code on my forum and it works.
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;
}
}