Psi Instant Messenger

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

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

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

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

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

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

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

• *alternate-background-color* - чередующаяся раскраска областей фона ростера:

• *selection-background-color* - фон выбранного элемента ростера:

• *selection-color* - цвет текста выбранного элемента ростера:

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

psiplus_css_qlabel_mlabel.png_qlabel

Аватар на верхней панели:<br>

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

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

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

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

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

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

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

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

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

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

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

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

= Чат =

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

{{psiplus_css_qwidget_bottomframe.png

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

{{psiplus_css_qwidget_bottomframe_qwidget_qtextedit.png

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

{{psiplus_css_qwidget_tab_affiliations.png

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

{{psiplus_css_qwidget_tab_general.png

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

{{psiplus_css_qwidget_avatar.png

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

{{psiplus_css_qwidget_pte_topic.png

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

{{psiplus_css_qpushbutton.png

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

{{psiplus_css_qpushbutton_pb_topic.png

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

{{psiplus_css_qpushbutton_pb_send.png

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

{{psiplus_css_qtoolbar.png

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

{{psiplus_css_qtoolbar_toolbar.png

Фон диалогового окна:<br>

{{psiplus_css_qdialog001.png<br>

{{psiplus_css_qdialog002.png<br>

{{psiplus_css_qdialog003.png<br>

{{psiplus_css_qdialog004.png

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

{{psiplus_css_qdialog_qframe.png

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

{{psiplus_css_qdialog_qlineedit.png

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

{{psiplus_css_qdialog_qtabbar.png

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

{{psiplus_css_qdialog_mucconfig.png

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

{{psiplus_css_qframe_tv_affiliations.png

Область чатлога:<br>

{{psiplus_css_qframe_log.png

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

{{psiplus_css_qframe_topframe.png

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

{{psiplus_css_qsplitter_handle.png

Выбранный таб:<br>

{{psiplus_css_qtabbar_tab_hover.png

Активный таб:<br>

{{psiplus_css_qtabbar_tab_selected.png

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

{{psiplus_css_qtabbar_tab.png

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

{{psiplus_css_qscrollbar_vertical__chat.png

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

{{psiplus_css_qscrollbar_handle_vertical__chat.png

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

{{psiplus_css_qscrollbar_add_line_vertical__chat.png

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

{{psiplus_css_qscrollbar_sub_line_vertical__chat.png

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

{{psiplus_css_qscrollbar_add_line_vertical_pressed__chat.png

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

{{psiplus_css_qscrollbar_sub_line_vertical_pressed__chat.png

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

{{psiplus_css_qscrollbar_horizontal__chat.png

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

{{psiplus_css_qscrollbar_handle_horizontal__chat.png

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

{{psiplus_css_qscrollbar_add_line_horizontal__chat.png

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

{{psiplus_css_qscrollbar_sub_line_horizontal__chat.png

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

{{psiplus_css_qscrollbar_add_line_horizontal_pressed__chat.png

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

{{psiplus_css_qscrollbar_sub_line_horizontal_pressed__chat.png

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

{{psiplus_css_qlabel_lb_count.png

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

{{psiplus_css_qlabel_lb_ident.png

Строка топика:<br>

{{psiplus_css_qlineedit_le_topic.png

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

{{psiplus_css_qlineedit_le_jid.png

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

{{psiplus_css_qlineedit_le_filter.png

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

{{psiplus_css_tabdlg.png

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

{{psiplus_css_psitabbar.png

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

{{psiplus_css_groupchattopicdlg.png

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

{{psiplus_css_qtoolbutton.png

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

{{psiplus_css_q3listview.png

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

{{psiplus_css_typeaheadfindbar_qlineedit.png

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

{{psiplus_css_qmenu__chat.png

*СТРАНИЦА НЕ ЗАКОНЧЕНА И НАХОДИТСЯ В ПРОЦЕССЕ ВЁРСТКИ!*

*Замеченные ошибки и предложения просьба указывать в комментариях ниже.*