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

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

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

Зарегистрироваться!
second
Активный
Регистрация
2 Ноя 2024
Сообщения
2,101
Всем привет. В этой теме покажу, как сделать картинку перед ником. Будет выглядеть примерно так:
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, а затем загрузить её на фотохостинг. По возможности я буду загружать ваши изображения на свой хостинг и предоставлять вам ссылки для использования.
 
Активный из XenForo
Активный
Регистрация
20 Мар 2025
Сообщения
704
OFFTOP

класс!

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

Переходим в 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,231
Хороший мануал. Но есть пару недочётов. К примеру пропадает аватар в статистике онлайна.
 
Пользователь
Регистрация
4 Апр 2025
Сообщения
226
Всем привет. В этой теме покажу, как сделать картинку перед ником. Будет выглядеть примерно так:

Переходим в 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, а затем загрузить её на фотохостинг. По возможности я буду загружать ваши изображения на свой хостинг и предоставлять вам ссылки для использования.
Картинка около ника должна быть after, а не before, before- ставится Эмодзи(иконки) after - уже идёт картинка.
 
Лучше плохо начать, чем хорошо бездействовать
Профессионал
Регистрация
30 Ноя 2024
Сообщения
1,415
Картинка около ника должна быть after, а не before, before- ставится Эмодзи(иконки) after - уже идёт картинка.
Чевоо.. какая картинка, какой имоджи. defore - это до, а after - после, таксто всё правильно
 
Пользователь
Регистрация
4 Апр 2025
Сообщения
226
@JustAlex,ты ёбнутый, after - это и есть картинка ставишь url и готов ебланище
 
Лучше плохо начать, чем хорошо бездействовать
Профессионал
Регистрация
30 Ноя 2024
Сообщения
1,415
@JustAlex,ты ёбнутый, after - это и есть картинка ставишь url и готов ебланище
OFFTOP

Во-первых какого хуя ты меня с пустого места оскорбляешь.
Во-вторых after - это не картинка, а всего лишь расположение элемента, который мы пропишем элементу. Повторюсь ещё раз after это после ника, а defore это до ника. Такчто афтер эта никакая не картинка..

 
Активный
Регистрация
26 Окт 2024
Сообщения
1,231
OFFTOP

Во-первых какого хуя ты меня с пустого места оскорбляешь.
Во-вторых after - это не картинка, а всего лишь расположение элемента, который мы пропишем элементу. Повторюсь ещё раз after это после ника, а defore это до ника. Такчто афтер эта никакая не картинка..

OFFTOP


Before, а не defore)

 
Лучше плохо начать, чем хорошо бездействовать
Профессионал
Регистрация
30 Ноя 2024
Сообщения
1,415
Интересно, где у тебя отображается fa иконка или картинка с разметкой defore🤔 на аватарке?
OFFTOP

Псевдоэлемент defore внутри которого прописан код fa иконки отображается перед ником.
А к чему этот вопрос?

 
Сверху