CSS для чатовод
FAQ по CSS

На страничке FAQ по CSS для Chatovod собраны ответы на часто задаваемые вопросы по настройке общих стилей для чатов, такие как смена фона, изменение углов, кнопок и многое другое. Если у вас останутся вопросы, Вы можете задать их внизу страницы в комментариях.

Last update: 10.08.2018

Как установить код в чат?

  1. Войдите в свой аккаунт на сайте http://chatovod.ru/partner/
  2. Определите чат (если их много), в который хотите вставить код и выберите пункт «Дизайн»
  3. Под окном предварительного просмотра чата (в самом низу страницы) активируйте Собственный CSS:
    Включить собственные правила CSS
  4. Скопируйте код с сайта и вставьте его в поле ввода собственных правил CSS
  5. Сохраните настройки CSS и обновите окно своего чата. Готово!

Нужен код цвета?

Попробуйте подобрать самостоятельно

  • нажмите на кнопку ниже
  • скопируйте код, вместе с решеткой #
  • закройте окошко крестиком (или нажмите клавишу Enter)
  • вставьте скопированный код в нужное место

Ваш результат

#fe9216

Верхняя часть: заголовок

Как удалить шапку чата?

.chatHeader {
    display: none;
}
.chatMain {
    top: 0;
}

[свернуть]

Как сделать бегущий заголовок?

.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; /* делаем отступ сверху */
}

[свернуть]

Как убрать заголовок?

.chatHeader .chatTitle {
  display: none;
}

[свернуть]

Верхняя часть: меню

Тело чата: блок с приложениями

Как сделать крупнее шрифт ссылок в списке приложений?

.chatTabs ul li a {
    font-size: 14pt; /* меняет размер шрифта (рекомендуемый мин. 8pt, макс. 16pt) */ 
}

[свернуть]

Как убрать приложения?

.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******.

[свернуть]

Блок со списком пользователей

Как разместить список пользователей слева?

/* Список пользователей слева */
.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;
}

[свернуть]

Страница входа

Первое что мы хотели бы предложить вам — это новый сервис проекта 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 — скорость движения (чем меньше, тем быстрее движется строка), а ваш_класс меняете на нужный вам.

Где может пригодиться такая строка?

  • .chatHeader .chatTitle — заголовок чата
  • .chatFull .transparent:before — текст приветствия на странице входа

Если вы поставили код, но строка все равно не двигается, добавьте после открывающей скобки позицию: 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;}

[свернуть]

С этим разделом смотрят:

Все об иконках

Информация об иконках в чате. Узнайте как сменить или убрать их в своем чате.

Подробнее

Эффекты для кнопок

Более 15 интересных анимационных эффектов на css3 для кнопок чата.

Подробнее

Смайлы для chatovod

Наборы интересных и веселых смайлов, которые всегда смогут оживить чат.

Подробнее

Pop-Up окно

Всплывающее окно позволяет общаться в чате с любой страницы сайта.

Подробнее

Остались вопросы? Спрашивайте в комментариях