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

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

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

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

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

Кому это может пригодиться?

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

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

Что изменится в боте?

вы сможете поставить уникальные аватарки для каждого бота
вы сможете «прикрепить» боту значок с подарком, который будет виден в списке пользователей, возле ника
при наведении на профиль бота, возле аватарки будет отображаться большой значок подарка
вы можете установить иконку пола для каждого бота, в соответствии с именем
вы можете добавить VIP иконку для любого бота или всем сразу

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

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

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

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

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

Все боты и гости в вашем чате имеют один общий класс .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;
}

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

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

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

Для этого в css добавляем код с уже установленной иконкой.

.chatPeople ul.chatPeopleList li.user-nr:last-child a.chatUserSex0 b {
    background: url(http://st1.chatovod.ru/i/widget/user.png) no-repeat 0 0 !important;
}

Готово!

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

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

.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);
}

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

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

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

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