1

Тема: Редактирование CSS-стилей чата бесплатно

У владельцев чатов появилась возможность писать собственные CSS-правила для расширенного оформления своего чата.

Редактор CSS находится на странице Дизайн в панели управления чатами.
Собственные правила CSS имеют приоритет над всеми другими настройками дизайна.


Примеры использования:

Картинка в шапке чата:

.chatHeader {
   background-image: url(//st1.chatovod.ru/i/logo-trans.png);
   background-position: center center;
   background-repeat:no-repeat;
}

В этой теме вы можете делиться своими примерами кастомизации чата через CSS.

P.S.
Для поиска названий CSS-классов удобно использовать Инспектор из Инструментов разработчика встроенных в Google Chrome. В качестве справочника по CSS можно использовать Google: https://www.google.com/search?q=руководство+по+CSS.

http://chatovod.ru - чат для вашего сайта

2 (2015-12-04 17:41:42 отредактировано web-дизайнер.)

Re: Редактирование CSS-стилей чата бесплатно

Вот это классно!!!!! Спасибо!!!!!!!

3

Re: Редактирование CSS-стилей чата бесплатно

Полезно))) Спасибо!

Троллейбус

Re: Редактирование CSS-стилей чата бесплатно

Доброго утра!
Сейчас уже широко применяется CSS3,
Не предполагается ли использовать его в чатах на *.ru ?

5

Re: Редактирование CSS-стилей чата бесплатно

web-дизайнер. пишет:

Доброго утра!
Сейчас уже широко применяется CSS3,
Не предполагается ли использовать его в чатах на *.ru ?

По мере того, как будем менять дизайн будем использовать элементы CSS3.

http://chatovod.ru - чат для вашего сайта

6 (2015-12-12 10:35:53 отредактировано C2H5OH)

Re: Редактирование CSS-стилей чата бесплатно

Ув. администрация чатовода

А есть ли возможность в CSS настройках изменять градиент цвета сообщений определенного ника, пусть только для того что был зарегестрирован в своем же чате?

Заранее благодарен

7

Re: Редактирование CSS-стилей чата бесплатно

Кстати, поддержу спирт. Неплохо бы.

8

Re: Редактирование CSS-стилей чата бесплатно

Готово. Пример кода, подчёркивающего пользователя с id5.

.user-5 .chatUser {
    text-decoration: underline!important;
}
http://chatovod.ru - чат для вашего сайта

9 (2015-12-12 15:24:55 отредактировано C2H5OH)

Re: Редактирование CSS-стилей чата бесплатно

Admin пишет:

Готово. Пример кода, подчёркивающего пользователя с id5.

.user-5 .chatUser {
    text-decoration: underline!important;
}

Большая благодарность!
Но это дает лишь оформлять стиль определенного ника в списке ников он-лаин чата, а для того что бы изменить стиль текста сообщения в самом чате только у определенного(!) ника, надо вместо .chatUser прописывать .chatMessage? Или я что то путаю

10

Re: Редактирование CSS-стилей чата бесплатно

В самом сообщении:

.user5 {
text-decoration:underline!important;
}
http://chatovod.ru - чат для вашего сайта

11 (2015-12-13 09:00:07 отредактировано web-дизайнер.)

Re: Редактирование CSS-стилей чата бесплатно

Можно я чуть чуть поправлю?

Admin пишет:

В самом сообщении:

.user5 {
text-decoration:underline!important;
}

Для того чтобы выделить "именно текст" определённого пользователя чата,
нужно прописать следующее (у Админа чата):

.chatMessage strong {
/* Выделенное сообщение Админа чата */
    background-color: #ffcc00;
    font-size: 14pt;
}

Если хотите закруглить углы у выделенного блока, добавьте вот такой код:
border-radius: 10px;

Для выделения персонального сообщения выделяется вся(е) строка(ки)

.chatMessage.chatMessageToMe {
/* Фон персональных сообщений нику (при указании ника) */
     background-color: #a3f7d0;
}

12

Re: Редактирование CSS-стилей чата бесплатно

