Инструкция Стиль баннера как на Матрешка RP

Всем привет. Уже не первый раз вижу как пользователи интересуются вопросом, как же сделать стиль баннера группы пользователя как на Матрешка RP в постбите (на странице сообщений), или в профиле пользователя.

Давайте по порядку.​

У них используются картинки за место простого отображения названия групп пользователя.


Сейчас мы будем работать с кодом элемента, чтобы понять, как у них это реализовано.
Поэтому без прочтения вот этой статьи даже не продолжайте читать: Просмотр кода элемента на сайте для пупсиков
И так приступим. Для начала тебе нужно подготовить иконки. Мне не важно где ты их возьмёшь. Я возьму для урока их изображения. Но на деле ты должен создать свои. Уникальность... все дела..

И так, качаем картинку:
ПКМ по группе пользователя, затем посмотреть код, или клавиши ctrl+shift+i, и там добираемся до картинки.

Картинка указана в стиле (шаблоне).
Выглядит вот таким образом:

То есть стиль баннера группы называется .imgAdmin.
По сути, если ты сейчас скопируешь этот код, и поставишь его в конец своего extra.less и укажешь название стиля в настройках группы, то он уже будет работать. Но не для всех. Всё зависит. Отдаёт ли сайт matrp.ru картинку группы сторонним сайтам.

И так, приступаем. Идём по ссылке которая указана в стиле
https://edge-cdn-forummatrpru.matrp.ru/data/icons/img_admin.png
И получаем вот это

То есть это и есть картинка группы...
Хорошо, пкм, сохраняем её.

Куда сохранять. Ну ты можешь создать в корневой папке форума папку, куда будешь сохранять картинки для оформления групп.
К примеру папку images

Далее просто сохраняешь все картинки туда.

С картинками думаю всё более менее понятно...

Настраиваем группу пользователя.​

И так, нам нужно тестовое сообщение. У меня на тестах чистый форум, без кастомных стилей, поэтому любому новичку будет удобно это
Напишем новое сообщение на сайте.

Хорошо, будем работать теперь с ним.

В панели управления, переходим в /admin.php?user-groups/
Это настройка групп пользователей.
Будем настраивать группу Администратора сайта.

На данном этапе нас интересует пункт: User banner styling


В нём указываем название стиля, которое будем использовать в качестве настройки стиля группы. В нашем случае я делаю как у Матрешка RP у названия стиля группы админа: .imgAdmin

В этом поле указывать БЕЗ точки! Вот так: imgAdmin

Чуть выше в графе User banner text пишем название группы.

Сохраняем.

Далее переходим:
Appearance → Templates
(Внешний вид → Шаблоны)
И в поле фильтра пишем: extra.less

Не забудьте выбрать ваш стиль....

Открываем его и в самом конце пишем вот так:

.imgAdmin {
    background: url(/images/img_admin.png) no-repeat;
    height: 45px;
    width: 100%;
    max-width: 120px;
    text-indent: -10000em;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

Сохраняем шаблон.
где /images/img_admin.png, это пусть до вашей картинки.

Обновляем страницу с сообщением (если ничего не появилось. почистите кеш горячими клавишами: Ctrl + Shift + R).

Вот что у нас получилось:

​

И так, это мы настроили только группу администратора.

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

Объясню на пальцах.
К примеру по аналогии у нас для админа стиль называется: .imgAdmin, для обычного пользователя стиль картинки называется. .imgUser.

Объединим их через запятую:

.imgUser, .imgAdmin {
    height: 45px;
    width: 100%;
    max-width: 120px;
    text-indent: -10000em;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
.imgUser {
    background: url(/images/img_user.png) no-repeat;
}

.imgAdmin {
    background: url(/images/img_admin.png) no-repeat;
}

Как видишь, это более компактный вид.
Для админа используем картинку /images/img_admin.png а для пользователя /images/img_user.png
То есть теперь у нас создан общий вид, и ниже мы просто меняем картинку для каждой группы пользователя.
Так можно через запятую писать много стилей, чем городить копии для каждого стиля.

 

@bobobo, сделал как ты сказал, но все равно не отображается нечего

 

@gfd5tfdf, значит ты не сделал так как я сказал

 

@bobobo, я короче фотку с svg поставил, а не png

 

@gfd5tfdf, о чём я и говорил. сделал бы как я сразу. сначала ты делай как в уроке сказано. потом уже мог картинку создать

 

@bobobo, кстати после удаления фотки досихпор отображается она что делать?

 

@gfd5tfdf, ctrl+r

 

@bobobo, как ты сказал я сделал

 

ctrl+r

Сказал же @gfd5tfdf,

ctrl+r

 

@gfd5tfdf, Ctrl + Shift + R
или Ctrl + F5
Я забыл что у меня кастомные горячие клавиши...

 

@bobobo, спасибо