Как настроить никнейм или имя, добавить цвет и иконку?

Поддержка
1

Я заметил, что на многих форумах, работающих на Discourse, можно настраивать никнеймы/имена пользователей с помощью цветных и стилизованных шрифтов и иконок. Как это сделать?

image
image
image
image
image
image
image

2

Это учётные записи сотрудников? Если да, вы можете настроить их с помощью CSS. Пожалуйста, ознакомьтесь с этим: Make staff users more recognizable with customized avatars, posts, and mentions

Вы можете сделать что-то подобное на основе группы, к которой принадлежит пользователь. Проверьте это: Changing username colors

Я не думаю, что имя пользователя можно настраивать индивидуально для каждого пользователя, если только администратор не сделает это вручную с помощью CSS. Или с помощью специального плагина, который добавляет такую возможность.

3

Что-то вроде этого должно работать, если профиль пользователя не закрыт:

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

Вот как этот код выглядит здесь, на Meta, с вашим именем пользователя @cocococosti:

image

РЕДАКТИРОВАНИЕ: Я неправильно понял ваш пост, но это всё равно достаточно простой пример для тех, кто не знает, как это сделать. :slight_smile:

4

Не могли бы вы, пожалуйста, дать ссылку на этот форум?

5

Похоже, что да
https://bcharts.com.br/t/spotify-global-21-04-bam-bam-entra-no-top-5-envolver-7-2-mamiii-13-1/249771

6

Похоже, они используют цвета в именах пользователей в зависимости от групп:

// Раскраска имени по группе
.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 Я уже опробовал этот CSS-код на своём форуме, и он работает. :heart:

Предполагаю, что вы являетесь модератором форума. Попробуйте проверить это на себе, прежде чем создавать группы.

// Раскрасить имя по группе
.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

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