====== CSS in Psi+ ======

===== Introduction =====

This article discusses and provides examples of using [[http://en.wikipedia.org/wiki/CSS|CSS]] при оформлении скинов Psi+.

Conditionally article is divided into two large sections -- **Roster** and **Chat**.


===== Roster =====

==== QToolBar ====

Bottom roster panel with buttons:

{{:psiplus_css_qtoolbar001.png|Bottom roster panel with buttons}}




==== QStackedWidget ====

The widget contains roster elements:

{{:psiplus_css_qstackedwidget.png|Window with roster which a dedicated widget containing roster elements}}



==== QLineEdit ====



=== QStackedWidget>QWidget>QLineEdit ===

String for enter text when roster users searching:

{{:psiplus_css_qstackedwidget_qwidget_qlineedit.png|Roster window with a dedicated search box on the roster}}



=== QLineEdit#le_status_text ===

String for enter status message:

{{:psiplus_css_qlineedit_le_status_text.png|Roster window with a dedicated line for enter status message}}



==== QTreeView ====

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



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

{{:psiplus_css_qtreeview_alternate_background_color.png|Щкно ростера с чередующейся раскраской областей фона ростера}}



=== selection-background-color ===
Фон выбранного элемента ростера:
 
{{:psiplus_css_qtreeview_selection_background_color.png|Окно ростера с выделенным фоном выбранного элемента ростера}}



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

{{:psiplus_css_qtreeview_selection_color.png|Окно ростера с измененным цветом выбранного элемента ростера}}




==== QLabel ===



=== MLabel ===

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

{{:psiplus_css_qlabel_mlabel.png|Окно ростера с выделенной областью оповещения о событиях}}



=== QLabel#lb_nick ===

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

{{:psiplus_css_qlabel_lb_nick.png|Окно ростера с выделенной областью где расположен ник}}



=== QLabel#lb_avatar ===

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

{{:psiplus_css_qlabel_lb_avatar.png|Окно ростера с выделенной областью где расположен аватар}}



==== QToolButton ====

=== QToolButton ===

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

{{:psiplus_css_qtoolbutton001.png|Окно ростера с выделенными кнопками на панелях}}



=== QToolButton#tb_mood ===

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

{{:psiplus_css_qtoolbutton_tb_mood.png|Окно ростера с выделенной кнопкой выбора настроений}}



=== QToolButton#tb_activity ===

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

{{:psiplus_css_qtoolbutton_tb_activity.png|Окно ростера с выделенной кнопкой выбора занятий}}



=== QToolButton#tb_status ===

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

{{:psiplus_css_qtoolbutton_tb_status.png|Окно ростера с выделенной кнопкой выбора статуса}}



==== QScrollBar ====



=== QScrollBar:vertical ===

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

{{:psiplus_css_qscrollbar_vertical.png|Окно ростера с выделенной полосой вертикального скролбара}}



=== QScrollBar::handle:vertical ===

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

{{:psiplus_css_qscrollbar_handle_vertical.png|Окно ростера с выделенным бегуноком вертикального скролбара}}



=== QScrollBar::add-line:vertical ===

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

{{:psiplus_css_qscrollbar_add_line_vertical.png|Окно ростера с выделенной нижней кнопкой перемещения скролбара}}



=== QScrollBar::sub-line:vertical ===

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

{{:psiplus_css_qscrollbar_sub_line_vertical.png|Окно ростера с выделенной верхней кнопкой перемещения скролбара}}



==== PsiContactListView ====

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

{{:psiplus_css_psicontactlistview.png|Окно ростера с выделенной областью ростера где располагается список контактов}}


==== PopupActionButton ==== 

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

{{:psiplus_css_popupactionbutton.png|Окно ростера с выделенной главной кнопкой Psi и продолговатой кнопкой статуса}}


==== QMenu ==== 

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

{{:psiplus_css_qmenu.png|Окно ростера с выделенным главным меню}}


==== QMainWindow ====

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

{{:psiplus_css_qmainwindow.png|Окно ростера с выделенным фоном родительского виджета}}






===== Чат =====

==== QWidget ====



=== QWidget#bottomFrame ===

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

{{:psiplus_css_qwidget_bottomframe.png|Окно чата с выделенной областью вокруг средней панели, поля ввода и кнопки отправки сообщения}}



=== QWidget#bottomFrame>QWidget>QTextEdit ===

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

{{:psiplus_css_qwidget_bottomframe_qwidget_qtextedit.png|Окно чата с выделенным фоном поля ввода сообщения}}



=== QWidget#tab_affiliations ===

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

{{:psiplus_css_qwidget_tab_affiliations.png|Окно конфигуратора конференции}}



=== QWidget#tab_general ===

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

{{:psiplus_css_qwidget_tab_general.png|Окно конфигуратора конференции}}



=== QWidget#avatar ===

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

{{:psiplus_css_qwidget_avatar.png|Окно чата с выделенной областью где расположен аватар}}



=== QWidget#pte_topic ===

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

{{:psiplus_css_qwidget_pte_topic.png|Окно топика конференции с выделенной областью ввода текста}}


==== QPushButton ====

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

{{:psiplus_css_qpushbutton.png|Окна чата и топика с выделенными кнопками}}


=== QPushButton#pb_topic ===

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

{{:psiplus_css_qpushbutton_pb_topic.png|Окно чата с выделенной кнопкой вызова редактора топика}}


=== QPushButton#pb_send ===

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

{{:psiplus_css_qpushbutton_pb_send.png|Окно чата с выделенной кнопкой отправки сообщения}}




==== QToolBar ====

=== QToolBar ===

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

{{:psiplus_css_qtoolbar.png|Окно чата с выделенными панелями инструментов}}


=== QToolBar#toolbar ===

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

{{:psiplus_css_qtoolbar_toolbar.png|Окно чата с выделенной центральной панелью}}




==== QDialog ====

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

{{:psiplus_css_qdialog001.png|Окно конфигуратора конференции с выделенным фоном}}

  
{{:psiplus_css_qdialog002.png|Окно закладок конференции с выделенным фоном}}
  

{{:psiplus_css_qdialog003.png|Окно топика конференции с выделенным фоном}}


{{:psiplus_css_qdialog004.png|Окно диалога с выделенным фоном}}



=== QDialog>QFrame ===

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

{{:psiplus_css_qdialog_qframe.png|Окно закладки конференции с выделенным фоном текста}}



=== QDialog>QLineEdit ===

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

{{:psiplus_css_qdialog_qlineedit.png|Окно закладки конференции с выделенным фоном поля ввода текста}}



=== QDialog QTabBar ===

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

{{:psiplus_css_qdialog_qtabbar.png|Окно конфигуратора конференции с выделенным фоном области расположения табов}}



=== QDialog#MUCConfig ===

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

{{:psiplus_css_qdialog_mucconfig.png|Окно конфигуратора конференции с выделенным фоном}}




==== QFrame ====

=== QFrame#tv_affiliations ===

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

{{:psiplus_css_qframe_tv_affiliations.png|Окно конфигуратора конференции с выделенным фоном области расположения jid'ов и ролей}}


=== QFrame#log ===

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

{{:psiplus_css_qframe_log.png|Окно чата с выделенной областью чатлога}}


=== QFrame#topFrame ===

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

{{:psiplus_css_qframe_topframe.png|Окно чата с выделенной верхней частью окна чата вокруг чатлога и ростера конференции}}





==== QSplitter ====

=== QSplitter::handle ===

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

{{:psiplus_css_qsplitter_handle.png|Окно чата с выделенными активными областями предназначенными для изменения размеров чатлога, строки ввода сообщения}}




==== QTabBar ====

=== QTabBar::tab:hover ===

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

{{:psiplus_css_qtabbar_tab_hover.png|Окно чата с выделенным выбранным табом }}


=== QTabBar::tab:selected ===

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

{{:psiplus_css_qtabbar_tab_selected.png|Окно чата с выделенным активным табом}}


=== QTabBar::tab ===

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

{{:psiplus_css_qtabbar_tab.png|Окно чата с выделенным неактивным и невыбранным табом}}



==== QScrollBar ====

=== QScrollBar:vertical ===

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

{{:psiplus_css_qscrollbar_vertical__chat.png|Окно чата с выделенной полосой вертикального скролбара}}


=== QScrollBar::handle:vertical ===

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

{{:psiplus_css_qscrollbar_handle_vertical__chat.png|Окно чата с выделенным бегунком вертикального скролбара}}


=== QScrollBar::add-line:vertical ===

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

{{:psiplus_css_qscrollbar_add_line_vertical__chat.png|Окно чата с выделенной нижней кнопкой перемещения скролбара}}


=== QScrollBar::sub-line:vertical ===

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

{{:psiplus_css_qscrollbar_sub_line_vertical__chat.png|Окно чата с выделенной верхней кнопкой перемещения скролбара}}


=== QScrollBar::add-line:vertical:pressed ===

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

{{:psiplus_css_qscrollbar_add_line_vertical_pressed__chat.png|Окно чата с выделенной нижней нажатой кнопкой перемещения скролбара}}


=== QScrollBar::sub-line:vertical:pressed ===

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

{{:psiplus_css_qscrollbar_sub_line_vertical_pressed__chat.png|Окно чата с выделенной верхней нажатой кнопкой перемещения скролбара}}


=== QScrollBar:horizontal ===

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

{{:psiplus_css_qscrollbar_horizontal__chat.png|Окно конфигуратора с выделенной полосой горизонтального скролбара}}


=== QScrollBar::handle:horizontal ===

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

{{:psiplus_css_qscrollbar_handle_horizontal__chat.png|Окно конфигуратора с выделенным бегунком горизонтального скралбара}}


=== QScrollBar::add-line:horizontal ===

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

{{:psiplus_css_qscrollbar_add_line_horizontal__chat.png|Окно конфигуратора с выделенной правой кнопкой перемещения скролбара}}


=== QScrollBar::sub-line:horizontal ===

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

{{:psiplus_css_qscrollbar_sub_line_horizontal__chat.png|Окно конфигуратора с выделенной левой кнопкой перемещения скролбара}}


=== QScrollBar::add-line:horizontal:pressed ===

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

{{:psiplus_css_qscrollbar_add_line_horizontal_pressed__chat.png|Окно конфигуратора с выделенной правой нажатой кнопкой перемещения скролбара}}


=== QScrollBar::sub-line:horizontal:pressed ===

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

{{:psiplus_css_qscrollbar_sub_line_horizontal_pressed__chat.png|Окно конфигуратора с выделенной левой нажатой кнопкой перемещения скролбара}}




==== QLabel ====

=== QLabel#lb_count ===

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

{{:psiplus_css_qlabel_lb_count.png|Окно чата с выделеным счетчиком символов}}


=== QLabel#lb_ident ===

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

{{:psiplus_css_qlabel_lb_ident.png|Окно чата с выделенным идентификатором аккаунта}}


==== QLineEdite ====

=== QLineEdit#le_topic ===

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

{{:psiplus_css_qlineedit_le_topic.png|Окно чата с выделенной строкой топика}}


=== QLineEdit#le_jid ===

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

{{:psiplus_css_qlineedit_le_jid.png|Окно чата с выделенной строкой JID'а собеседника}}


=== QLineEdit#le_filter ===

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

{{:psiplus_css_qlineedit_le_filter.png|Окно конфигуратора с выделенной строкой поиска}}




==== TabDlg ====

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

{{:psiplus_css_tabdlg.png|Окно чата с выделенным фоном}}




==== PsiTabBar ====

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

{{:psiplus_css_psitabbar.png|Окно чата с выделенной областью расположения вкладок}}




==== GroupchatTopicDlg ====

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

{{:psiplus_css_groupchattopicdlg.png|Окно топика конференции}}



==== QToolButton ====

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

{{:psiplus_css_qtoolbutton.png|Окно чата с выделенными кнопками на центральной панели}}




==== Q3ListView ====

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

{{:psiplus_css_q3listview.png|Окно чата с выделенным фоном ростера конференции}}




==== TypeAheadFindBar>QLineEdit ==== 

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

{{:psiplus_css_typeaheadfindbar_qlineedit.png|Окно чата с выделенной строкой поиска}}



==== QMenu ====

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

{{:psiplus_css_qmenu__chat.png|Окно чата с выделенным выпадающим контекстным меню}}