Personnalisation du pseudo ou du nom, coloré et avec icône, comment faire ?

Soutien
1

Je vois beaucoup de forums basés sur Discourse, où l’on peut personnaliser le pseudo/nom des utilisateurs avec des polices et des icônes colorées et stylisées, comment fait-on cela ?

image
image
image
image
image
image
image

1 « J'aime »
2

Ce sont des comptes du personnel ? Si oui, vous pouvez les personnaliser avec du CSS, veuillez vérifier : Make staff users more recognizable with customized avatars, posts, and mentions

Vous pouvez faire quelque chose de similaire en fonction du groupe auquel ils appartiennent, vérifiez : Changing username colors

Je ne pense pas que le nom d’utilisateur puisse être personnalisé utilisateur par utilisateur, à moins qu’un administrateur ne le fasse manuellement avec du CSS. Ou avec un plugin personnalisé qui introduit cette fonctionnalité.

4 « J'aime »
3

Quelque chose comme ceci devrait fonctionner à moins que le profil d’un utilisateur ne soit privé :

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

Voici à quoi ressemble ce code ici sur Meta avec votre nom d’utilisateur @cocococosti

image

EDIT : J’ai mal lu votre message, mais c’est quand même un exemple assez simple pour ceux qui ne savent pas comment faire. :slight_smile:

3 « J'aime »
4

Pouvez-vous lier à ce forum s’il vous plaît ?

2 « J'aime »
5

Je suppose que oui

3 « J'aime »
6

Apparemment, ils utilisent des couleurs dans les noms d’utilisateur en fonction des groupes :

// Colorer nom par groupe
.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 « J'aime »
7

@danielabc J’ai déjà essayé le code CSS sur mon forum et ça fonctionne. :heart:

J’imagine que tu es le modérateur du forum, essaie avec toi-même avant de former les groupes.

// Colorer le nom par groupe
.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 « J'aime »
8