[XenForo] Картинка перед ником CSS

[damitz]

Всем привет. В этой теме покажу, как сделать картинку перед ником. Будет выглядеть примерно так:

Спойлер: screenshot

Переходим в extra.less и вписываем

.username--style11::before {
  content: '';
  display: inline-block;
  width: 64px;
  height: 64px;
  background-image: url('https://damitz.ru/config/logo_test_az3d.webp');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 4px;
  vertical-align: middle;
}

style11 - Группа пользователя. Группу пользователя можно посмотреть в поисковой строке вашего браузера.


После этого переходим в нашу группу пользователя, для которой мы делали картинку, и в «CSS для имени пользователя» вставляем:

}
.username--style11 {

Результат:



Картинку можно менять в строке
background-image: url('https://damitz.ru/config/logo_test_az3d.webp');

Для того чтобы вставить картинку, вам нужно конвертировать PNG в WebP, а затем загрузить её на фотохостинг. По возможности я буду загружать ваши изображения на свой хостинг и предоставлять вам ссылки для использования.