1 Тема от Admin

  • Admin
  • Admin
  • работаю
  • Неактивен
  • Зарегистрирован: 2009-11-07
  • Сообщений: 2,384

Тема: Редактирование 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 - чат для вашего сайта

Сайт Admin

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

  • Зарегистрирован: 2014-10-11
  • Сообщений: 83

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

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

3 Ответ от ЗиУ-9

  • Откуда: Ярославль
  • Зарегистрирован: 2015-04-28
  • Сообщений: 29

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

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

Троллейбус

Сайт ЗиУ-9

  • Зарегистрирован: 2014-10-11
  • Сообщений: 83

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

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

5 Ответ от Admin

  • Admin
  • Admin
  • работаю
  • Неактивен
  • Зарегистрирован: 2009-11-07
  • Сообщений: 2,384

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

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

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

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

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

Сайт Admin

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

  • C2H5OH
  • C2H5OH
  • Member
  • Неактивен
  • Откуда: Лаборатория
  • Зарегистрирован: 2015-12-12
  • Сообщений: 13

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

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

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

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

Химическая технология и органический синтез
Подборка фоток по химии
Чат химиков

Сайт C2H5OH

7 Ответ от aabbap

  • aabbap
  • aabbap
  • Member
  • Неактивен
  • Зарегистрирован: 2012-07-24
  • Сообщений: 278

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

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

Чат Любовь
Как набрать 10 000 друзей в ВК за один день

8 Ответ от Admin

  • Admin
  • Admin
  • работаю
  • Неактивен
  • Зарегистрирован: 2009-11-07
  • Сообщений: 2,384

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

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

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

Сайт Admin

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

  • C2H5OH
  • C2H5OH
  • Member
  • Неактивен
  • Откуда: Лаборатория
  • Зарегистрирован: 2015-12-12
  • Сообщений: 13

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

Admin пишет:

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

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

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

Химическая технология и органический синтез
Подборка фоток по химии
Чат химиков

Сайт C2H5OH

10 Ответ от Admin

  • Admin
  • Admin
  • работаю
  • Неактивен
  • Зарегистрирован: 2009-11-07
  • Сообщений: 2,384

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

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

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

Сайт Admin

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

  • Зарегистрирован: 2014-10-11
  • Сообщений: 83

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 Ответ от aabbap

  • aabbap
  • aabbap
  • Member
  • Неактивен
  • Зарегистрирован: 2012-07-24
  • Сообщений: 278

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

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

Чат Любовь
Как набрать 10 000 друзей в ВК за один день
  • Зарегистрирован: 2014-10-11
  • Сообщений: 83

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

aabbap пишет:

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

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

14 Ответ от aabbap

  • aabbap
  • aabbap
  • Member
  • Неактивен
  • Зарегистрирован: 2012-07-24
  • Сообщений: 278

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

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

Чат Любовь
Как набрать 10 000 друзей в ВК за один день
  • Зарегистрирован: 2014-10-11
  • Сообщений: 83

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

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

16 Ответ от aabbap

  • aabbap
  • aabbap
  • Member
  • Неактивен
  • Зарегистрирован: 2012-07-24
  • Сообщений: 278

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

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

Чат Любовь
Как набрать 10 000 друзей в ВК за один день

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

  • C2H5OH
  • C2H5OH
  • Member
  • Неактивен
  • Откуда: Лаборатория
  • Зарегистрирован: 2015-12-12
  • Сообщений: 13

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

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

Химическая технология и органический синтез
Подборка фоток по химии
Чат химиков

Сайт C2H5OH

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

  • Зарегистрирован: 2014-10-11
  • Сообщений: 83

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

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

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

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

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

  • Зарегистрирован: 2014-10-11
  • Сообщений: 83

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

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

20 Ответ от aabbap

  • aabbap
  • aabbap
  • Member
  • Неактивен
  • Зарегистрирован: 2012-07-24
  • Сообщений: 278

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

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

Чат Любовь
Как набрать 10 000 друзей в ВК за один день

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

  • aabbap
  • aabbap
  • Member
  • Неактивен
  • Зарегистрирован: 2012-07-24
  • Сообщений: 278

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

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

Чат Любовь
Как набрать 10 000 друзей в ВК за один день

22 Ответ от aabbap

  • aabbap
  • aabbap
  • Member
  • Неактивен
  • Зарегистрирован: 2012-07-24
  • Сообщений: 278

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

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

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

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

Чат Любовь
Как набрать 10 000 друзей в ВК за один день

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

  • aabbap
  • aabbap
  • Member
  • Неактивен
  • Зарегистрирован: 2012-07-24
  • Сообщений: 278

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

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

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

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

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

Чат Любовь
Как набрать 10 000 друзей в ВК за один день

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

  • Businka
  • New member
  • Неактивен
  • Зарегистрирован: 2013-02-28
  • Сообщений: 8

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

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

  • Зарегистрирован: 2014-10-11
  • Сообщений: 83

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

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

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

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