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

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
\
Пользователь
Регистрация
2 Ноя 2024
Сообщения
2,002
Всем привет. В этой теме покажу, как сделать картинку перед ником. Будет выглядеть примерно так:
1746918928639.png

Переходим в extra.less и вписываем
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 - Группа пользователя. Группу пользователя можно посмотреть в поисковой строке вашего браузера.
1746919041788.png

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

Результат:
1746919106241.png


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

Для того чтобы вставить картинку, вам нужно конвертировать PNG в WebP, а затем загрузить её на фотохостинг. По возможности я буду загружать ваши изображения на свой хостинг и предоставлять вам ссылки для использования.
 
Профессионал
Заблокированный
Регистрация
20 Мар 2025
Сообщения
400
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
OFFTOP

класс!

 
Кто с мечом к нам придёт, от меча и погибнет!
Активный
Регистрация
7 Мар 2025
Сообщения
271
Всем привет. В этой теме покажу, как сделать картинку перед ником. Будет выглядеть примерно так:

Переходим в extra.less и вписываем
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 - Группа пользователя. Группу пользователя можно посмотреть в поисковой строке вашего браузера.
Посмотреть вложение 7985

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

Результат:
Посмотреть вложение 7986


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

Для того чтобы вставить картинку, вам нужно конвертировать PNG в WebP, а затем загрузить её на фотохостинг. По возможности я буду загружать ваши изображения на свой хостинг и предоставлять вам ссылки для использования.
Уже делали гайд по этому
 
Заблокированный
Регистрация
6 Май 2025
Сообщения
6
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Уже делали гайд по этому
Это FA иконка, у меня картинка. Это совсем разные вещи
 
Активный
Регистрация
26 Окт 2024
Сообщения
1,165
Хороший мануал. Но есть пару недочётов. К примеру пропадает аватар в статистике онлайна.
 
Сверху