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

 

[Jack_Mithel]

Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.

Годно

 

[Aerial]

OFFTOP

класс!

 

[Ivanov]

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

Спойлер: screenshot

Посмотреть вложение 7984

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

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

}
.username--style11 {

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


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

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

Уже делали гайд по этому

FA Иконка перед ником

В extra.less .username--style3:before { content: "\f118"; font-family: "Font Awesome 5 Pro"; margin-right: 5px; } В CSS имени пользователя margin-right: 5px; Результат Можно сделать сплошной, добавив font-weight: bold; margin-right: 5px; font-weight: bold; Результат...

pawno-help.ru

 

[pSannasard]

Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.

Уже делали гайд по этому

FA Иконка перед ником

В extra.less .username--style3:before { content: "\f118"; font-family: "Font Awesome 5 Pro"; margin-right: 5px; } В CSS имени пользователя margin-right: 5px; Результат Можно сделать сплошной, добавив font-weight: bold; margin-right: 5px; font-weight: bold; Результат...

pawno-help.ru

Это FA иконка, у меня картинка. Это совсем разные вещи

 

[Alone Devman]

Хороший мануал. Но есть пару недочётов. К примеру пропадает аватар в статистике онлайна.

 

[Ivanov]

Это FA иконка, у меня картинка. Это совсем разные вещи

Тогда, извиняюсь ошибся

 

[YanPeskov]

Спасибо, молодец

 

[Joker_Mayorov]

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

Спойлер: screenshot

Посмотреть вложение 7984

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

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

}
.username--style11 {

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


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

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

Картинка около ника должна быть after, а не before, before- ставится Эмодзи(иконки) after - уже идёт картинка.

 

[JustAlex]

Картинка около ника должна быть after, а не before, before- ставится Эмодзи(иконки) after - уже идёт картинка.

Чевоо.. какая картинка, какой имоджи. before - это до, а after - после, таксто всё правильно