Баннеры пользователей изображением

Мануал Баннеры пользователей изображением

Нет прав для скачивания
Совместимость версий
  1. 2.0
  2. 2.1
  3. 2.2
Как то не очень люблю использовать изображения в качестве баннеров, но есть спрос, сделал :)
В архиве, для примера есть несколько баннеров, новые заливать туда же. Так как размер картинки надо фиксировать, то для начала изменим ширину постбита, в настройках стиля, ширина блока информации о пользователе ставим 150px.
В extra.less добавляем:
Less:
.userBannerImage(@groups, @image) {
    .userBanner {
        width: 150px;
        height: 46px;
        font-size: 0px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border: none;
        &.userBanner--@{groups} {
            background-image: url('/styles/user-banner/@{image}.png');
        }
    }
}

.userBanner.userBanner--staff {
    background: transparent url('/styles/user-banner/staff.png') no-repeat center / cover;        
}
Баннер команды форума изменится сразу. Другие баннеры добавляем так:
Less:
.userBannerImage(admin, admin);
Где первое admin название группы (произвольное), второе, admin, название изображения баннера без разрешения (у всех оно png).
В настройках группы в свой класс CSS пишем:
Less:
userBanner--admin
  • image1_03.png
    image1_03.png
    6.2 КБ · Просмотры: 13
  • image1_06.png
    image1_06.png
    5.5 КБ · Просмотры: 18
  • image1_08.png
    image1_08.png
    5.5 КБ · Просмотры: 11
  • image1_10.png
    image1_10.png
    5.9 КБ · Просмотры: 11
  • image1_11.png
    image1_11.png
    8.4 КБ · Просмотры: 14
Верх Низ