This is an old revision of the document!
#summary|CSS for Psi+ skins (ru). #labels Phase-Design,Phase-Implementation
= Вступление =
В данной статье будут рассмотрены и приведены примеры использования CSS при оформлении скинов Psi+.
Условно статья поделена на два больших раздела – *Ростер* и *Чат*.
= Ростер =
QToolBar
Нижняя панель ростера с кнопками:<br>
{{psiplus_css_qtoolbar001.png
QStackedWidget
Виджет, содержащий элементы ростера:<br>
{{psiplus_css_qstackedwidget.png
QLineEdit
QStackedWidget>QWidget>QLineEdit
Строка ввода при поиске пользователей по ростеру:<br>
{{psiplus_css_qstackedwidget_qwidget_qlineedit.png
QLineEdit#le_status_text
Строка ввода статусного сообщения:<br>
{{psiplus_css_qlineedit_le_status_text.png
QTreeView
Настройка внешнего вида отдельного ника.
- *alternate-background-color* - чередующаяся раскраска областей фона ростера:<br>
{{psiplus_css_qtreeview_alternate_background_color.png * *selection-background-color* - фон выбранного элемента ростера:<br> {{psiplus_css_qtreeview_selection_background_color.png * *selection-color* - цвет текста выбранного элемента ростера:<br> {{psiplus_css_qtreeview_selection_color.png ---- == QLabel == === MLabel === Область оповещения о событиях:<br> {{psiplus_css_qlabel_mlabel.png === QLabel#lb_nick === Область верхнего фрейма где расположен ник:<br> {{psiplus_css_qlabel_lb_nick.png === QLabel#lb_avatar === Аватар на верхней панели:<br> {{psiplus_css_qlabel_lb_avatar.png ---- == QToolButton == Кнопки на панелях:<br> {{psiplus_css_qtoolbutton001.png === QToolButton#tb_mood === Кнопка выбора настроения:<br> {{psiplus_css_qtoolbutton_tb_mood.png === QToolButton#tb_activity === Кнопка выбора занятия:<br> {{psiplus_css_qtoolbutton_tb_activity.png === QToolButton#tb_status === Кнопка выбора статуса в верхней панели ростера:<br> {{psiplus_css_qtoolbutton_tb_status.png ---- == QScrollBar == === QScrollBar:vertical === Полоса вертикального скролбара:<br> {{psiplus_css_qscrollbar_vertical.png === QScrollBar::handle:vertical === Бегунок вертикального скролбара:<br> {{psiplus_css_qscrollbar_handle_vertical.png === QScrollBar::add-line:vertical === Нижняя кнопка перемещения скролбара:<br> {{psiplus_css_qscrollbar_add_line_vertical.png === QScrollBar::sub-line:vertical === Верхняя кнопка перемещения скролбара:<br> {{psiplus_css_qscrollbar_sub_line_vertical.png === `PsiContactListView` === Область ростера где располагается список контактов:<br> {{psiplus_css_psicontactlistview.png === `PopupActionButton` === Главная кнопка Psi и продолговатая кнопка статуса с названием статуса:<br> {{psiplus_css_popupactionbutton.png === QMenu === Главное меню:<br> {{psiplus_css_qmenu.png === QMainWindow === Фон родительского виджета:<br> {{psiplus_css_qmainwindow.png ---- ---- = Чат = == QWidget == === QWidget#bottomFrame === Область окна чата вокруг средней панели, поля ввода и кнопки отправки сообщения:<br> {{psiplus_css_qwidget_bottomframe.png === QWidget#bottomFrame>QWidget>QTextEdit === Область ввода сообщения:<br> {{psiplus_css_qwidget_bottomframe_qwidget_qtextedit.png === QWidget#tab_affiliations === Поле таба с JID'ами участников в конфигураторе конференции:<br> {{psiplus_css_qwidget_tab_affiliations.png === QWidget#tab_general === Поле таба *Настройка* в конфигураторе конференции:<br> {{psiplus_css_qwidget_tab_general.png === QWidget#avatar === Аватар собеседника:<br> {{psiplus_css_qwidget_avatar.png === QWidget#pte_topic === Область ввода текста топика:<br> {{psiplus_css_qwidget_pte_topic.png ---- == QPushButton == Кнопки в диалогах:<br> {{psiplus_css_qpushbutton.png === QPushButton#pb_topic === Кнопка вызова редактора топика:<br> {{psiplus_css_qpushbutton_pb_topic.png === QPushButton#pb_send === Кнопка отправки сообщения:<br> {{psiplus_css_qpushbutton_pb_send.png ---- == QToolBar == Средняя панель и панель поиска:<br> {{psiplus_css_qtoolbar.png === QToolBar#toolbar === Средняя панель отдельно:<br> {{psiplus_css_qtoolbar_toolbar.png ---- == QDialog == Фон диалогового окна:<br> {{psiplus_css_qdialog001.png<br> {{psiplus_css_qdialog002.png<br> {{psiplus_css_qdialog003.png<br> {{psiplus_css_qdialog004.png === QDialog>QFrame === Фон области диалога с текстом:<br> {{psiplus_css_qdialog_qframe.png === QDialog>QLineEdit === Поле ввода в диалоговом окне:<br> {{psiplus_css_qdialog_qlineedit.png === QDialog QTabBar === Вкладки в диалоге настройки конференции:<br> {{psiplus_css_qdialog_qtabbar.png === QDialog#MUCConfig === Окно конфигуратора конференции:<br> {{psiplus_css_qdialog_mucconfig.png ---- == QFrame == === QFrame#tv_affiliations === Фон области окна таба со списком JID'ов в конфигураторе конференции:<br> {{psiplus_css_qframe_tv_affiliations.png === QFrame#log === Область чатлога:<br> {{psiplus_css_qframe_log.png === QFrame#topFrame === Верхняя часть окна чата вокруг чатлога и ростера конференции:<br> {{psiplus_css_qframe_topframe.png ---- == QSplitter == === QSplitter::handle === Полоса изменения размера чатлога и поля ввода сообщения:<br> {{psiplus_css_qsplitter_handle.png ---- == QTabBar == === QTabBar::tab:hover === Выбранный таб:<br> {{psiplus_css_qtabbar_tab_hover.png === QTabBar::tab:selected === Активный таб:<br> {{psiplus_css_qtabbar_tab_selected.png === QTabBar::tab === Неактивный и невыбранный таб:<br> {{psiplus_css_qtabbar_tab.png ---- == QScrollBar == === QScrollBar:vertical === Полоса вертикального скролбара:<br> {{psiplus_css_qscrollbar_vertical__chat.png === QScrollBar::handle:vertical === Бегунок вертикального скролбара:<br> {{psiplus_css_qscrollbar_handle_vertical__chat.png === QScrollBar::add-line:vertical === Нижняя кнопка перемещения скролбара:<br> {{psiplus_css_qscrollbar_add_line_vertical__chat.png === QScrollBar::sub-line:vertical === Верхняя кнопка перемещения скролбара:<br> {{psiplus_css_qscrollbar_sub_line_vertical__chat.png === QScrollBar::add-line:vertical:pressed === Нижняя нажатая кнопка перемещения скролбара:<br> {{psiplus_css_qscrollbar_add_line_vertical_pressed__chat.png === QScrollBar::sub-line:vertical:pressed === Верхняя нажатая кнопка перемещения скролбара:<br> {{psiplus_css_qscrollbar_sub_line_vertical_pressed__chat.png === QScrollBar:horizontal === Полоса горизонтального скролбара:<br> {{psiplus_css_qscrollbar_horizontal__chat.png === QScrollBar::handle:horizontal === Бегунок горизонтального скралбара:<br> {{psiplus_css_qscrollbar_handle_horizontal__chat.png === QScrollBar::add-line:horizontal === Нижняя кнопка перемещения скролбара:<br> {{psiplus_css_qscrollbar_add_line_horizontal__chat.png === QScrollBar::sub-line:horizontal === Верхняя кнопка перемещения скролбара:<br> {{psiplus_css_qscrollbar_sub_line_horizontal__chat.png === QScrollBar::add-line:horizontal:pressed === Нижняя нажатая кнопка перемещения скролбара:<br> {{psiplus_css_qscrollbar_add_line_horizontal_pressed__chat.png === QScrollBar::sub-line:horizontal:pressed === Верхняя нажатая кнопка перемещения скролбара:<br> {{psiplus_css_qscrollbar_sub_line_horizontal_pressed__chat.png ---- == QLabel == === QLabel#lb_count === Счётчик символов:<br> {{psiplus_css_qlabel_lb_count.png === QLabel#lb_ident === Идентификатор аккаунта:<br> {{psiplus_css_qlabel_lb_ident.png ---- == QLineEdite == === QLineEdit#le_topic === Строка топика:<br> {{psiplus_css_qlineedit_le_topic.png === QLineEdit#le_jid === Строка с JID'ом собеседника:<br> {{psiplus_css_qlineedit_le_jid.png === QLineEdit#le_filter === Поиск по JID'ам в конфигураторе конференции:<br> {{psiplus_css_qlineedit_le_filter.png == `TabDlg` == Рамка по границам окна чата:<br> {{psiplus_css_tabdlg.png == `PsiTabBar` == Фон под вкладками открытых чатов:<br> {{psiplus_css_psitabbar.png == `GroupchatTopicDlg` == Окно топика конференции:<br> {{psiplus_css_groupchattopicdlg.png == QToolButton == Кнопки на средней панели инструментов:<br> {{psiplus_css_qtoolbutton.png == `Q3ListView` == Фон ростера конференции:<br> {{psiplus_css_q3listview.png == `TypeAheadFindBar>QLineEdit` == Строка поиска на панели поиска:<br> {{psiplus_css_typeaheadfindbar_qlineedit.png == QMenu == Выпадающее контекстное меню на заголовке таба:<br> {{psiplus_css_qmenu__chat.png ---- *СТРАНИЦА НЕ ЗАКОНЧЕНА И НАХОДИТСЯ В ПРОЦЕССЕ ВЁРСТКИ!* *Замеченные ошибки и предложения просьба указывать в комментариях ниже.*