CSS в Psi+

В данной статье рассмотрены и приведены примеры использования CSS при оформлении скинов Psi+.

Условно статья поделена на два больших раздела – Ростер и Чат.

Нижняя панель ростера с кнопками:

Виджет, содержащий элементы ростера:

Строка ввода при поиске пользователей по ростеру:

Строка ввода статусного сообщения:

Настройка внешнего вида отдельного ника.

Чередующаяся раскраска областей фона ростера:

Фон выбранного элемента ростера:

Цвет текста выбранного элемента ростера:

Область оповещения о событиях

Область верхнего фрейма где расположен ник

Аватар на верхней панели

Кнопки на панелях:

Кнопка выбора настроения:

Кнопка выбора занятия:

Кнопка выбора статуса в верхней панели ростера:

Полоса вертикального скролбара:

Бегунок вертикального скролбара:

Нижняя кнопка перемещения скролбара:

Верхняя кнопка перемещения скролбара:

Область ростера где располагается список контактов:

Главная кнопка Psi и продолговатая кнопка статуса с названием статуса:

Главное меню:

Фон родительского виджета:

Область окна чата вокруг средней панели, поля ввода и кнопки отправки сообщения:

Область ввода сообщения:

Поле таба с JID'ами участников в конфигураторе конференции:

Поле таба *Настройка* в конфигураторе конференции:

Аватар собеседника:

Область ввода текста топика:

Кнопки в диалогах:

Кнопка вызова редактора топика:

Кнопка отправки сообщения:

Средняя панель и панель поиска:

Средняя панель отдельно:

Фон диалогового окна:

Фон области диалога с текстом:

Поле ввода в диалоговом окне:

Вкладки в диалоге настройки конференции:

Окно конфигуратора конференции:

Фон области окна таба со списком JID'ов в конфигураторе конференции:

Область чатлога:

Верхняя часть окна чата вокруг чатлога и ростера конференции:

Полоса изменения размера чатлога и поля ввода сообщения:

Выбранный таб:

Активный таб:

Неактивный и невыбранный таб:

Полоса вертикального скролбара:

Бегунок вертикального скролбара:

Нижняя кнопка перемещения скролбара:

Верхняя кнопка перемещения скролбара:

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

Верхняя нажатая кнопка перемещения скролбара:

Полоса горизонтального скролбара:

Бегунок горизонтального скралбара:

Нижняя кнопка перемещения скролбара:

Верхняя кнопка перемещения скролбара:

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

Верхняя нажатая кнопка перемещения скролбара:

Счётчик символов:

Идентификатор аккаунта:

Строка топика:

Строка с JID'ом собеседника:

Поиск по JID'ам в конфигураторе конференции:

Рамка по границам окна чата:

Фон под вкладками открытых чатов:

Окно топика конференции:

Кнопки на средней панели инструментов:

Фон ростера конференции:

Строка поиска на панели поиска:

Выпадающее контекстное меню на заголовке таба:

Фрейм заголовка

Кнопка свернуть

Кнопка развернуть

Кнопка закрыть