Оформление ботов и гостей

Стилизуем пустые значки и аватарки для гостей и ботов в своем чате


Если вы используете ботов в своем чате, то это универсальное решение именно для вас!

Многие администраторы прибегают к использованию ботов, чтобы увеличить визуальное количество пользователей, тем самым повысить приток новых, реальных посетителей в свой чат. Другие используют ботов для автопостинга новостей, как это сделано в чате проекта и некоторых других.

Но в данный момент все боты выглядят одинаково, за исключением, разве что, имен. Согласитесь, выглядит это не очень привлекательно, но! Проект ChaTemplate предлагает решение этой проблемы!

Мы предлагаем вам, при помощи css, стилизовать ваших ботов и придать им человеческий облик. Боты в вашем чате могут и будут выглядеть как живые пользователи, способные отвечать на вопросы и общаться, согласно своим функциональным возможностям.

Как стилизовать бота/гостя?

И так, давайте начнем с простого.

Для начала, вам нужно определиться, для скольких ботов вы хотите сделать изменение. Будем стилизовать последнего и начнем с конца.

Возьмем бота-болванку из нашего чата, которого зовут Виктория.

Установка аватара

Все боты и гости в вашем чате имеют один общий класс .user-nr, на нем и будет основана наша стилизация. Присвоим ему псевдокласс :last-child, что будет означать — последний. Аватар пользователя использует класс .chatUserAvatar и имеет размер 57х82. Старайтесь выбирать вертикальные аватарки, иначе они будут установлены не правильно и будут выглядеть некрасиво.

Для бота Виктории мы используем случайное изображение.

.user-nr:last-child .chatUserAvatar {
    background-image: url(http://ipic.su/img/img7/fs/123.1531585981.jpg); /* аватар */
    background-position: center center; /* центрирование - не трогать */
    background-size: cover; /* заполнение */
}
результат - аватарка у бота

Поздравляем! У бота появилась аватарка.

Чтобы сделать тоже самое для ботов выше по списку, добавьте точно такой же код, но с заменой :last-child на :nth-last-child(2), где 2 — порядковый номер бота снизу (предпоследний). Соответственно 3 и далее — пред-пред… и т.д.

Пример:

.user-nr:nth-last-child(4) .chatUserAvatar {
    background-image: url();
    background-position: center center; /* центрирование - не трогать */
    background-size: cover; /* заполнение */
}

Чтобы задать один аватар для нескольких гостей/ботов, ставьте номера в css через запятую. Например,

.user-nr:nth-last-child(2) .chatUserAvatar,
.user-nr:nth-last-child(3) .chatUserAvatar,
.user-nr:nth-last-child(7) .chatUserAvatar {
    background-image: url();
    background-position: center center; /* центрирование - не трогать */
    background-size: cover; /* заполнение */
}

В background-image: url(вот сюда) в скобочках вставьте ссылку на нужное изображение и готово.

Установка значка возле ника

Идем дальше. Давайте добавим нашему боту значок. Размер значка должен быть 16х16, формат .png или .svg

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

.user-nr:last-child .chatUserGiftsCount {
    display: inline-block !important;
    width: 16px;
    height: 16px;
    background: url(http://st1.chatovod.ru/i/widget/gifts/rose_16.png) 0 0 no-repeat !important;
}
значок возле ника бота

Готово! У нашего бота появился свой значок с подарком.

Установка значка возле аватарки

Здесь мы выбираем нужного бота/гостя (в примере указан последний бот/гость) и ставим этот код:

.user-nr:last-child .chatUserMenu::before {
    content:'';
    position: absolute;
    width: 48px;
    height: 48px;
    background-image: url(http://st1.chatovod.ru/i/widget/gifts/rose_48.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 50px;
    margin-left: -10px;
}

значок возле аватарки

Где мы меняем только содержимое скобок в строчке background-image: url();. Как вы видите в коде выше, размер изображения 48х48 того же формата!

Чтобы установить одинаковые значки для нескольких ботов, проделайте те же действия, что и с аватарками:

.user-nr:nth-last-child(4) .chatUserMenu::before,
.user-nr:nth-last-child(6) .chatUserMenu::before,
.user-nr:last-child .chatUserMenu::before {
    content:'';
    position: absolute;
    width: 48px;
    height: 48px;
    background-image: url();
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 50px;
    margin-left: -10px;
}

Код для последнего бота целиком смотрите ниже. Вы можете скопировать его полностью и установить в свой чат.

 /* стилизация ботов и гостей ChaTemplate - аватар для бота */
.user-nr:last-child .chatUserAvatar {
    background-image: url(); /* ссылка на аватар */
    background-position: center center;
    background-size: cover;
}
/* значок бота возле ника */
.user-nr:last-child .chatUserGiftsCount {
    display: inline-block !important;
    width: 16px;
    height: 16px;
    background: url() 0 0 no-repeat !important;
}
/* значок бота возле аватарки */
.user-nr:last-child .chatUserMenu::before {
    content:'';
    position: absolute;
    width: 48px;
    height: 48px;
    background-image: url();
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 50px;
    margin-left: -10px;
}

Добавляем иконку пола для гостей и ботов

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

Добавляем VIP иконку для бота

Давайте теперь добавим нашему предпоследнему боту вип иконку, как у других пользователей. Для этого необходимо взять стандартную вип-иконку чатовода vip icon и добавить нужному боту код. В примере поставим иконку для двух последних ботов.

.user-nr:nth-last-child(2) a.chatUserIcon {
    background: url(http://st1.chatovod.ru/i/widget/vip.gif);
}

Все! У нашего бота есть вип иконка. Чтобы добавить иконку всем ботам, не нужно прописывать все порядковые числа. Достаточно просто прописать в css код, указанный ниже:

.user-nr a.chatUserIcon {
    background: url(http://st1.chatovod.ru/i/widget/vip.gif);
}

Делаем несколько дополнительных действий по своему усмотрению и получаем красивого и практически живого пользователя.


Смотреть стилизованного бота

Если у вас остались вопросы, есть идеи по улучшению кода или что-то еще, напишите в комментариях ниже.

Если это возможно — мы это сделаем!