У меня почему-то с вашими css ничего не подчёркивает, а выделяет всех подряд.

Re: Редактирование CSS-стилей чата бесплатно

aabbap пишет:

У меня почему-то с вашими css ничего не подчёркивает, а выделяет всех подряд.

То что не подчёркивает, правильно, там нет команды text-decoration.

14

Re: Редактирование CSS-стилей чата бесплатно

так и выделяет всех подряд, а не меня только

Re: Редактирование CSS-стилей чата бесплатно

Вот что должно получиться у вас:
https://img-fotki.yandex.ru/get/8/53870292.3/0_11c5b4_dc0f25ea_orig.gif
Правая колонка настраивается в другом классе.

16

Re: Редактирование CSS-стилей чата бесплатно

Да, спасибо, работает.

17 (2015-12-14 18:52:04 отредактировано C2H5OH)

Re: Редактирование CSS-стилей чата бесплатно

web-дизайнер.
Вот вот, и я об этом, только чтобы можно было делать у разных юзеров (с определённым выборочным ID), а не только у админа. Но идея сама верна!

18 (2015-12-15 05:33:47 отредактировано web-дизайнер.)

Re: Редактирование CSS-стилей чата бесплатно

Попробуйте такой код.
Этот код должен работать для VIP-пользователей, выделяет текст сообщения.

.chatMessage, > span {
     background-color: #99cc99;
}

(проверить смог только 1 раз, когда пришёл Вип пользователь.
сам зашёл потом своим вторым ником, этого эффекта не случилось,
ник обычный, не Вип).
Хотя рано утром пришёл вип пользователь, такого эффекта тоже не случилось.
Проведя более глубокий анализ, выяснилось, что, первый пользователь был
действительно ВИП, со значком в профиле, второй, что странно, был без значка VIP,
но, с градиентным ником. Таким образом, если в чат входит реальный VIP пользователь,
то, его сообщения должны быть выделены.
Если без запятой после Message, выделяются все ники цветом.

19 (2015-12-15 03:48:58 отредактировано web-дизайнер.)

Re: Редактирование CSS-стилей чата бесплатно

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

20

Re: Редактирование CSS-стилей чата бесплатно

А как головастиков делать? Как в чатаделике

21 (2015-12-15 15:05:20 отредактировано aabbap)

Re: Редактирование CSS-стилей чата бесплатно

И согласен с предыдущим оратором насчёт того, чтобы любому чатланину можно было сделать выделенные сообщения, а не только админу. Причём также по id, персонально.

22

Re: Редактирование CSS-стилей чата бесплатно

web-дизайнер. пишет:

.chatMessage strong {
/* Выделенное сообщение Админа чата */
    background-color: #ffcc00;
    font-size: 14pt;
}

Этот код у меня работает почему-то не для Админа, а для всех ВИПов

23 (2015-12-15 14:57:51 отредактировано aabbap)

Re: Редактирование CSS-стилей чата бесплатно

web-дизайнер. пишет:

Попробуйте такой код.
Этот код должен работать для VIP-пользователей, выделяет текст сообщения.

.chatMessage, > span {
     background-color: #99cc99;
}

Вообще не работает, ни с запятой, ни без запятой

24 (2015-12-15 15:10:48 отредактировано Businka)

Re: Редактирование CSS-стилей чата бесплатно

Подскажите пожалуйста, а как заменить форму неактивной вкладки в чате? У меня получилось только одну заменить. Неактивная осталась квадратной.  Нахимичила, сама не пойму что)).
Хочу сделать полукруглыми.
http://data2.floomby.com/files/share/15 … Sa3VaQ.jpg
И второй вопрос, можно ли сделать название чата в шапке рамкой с фоном, это возможно? А то название чата плохо видно.

Re: Редактирование CSS-стилей чата бесплатно

Вот получилось таки сделать код для обычных пользователей:

.chatMessage > span {
/* Выделенное сообщение пользователя (не VIP) */
    background-color: #99cc99;
    font-size: 14pt;
    border-radius: 10px;
}

Тот же самый код что и для админов, только вместо strong поставил span.