На страничке FAQ по CSS для Chatovod собраны ответы на часто задаваемые вопросы по настройке общих стилей для чатов, такие как смена фона, изменение углов, кнопок и многое другое. Если у вас останутся вопросы, Вы можете задать их внизу страницы в комментариях.
Last update: 30.08.2018
Представим, что вы хотите добавить логотип фирмы в свой чат, который увеличивался бы при наведении на него. Для этого мы можем использовать псевдоэлементы и css анимацию.
.chatHeader .chatTitle {
padding-left:45px;
}
.chatHeader .chatTitle::before {
position: absolute;
width:45px;
height:45px;
top:12px;
left:12px;
content:'';
background: url('здесь ссылка на ваш логотип') 0 0 no-repeat;
background-size:40px;
transition:all 0.3s ease;
}
Добавим эффект увеличения логотипа при наведении курсора на верхнюю часть чата.
.chatHeader:hover .chatTitle::before {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
.chatHeader .chatTitle {
position: relative;
overflow: hidden;
-webkit-animation: chat 15s infinite;
animation: chat 15s infinite;
}
@keyframes chat {
0% {
left: 0;
}
100% {
left: 100%;
}
}
/* ChaTemplate */
@-webkit-keyframes chat {
0% {
left: 0;
}
100% {
left: 100%;
}
}
где, 15s — скорость движения (чем больше значение, тем меньше скорость движения).
.chatHeader .chatTitle {
width: 100%;
text-align: center;
margin: 14px 0 0;
}
.chatHeader .chatTitle {
font-size: 26px; /* максимально рекомендуемый размер */
margin-top: 7px; /* делаем отступ сверху */
}
.chatTabs ul li a {
font-size: 14pt; /* меняет размер шрифта (рекомендуемый мин. 8pt, макс. 16pt) */
}
.chatTabs > ul > li.chatTab > a.active {
-webkit-animation: blink 1s infinite;
animation: blink 1s infinite;
}
@keyframes blink {
0% {opacity: 0}
49%{opacity: 0}
50% {opacity: 1}
}
.chatTabs {
display: none;
}
Чтобы убрать образовавшуюся пустоту между заголовком чата и блоком сообщений, добавьте код ниже:
.chatMain .chatMessages,
.chatMain .chatPrivateMessages {
top: 0;
}
.chatTabs ul li a {
background-image: none !important; /* убираем иконки приложений*/
padding: 0 8px !important;
}
.chatTabs > ul > li {
margin-right: 0 !important;
}
.chatTabs > ul > li.appTab {
margin-left: 0 !important;
}
Наверняка, многие замечали, что в системе комментирования на сайтах ответы располагаются немного правее обычных комментариев. Благодаря этому коду, семь последних ответов на ваши сообщения будут выводиться так же, немного правее, в виде цепочки(дерева). Теперь, ответы на ваши сообщения станут более заметными.
.chatMessage.chatMessageToMe:nth-last-child(7) {margin-left: 10px;}
.chatMessage.chatMessageToMe:nth-last-child(6) {margin-left: 15px;}
.chatMessage.chatMessageToMe:nth-last-child(5) {margin-left: 20px;}
.chatMessage.chatMessageToMe:nth-last-child(4) {margin-left: 25px;}
.chatMessage.chatMessageToMe:nth-last-child(3) {margin-left: 30px;}
.chatMessage.chatMessageToMe:nth-last-child(2) {margin-left: 35px;}
.chatMessage.chatMessageToMe:last-child {margin-left: 40px;}
.chatMessage {
background-color: ; /* цвет фона сообщений */
margin-top: 5px; /* отступ между сообщениями */
border: 1px dotted red; /* рамка сообщений */
}
где, 1px — толщина рамки, red — цвет рамки. Чтобы убрать отступы между сообщениями и рамку, просто удалите необходимые строки.
/* Летящий орел ChaTemplate (с) 2018 */
.chatMain::before {
position: absolute;
top: 30%; /* делаем выше - ниже */
width: 60px;
height: 50px;
content: '';
background: url(http://www.webdesign-klamonfra.de/bilder/adler.gif) 0 0 no-repeat;
background-size: 60px;
animation: adler 30s infinite linear;
}
@keyframes adler {
from{transform: scale(.3) translate3d(-1500px,0,0)}
to{transform: scale(.9) translate3d(2000px,0,100px)}
}
.chatUserFrom.user******* {
pointer-events: none;
}
Где ****** меняем на id нужного пользователя
Чтобы добавить фон к сообщению администратора или другого пользователя, добавьте в css строки:
.chatMessage[data-nick="Madeas"] {
background-color: white;
}
где Madeas замените на ник нужного пользователя, а white поменяйте на нужный нам цвет фона сообщения.
Чтобы выделить сообщение пользователя в чате отдельным цветом, добавьте в css строки:
.chatMessage[data-nick="Madeas"] {
color: red;
}
где Madeas замените на ник нужного вам пользователя, а red поменяйте на нужный нам цвет сообщения или оставьте красным.
.chatPrivateMessages {
background-color: #fff; /* цвет фона */
background-image: url('ссылка на ваше изображение');
background-position: 50% 50%; /* положение картинки по центру слева и сверху */
background-size: cover; /* растянуть изображение на весь экран */
opacity:1; /* видимость картинки, 0.5 - полупрозрачная */
}
Для начала убедитесь, что вы добавили фоновое изображение в ручных настройках, в поле Фоновая картинка (URL):.
.chatMain {
background-size: cover; /* растянуть изображение на весь экран */
}
.chatTime {
float: left;
}
Вы также можете включить опцию всегда показывать время сообщений в ручных настройках чата.
В чатоводе существует несколько вариантов добавления картинки возле ников, но самый правильный считается этот.
.chatMessage .chatUserFrom {
background-image: url('//st1.chatovod.ru/i/widget/user_gray.png'); /* меняете ссылку иконки на свою */
background-size: 16px; /* рекомендуемый размер иконки */
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 20px;
}
На данном примере добавим всем пользователям по три иконки перед сообщениями.
.chatMessage {
background: url("//st1.chatovod.ru/i/widget/user_gray.png") no-repeat 0 0,
url("//st1.chatovod.ru/i/widget/user.png") no-repeat 20px 0,
url("//st1.chatovod.ru/i/widget/user_gray.png") no-repeat 40px 0;
padding-left: 60px; /* по 20px на каждую иконку */
}
В примере, если вы обратите внимание, у каждой иконки имеется свой отступ (0, 20, 40, …). Это делается для того, чтобы ваши иконки не залезали друг на друга.
Чтобы добавить несколько иконок конкретному пользователю, вам нужно знать его id (набор цифр) и заменить в коде .chatMessage на .user******.
.chatPeople .chatPeopleTitle {
font-size:0;
}
.chatPeople .chatPeopleTitle:before,
.chatPeople .chatPeopleTitle:after,
.chatUsersCount {
font-size: 12px;
}
.chatPeople .chatPeopleTitle:before {
content:'Онлайн ';
}
.chatPeople .chatPeopleTitle:after {
content:' из них ботов 0';
}
где, font-size: 12px — размер шрифта, Онлайн — текст до цифры с количеством пользователей, из них ботов 0 — любой ваш текст.
/* Список пользователей слева */
.chatMain .chatPeople {
left: 0 !important;
}
.chatMain .chatMessages, .chatMain .chatPrivateMessages {
right: 0 !important;
left: 170px !important;
}
.chatTabs {
left: 171px !important;
right: 0 !important;
}
.adm-icon { /* администратор */
background-image: url('ссылка на ваше изображение');
background-size: 16px; /* если картинка большая уменьшаем до 16px */
}
.mod-icon { /* модератор */
background-image: url('ссылка на ваше изображение');
background-size: 16px; /* если картинка большая уменьшаем до 16px */
}
Чтобы добавить иконку конкретному админу/модеру, перед кодом добавьте его id, например:
.user-2604994 .adm-icon { /* администратор */
background-image: url('ссылка на ваше изображение');
background-size: 16px; /* если картинка большая уменьшаем до 16px */
}
.chatPeople ul.chatPeopleList li a.chatUser {
background: transparent url('ссылка на картинку') no-repeat 0px 0px / 16px 16px;
padding-left: 20px;
padding-bottom: 0px;
}
Первое, что вам нужно знать, перед установкой кода, это id (набор цифр) пользователя и заменить в коде .user-id на цифры .user-******.
.user-id a.chatUser {
position: relative;
visibility: hidden;
}
.user-id a.chatUser::after {
visibility: visible;
content:'';
position: absolute;
left:0;
width: 100px; /* рекомендуемый размер поля для картинки (макс 170px) */
height: 100%;
background: transparent url('ссылка на ваше изображение') 0 0 no-repeat;
background-size: 100px; /* задаем размер изображения */
}
.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel a span {
display: none;
}
.chatFooter .chatFooterWrapper .chatPanel div a span {
display: none;
}
.chatSendLinksPanel a {
margin-right: 16px !important; /* выравниваем отступы между иконками */
}
Первое что мы хотели бы предложить вам — это новый сервис проекта ChaTemplate — формы входа. Благодаря ему, на вашей страничке входа будет не только красивая картинка, но и стильная форма входа в чат.
.chatFull .transparent {
background-color: #fff; /* цвет фона */
background-image: url('ссылка на ваше изображение');
background-position: 50% 50%; /* положение картинки по центру слева и сверху */
background-size: cover; /* растянуть изображение на весь экран */
opacity:1; /* видимость картинки, 0.5 - полупрозрачная */
}
.chatFull .transparent:before {
position: absolute;
width: 100%;
text-align: center;
left:0;
color: #00BFFF; /* цвет текста меняем на нужный */
top: 90%; /* положение текста 0% - 90% сверху вниз */
content:'здесь ваш текст'; /* содержание текста */
font-size: 20px; /* размер текста */
}
Меняем последние четыре параметра по своему усмотрению.
Если вы не разбираетесь в коде, настоятельно рекомендуем остальные параметры не изменять.
Чтобы сделать бегущую строку справа налево для какого-либо блока, текста или картинки, достаточно добавить этот код:
.ваш_класс {
white-space: nowrap;
-webkit-animation: chat 40s linear infinite;
-moz-animation: chat 40s linear infinite;
animation: chat 40s linear infinite;
}
@-webkit-keyframes chat {
0% {
left: 100%;
}
100% {
left: 0%;
}
}
@keyframes chat {
0% {
left: 100%;
}
100% {
left: 0%;
}
}
где, 40s — скорость движения (чем меньше, тем быстрее движется строка), а ваш_класс меняете на нужный вам.
Где может пригодиться такая строка?
Если вы поставили код, но строка все равно не двигается, добавьте после открывающей скобки позицию: position: absolute;. Если ваша строка сбилась или вовсе пропала, замените absolute на relative; и все заработает.
.ваш_класс {
position: absolute;
...
.chatMessages.vscrollable img,
.chatPrivateMessages.vscrollable img {
max-width: 32px; /* максимальная ширина изображений */
max-height: 32px; /* максимальная высота изображений */
}
Для закругления кнопок, панелей чата и прочих мелочей, необходимо добавить border-radius
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
где 3px — это угол среза. Чем больше число, тем больше будет круг. Для полного закругления можно воспользоваться правилом border-radius:50%;.
Если вам нужно закруглить определенный угол, воспользуйтесь кодом:
border-top-left-radius:3px; border-top-right-radius:3px; border-bottom-left-radius:3px; border-bottom-right-radius:3px;
.chat,
.chatMain {cursor: url(ссылка на картинку курсора), auto;}
Для изменения ссылок чата Вы можете использовать ручные настройки в разделе «Дизайн». Если же вам требуются дополнительные настройки, такие как, например, цвет ссылки при наведении, то это решение для вас.
Обозначение.
Сама ссылка обозначается символом a {}. Ссылка при наведении —a:hover {}. Какие менять — решайте сами. Свойства ссылок в большинстве случаев используют такие же свойства, как и обычный текст.
color:;/* цвет */ font-size:; /* размер */ font-style:; /* italic - курсивное начертание / normal - обычное начертание текста */ font-weight:; /* жирность */ text-decoration:; /* подчеркивание */
варианты применения:
Информация об иконках в чате. Узнайте как сменить или убрать их в своем чате.
Наборы интересных и веселых смайлов, которые всегда смогут оживить чат.