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

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

Last update: 20.05.2018

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

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

Основные разделы:

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

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

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

[свернуть]
Как добавить свой логотип в заголовок чата?

Представим, что вы хотите добавить логотип фирмы в свой чат, который увеличивался бы при наведении на него. Для этого мы можем использовать псевдоэлементы и 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 {
   white-space:nowrap;
   overflow:hidden;
   -webkit-animation: step 5s steps(50) infinite;
   animation: step 5s steps(50) infinite;
}
@keyframes step { 
   0% { width: 0;}
   100% {width:100%;}
} /* ChaTemplate */
@-webkit-keyframes step {
   0% { width: 0;}
   100% {width:100%;}
}

[свернуть]
Как разместить заголовок по центру?

.chatHeader .chatTitle {
width: 100%; 
text-align: center; 
margin: 14px 0 0;
}

[свернуть]
Как разместить меню настроек чата слева?

.chatHeader .chatTopLine {
left: 12px;
right: auto;
}

[свернуть]
Как сделать заголовок крупнее?

.chatHeader .chatTitle {
font-size: 26px; /* максимально рекомендуемый размер */
margin-top: 7px; /* делаем отступ сверху */
}

[свернуть]
Как убрать заголовок?

.chatHeader .chatTitle {
display: none;
}

[свернуть]

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

Как правильно сделать круглые углы в меню?

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

Ниже представлен код, при использовании которого ваше меню будет отображаться корректно при любом варианте:

  • если вы не вошли в чат (2 пункта)
  • если вы вошли в чат (3 пункта)
  • если в чате отключен пункт «Чатовод» и вы не вошли в чат (1 пункт)
  • если в чате отключен пункт «Чатовод и вы вошли в чат (2 пункта)
.chatHeader .chatTopLine {
    border-radius: 6px;
    border-radius: 6px;
}
.chatTopLineWrapper > ul > li:first-child > a {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.chatTopLineWrapper > ul > li:last-child > a {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
body:not(.has-nick) .chatTopLineWrapper > ul > li:nth-child(2) > a {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

[свернуть]

Блок с сообщениями

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

.chatTabs ul li a {
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

[свернуть]
Как добавить фон в сообщение Администратора/пользователя?

Чтобы добавить фон к сообщению администратора или другого пользователя, добавьте в css строки:

.chatMessage[data-nick="Madeas"] {
	background-color: white;
}

где Madeas замените на ник нужного пользователя, а white поменяйте на нужный нам цвет фона сообщения.

[свернуть]
Как выделить сообщение Администратора/пользователя?

Чтобы выделить сообщение пользователя в чате отдельным цветом, добавьте в css строки:

.chatMessage[data-nick="Madeas"] {
	color: red;
}

где Madeas замените на ник нужного вам пользователя, а red поменяйте на нужный нам цвет сообщения или оставьте красным.

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

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

[свернуть]
Как поставить фон/картинку в окне привата?

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

[свернуть]
Как убрать текст возле иконок в меню?

.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 - полупрозрачная */
}

[свернуть]

Общие вопросы

Как задать размер для изображений в чате?

.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:; /* подчеркивание */
варианты применения:
blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
line-through
Создает перечеркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчеркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
inherit
Значение наследуется у родителя.

[свернуть]

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

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

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

Подробнее

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

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

Подробнее

Смайлы для chatovod

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

Подробнее

Pop-Up окно

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

Подробнее

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