Psi Instant Messenger

Инструменты пользователя

Инструменты сайта

Вы посетили:
ru:skins_css

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
ru:skins_css [2010/09/07 19:25] – tux-denru:skins_css [2014/07/06 10:24] (текущий) – внешнее изменение 127.0.0.1
Строка 1: Строка 1:
 +====== CSS в Psi+ ======
 +
 ===== Вступление ===== ===== Вступление =====
  
 +В данной статье рассмотрены и приведены примеры использования [[http://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D1%8B%D0%B5_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9|CSS]] при оформлении скинов Psi+.
  
-В данной статье будут рассмотрены и приведены примеры использования [[http://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D1%8B%D0%B5_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9|CSS]] при оформлении скинов Psi+. 
  
 +Условно статья поделена на два больших раздела -- **Ростер** и **Чат**.
  
-Условно статья поделена на два больших раздела -- *Ростер* и *Чат*. 
  
- 
- 
----- 
 ===== Ростер ===== ===== Ростер =====
 +
 ==== QToolBar ==== ==== QToolBar ====
  
Строка 17: Строка 17:
 {{:psiplus_css_qtoolbar001.png|Окно ростера с выделенными панелями}} {{:psiplus_css_qtoolbar001.png|Окно ростера с выделенными панелями}}
  
----- 
  
  
Строка 29: Строка 28:
  
  
----- 
 ==== QLineEdit ==== ==== QLineEdit ====
  
  
  
-== QStackedWidget>QWidget>QLineEdit ==+=== QStackedWidget>QWidget>QLineEdit ===
  
 Строка ввода при поиске пользователей по ростеру: Строка ввода при поиске пользователей по ростеру:
Строка 42: Строка 40:
  
  
-== QLineEdit#le_status_text ==+=== QLineEdit#le_status_text ===
  
 Строка ввода статусного сообщения: Строка ввода статусного сообщения:
Строка 50: Строка 48:
  
  
----- 
 ==== QTreeView ==== ==== QTreeView ====
  
Строка 59: Строка 56:
  
  
-== alternate-background-color ==+=== alternate-background-color ===
 Чередующаяся раскраска областей фона ростера: Чередующаяся раскраска областей фона ростера:
  
Строка 66: Строка 63:
  
  
-== selection-background-color ==+=== selection-background-color ===
 Фон выбранного элемента ростера: Фон выбранного элемента ростера:
    
Строка 73: Строка 70:
  
  
-== selection-color ==+=== selection-color ===
 Цвет текста выбранного элемента ростера: Цвет текста выбранного элемента ростера:
  
Строка 80: Строка 77:
  
  
----- 
  
 ==== QLabel === ==== QLabel ===
Строка 86: Строка 82:
  
  
-== MLabel ==+=== MLabel ===
  
 Область оповещения о событиях Область оповещения о событиях
Строка 94: Строка 90:
  
  
-== QLabel#lb_nick ==+=== QLabel#lb_nick ===
  
 Область верхнего фрейма где расположен ник Область верхнего фрейма где расположен ник
Строка 102: Строка 98:
  
  
-== QLabel#lb_avatar == +=== QLabel#lb_avatar ===
  
 Аватар на верхней панели Аватар на верхней панели
Строка 110: Строка 106:
  
  
----- 
 ==== QToolButton ==== ==== QToolButton ====
  
-== QToolButton ==+=== QToolButton ===
  
 Кнопки на панелях: Кнопки на панелях:
Строка 121: Строка 116:
  
  
-== QToolButton#tb_mood ==+=== QToolButton#tb_mood ===
  
 Кнопка выбора настроения: Кнопка выбора настроения:
Строка 129: Строка 124:
  
  
-== QToolButton#tb_activity ==+=== QToolButton#tb_activity ===
  
 Кнопка выбора занятия: Кнопка выбора занятия:
Строка 137: Строка 132:
  
  
-== QToolButton#tb_status ==+=== QToolButton#tb_status ===
  
 Кнопка выбора статуса в верхней панели ростера: Кнопка выбора статуса в верхней панели ростера:
Строка 145: Строка 140:
  
  
----- 
 ==== QScrollBar ==== ==== QScrollBar ====
  
  
  
-== QScrollBar:vertical ==+=== QScrollBar:vertical ===
  
 Полоса вертикального скролбара: Полоса вертикального скролбара:
Строка 158: Строка 152:
  
  
-== QScrollBar::handle:vertical ==+=== QScrollBar::handle:vertical ===
  
 Бегунок вертикального скролбара: Бегунок вертикального скролбара:
Строка 166: Строка 160:
  
  
-== QScrollBar::add-line:vertical ==+=== QScrollBar::add-line:vertical ===
  
 Нижняя кнопка перемещения скролбара: Нижняя кнопка перемещения скролбара:
Строка 174: Строка 168:
  
  
-== QScrollBar::sub-line:vertical ==+=== QScrollBar::sub-line:vertical ===
  
 Верхняя кнопка перемещения скролбара: Верхняя кнопка перемещения скролбара:
Строка 180: Строка 174:
 {{:psiplus_css_qscrollbar_sub_line_vertical.png|Окно ростера с выделенной верхней кнопкой перемещения скролбара}} {{:psiplus_css_qscrollbar_sub_line_vertical.png|Окно ростера с выделенной верхней кнопкой перемещения скролбара}}
  
-----+
  
 ==== PsiContactListView ==== ==== PsiContactListView ====
Строка 188: Строка 182:
 {{:psiplus_css_psicontactlistview.png|Окно ростера с выделенной областью ростера где располагается список контактов}} {{:psiplus_css_psicontactlistview.png|Окно ростера с выделенной областью ростера где располагается список контактов}}
  
----- 
  
 ==== PopupActionButton ====  ==== PopupActionButton ==== 
Строка 196: Строка 189:
 {{:psiplus_css_popupactionbutton.png|Окно ростера с выделенной главной кнопкой Psi и продолговатой кнопкой статуса}} {{:psiplus_css_popupactionbutton.png|Окно ростера с выделенной главной кнопкой Psi и продолговатой кнопкой статуса}}
  
----- 
  
 ==== QMenu ====  ==== QMenu ==== 
Строка 204: Строка 196:
 {{:psiplus_css_qmenu.png|Окно ростера с выделенным главным меню}} {{:psiplus_css_qmenu.png|Окно ростера с выделенным главным меню}}
  
----- 
  
 ==== QMainWindow ==== ==== QMainWindow ====
Строка 212: Строка 203:
 {{:psiplus_css_qmainwindow.png|Окно ростера с выделенным фоном родительского виджета}} {{:psiplus_css_qmainwindow.png|Окно ростера с выделенным фоном родительского виджета}}
  
-----+ 
 + 
 + 
 + 
 ===== Чат ===== ===== Чат =====
 +
 ==== QWidget ==== ==== QWidget ====
  
Строка 230: Строка 226:
 Область ввода сообщения: Область ввода сообщения:
  
-{{:psiplus_css_qwidget_bottomframe_qwidget_qtextedit.png|Окно чата с выделенной областью ввода сообщения}}+{{:psiplus_css_qwidget_bottomframe_qwidget_qtextedit.png|Окно чата с выделенным фоном поля ввода сообщения}}
  
  
Строка 264: Строка 260:
 {{:psiplus_css_qwidget_pte_topic.png|Окно топика конференции с выделенной областью ввода текста}} {{:psiplus_css_qwidget_pte_topic.png|Окно топика конференции с выделенной областью ввода текста}}
  
-----+
 ==== QPushButton ==== ==== QPushButton ====
  
Строка 285: Строка 281:
 {{:psiplus_css_qpushbutton_pb_send.png|Окно чата с выделенной кнопкой отправки сообщения}} {{:psiplus_css_qpushbutton_pb_send.png|Окно чата с выделенной кнопкой отправки сообщения}}
  
-----+ 
 + 
 ==== QToolBar ==== ==== QToolBar ====
  
Строка 301: Строка 299:
 {{:psiplus_css_qtoolbar_toolbar.png|Окно чата с выделенной центральной панелью}} {{:psiplus_css_qtoolbar_toolbar.png|Окно чата с выделенной центральной панелью}}
  
-----+ 
  
 ==== QDialog ==== ==== QDialog ====
  
-Фон диалогового окна+Фон диалогового окна:
  
-{{:psiplus_css_qdialog001.png}}+{{:psiplus_css_qdialog001.png|Окно конфигуратора конференции с выделенным фоном}}
  
      
-{{:psiplus_css_qdialog002.png}}+{{:psiplus_css_qdialog002.png|Окно закладок конференции с выделенным фоном}}
      
  
-{{:psiplus_css_qdialog003.png}}+{{:psiplus_css_qdialog003.png|Окно топика конференции с выделенным фоном}}
  
  
-{{:psiplus_css_qdialog004.png}}+{{:psiplus_css_qdialog004.png|Окно диалога с выделенным фоном}}
  
  
Строка 322: Строка 321:
 === QDialog>QFrame === === QDialog>QFrame ===
  
-Фон области диалога с текстом+Фон области диалога с текстом:
  
-{{:psiplus_css_qdialog_qframe.png}}+{{:psiplus_css_qdialog_qframe.png|Окно закладки конференции с выделенным фоном текста}}
  
  
Строка 330: Строка 329:
 === QDialog>QLineEdit === === QDialog>QLineEdit ===
  
-Поле ввода в диалоговом окне+Поле ввода в диалоговом окне:
  
-{{:psiplus_css_qdialog_qlineedit.png}}+{{:psiplus_css_qdialog_qlineedit.png|Окно закладки конференции с выделенным фоном поля ввода текста}}
  
  
Строка 338: Строка 337:
 === QDialog QTabBar === === QDialog QTabBar ===
  
-Вкладки в диалоге настройки конференции+Вкладки в диалоге настройки конференции:
  
-{{:psiplus_css_qdialog_qtabbar.png}}+{{:psiplus_css_qdialog_qtabbar.png|Окно конфигуратора конференции с выделенным фоном области расположения табов}}
  
  
Строка 346: Строка 345:
 === QDialog#MUCConfig === === QDialog#MUCConfig ===
  
-Окно конфигуратора конференции:<br>+Окно конфигуратора конференции:
  
-{{:psiplus_css_qdialog_mucconfig.png}}+{{:psiplus_css_qdialog_mucconfig.png|Окно конфигуратора конференции с выделенным фоном}}
  
----- 
  
-==== QFrame ==== 
  
  
 +==== QFrame ====
  
 === QFrame#tv_affiliations === === QFrame#tv_affiliations ===
  
-Фон области окна таба со списком JID'ов в конфигураторе конференции +Фон области окна таба со списком JID'ов в конфигураторе конференции:
- +
-{{:psiplus_css_qframe_tv_affiliations.png}}+
  
 +{{:psiplus_css_qframe_tv_affiliations.png|Окно конфигуратора конференции с выделенным фоном области расположения jid'ов и ролей}}
  
  
 === QFrame#log === === QFrame#log ===
  
-Область чатлога +Область чатлога:
- +
-{{:psiplus_css_qframe_log.png}}+
  
 +{{:psiplus_css_qframe_log.png|Окно чата с выделенной областью чатлога}}
  
  
 === QFrame#topFrame === === QFrame#topFrame ===
  
-Верхняя часть окна чата вокруг чатлога и ростера конференции+Верхняя часть окна чата вокруг чатлога и ростера конференции: 
 + 
 +{{:psiplus_css_qframe_topframe.png|Окно чата с выделенной верхней частью окна чата вокруг чатлога и ростера конференции}} 
  
-{{:psiplus_css_qframe_topframe.png}} 
  
----- 
  
  
Строка 385: Строка 382:
 === QSplitter::handle === === QSplitter::handle ===
  
-Полоса изменения размера чатлога и поля ввода сообщения+Полоса изменения размера чатлога и поля ввода сообщения: 
 + 
 +{{:psiplus_css_qsplitter_handle.png|Окно чата с выделенными активными областями предназначенными для изменения размеров чатлога, строки ввода сообщения}}
  
-{{:psiplus_css_qsplitter_handle.png}} 
  
----- 
  
  
Строка 396: Строка 393:
 === QTabBar::tab:hover === === QTabBar::tab:hover ===
  
-Выбранный таб+Выбранный таб:
  
-{{:psiplus_css_qtabbar_tab_hover.png}}+{{:psiplus_css_qtabbar_tab_hover.png|Окно чата с выделенным выбранным табом }}
  
  
 === QTabBar::tab:selected === === QTabBar::tab:selected ===
  
-Активный таб+Активный таб:
  
-{{:psiplus_css_qtabbar_tab_selected.png}}+{{:psiplus_css_qtabbar_tab_selected.png|Окно чата с выделенным активным табом}}
  
  
 === QTabBar::tab === === QTabBar::tab ===
  
-Неактивный и невыбранный таб+Неактивный и невыбранный таб:
  
-{{:psiplus_css_qtabbar_tab.png}}+{{:psiplus_css_qtabbar_tab.png|Окно чата с выделенным неактивным и невыбранным табом}}
  
----- 
  
  
Строка 421: Строка 417:
 === QScrollBar:vertical === === QScrollBar:vertical ===
  
-Полоса вертикального скролбара+Полоса вертикального скролбара:
  
-{{:psiplus_css_qscrollbar_vertical__chat.png}}+{{:psiplus_css_qscrollbar_vertical__chat.png|Окно чата с выделенной полосой вертикального скролбара}}
  
  
 === QScrollBar::handle:vertical === === QScrollBar::handle:vertical ===
  
-Бегунок вертикального скролбара+Бегунок вертикального скролбара:
  
-{{:psiplus_css_qscrollbar_handle_vertical__chat.png}}+{{:psiplus_css_qscrollbar_handle_vertical__chat.png|Окно чата с выделенным бегунком вертикального скролбара}}
  
  
 === QScrollBar::add-line:vertical === === QScrollBar::add-line:vertical ===
  
-Нижняя кнопка перемещения скролбара+Нижняя кнопка перемещения скролбара:
  
-{{:psiplus_css_qscrollbar_add_line_vertical__chat.png}}+{{:psiplus_css_qscrollbar_add_line_vertical__chat.png|Окно чата с выделенной нижней кнопкой перемещения скролбара}}
  
  
 === QScrollBar::sub-line:vertical === === QScrollBar::sub-line:vertical ===
  
-Верхняя кнопка перемещения скролбара+Верхняя кнопка перемещения скролбара:
  
-{{:psiplus_css_qscrollbar_sub_line_vertical__chat.png}}+{{:psiplus_css_qscrollbar_sub_line_vertical__chat.png|Окно чата с выделенной верхней кнопкой перемещения скролбара}}
  
  
 === QScrollBar::add-line:vertical:pressed === === QScrollBar::add-line:vertical:pressed ===
  
-Нижняя нажатая кнопка перемещения скролбара+Нижняя нажатая кнопка перемещения скролбара:
  
-{{:psiplus_css_qscrollbar_add_line_vertical_pressed__chat.png}}+{{:psiplus_css_qscrollbar_add_line_vertical_pressed__chat.png|Окно чата с выделенной нижней нажатой кнопкой перемещения скролбара}}
  
  
 === QScrollBar::sub-line:vertical:pressed === === QScrollBar::sub-line:vertical:pressed ===
  
-Верхняя нажатая кнопка перемещения скролбара+Верхняя нажатая кнопка перемещения скролбара:
  
-{{:psiplus_css_qscrollbar_sub_line_vertical_pressed__chat.png}}+{{:psiplus_css_qscrollbar_sub_line_vertical_pressed__chat.png|Окно чата с выделенной верхней нажатой кнопкой перемещения скролбара}}
  
  
 === QScrollBar:horizontal === === QScrollBar:horizontal ===
  
-Полоса горизонтального скролбара+Полоса горизонтального скролбара:
  
-{{:psiplus_css_qscrollbar_horizontal__chat.png}}+{{:psiplus_css_qscrollbar_horizontal__chat.png|Окно конфигуратора с выделенной полосой горизонтального скролбара}}
  
  
 === QScrollBar::handle:horizontal === === QScrollBar::handle:horizontal ===
  
-Бегунок горизонтального скралбара+Бегунок горизонтального скралбара:
  
-{{:psiplus_css_qscrollbar_handle_horizontal__chat.png}}+{{:psiplus_css_qscrollbar_handle_horizontal__chat.png|Окно конфигуратора с выделенным бегунком горизонтального скралбара}}
  
  
 === QScrollBar::add-line:horizontal === === QScrollBar::add-line:horizontal ===
  
-Нижняя кнопка перемещения скролбара+Нижняя кнопка перемещения скролбара:
  
-{{:psiplus_css_qscrollbar_add_line_horizontal__chat.png}}+{{:psiplus_css_qscrollbar_add_line_horizontal__chat.png|Окно конфигуратора с выделенной правой кнопкой перемещения скролбара}}
  
  
 === QScrollBar::sub-line:horizontal === === QScrollBar::sub-line:horizontal ===
  
-Верхняя кнопка перемещения скролбара+Верхняя кнопка перемещения скролбара:
  
-{{:psiplus_css_qscrollbar_sub_line_horizontal__chat.png}}+{{:psiplus_css_qscrollbar_sub_line_horizontal__chat.png|Окно конфигуратора с выделенной левой кнопкой перемещения скролбара}}
  
  
 === QScrollBar::add-line:horizontal:pressed === === QScrollBar::add-line:horizontal:pressed ===
  
-Нижняя нажатая кнопка перемещения скролбара+Нижняя нажатая кнопка перемещения скролбара:
  
-{{:psiplus_css_qscrollbar_add_line_horizontal_pressed__chat.png}}+{{:psiplus_css_qscrollbar_add_line_horizontal_pressed__chat.png|Окно конфигуратора с выделенной правой нажатой кнопкой перемещения скролбара}}
  
  
 === QScrollBar::sub-line:horizontal:pressed === === QScrollBar::sub-line:horizontal:pressed ===
  
-Верхняя нажатая кнопка перемещения скролбара+Верхняя нажатая кнопка перемещения скролбара: 
 + 
 +{{:psiplus_css_qscrollbar_sub_line_horizontal_pressed__chat.png|Окно конфигуратора с выделенной левой нажатой кнопкой перемещения скролбара}}
  
-{{:psiplus_css_qscrollbar_sub_line_horizontal_pressed__chat.png}} 
  
----- 
  
  
Строка 509: Строка 505:
 === QLabel#lb_count === === QLabel#lb_count ===
  
-Счётчик символов+Счётчик символов:
  
-{{:psiplus_css_qlabel_lb_count.png}}+{{:psiplus_css_qlabel_lb_count.png|Окно чата с выделеным счетчиком символов}}
  
  
 === QLabel#lb_ident === === QLabel#lb_ident ===
  
-Идентификатор аккаунта+Идентификатор аккаунта:
  
-{{:psiplus_css_qlabel_lb_ident.png}} +{{:psiplus_css_qlabel_lb_ident.png|Окно чата с выделенным идентификатором аккаунта}}
- +
-----+
  
  
Строка 527: Строка 521:
 === QLineEdit#le_topic === === QLineEdit#le_topic ===
  
-Строка топика+Строка топика:
  
-{{:psiplus_css_qlineedit_le_topic.png}}+{{:psiplus_css_qlineedit_le_topic.png|Окно чата с выделенной строкой топика}}
  
  
 === QLineEdit#le_jid === === QLineEdit#le_jid ===
  
-Строка с JID'ом собеседника+Строка с JID'ом собеседника:
  
-{{:psiplus_css_qlineedit_le_jid.png}}+{{:psiplus_css_qlineedit_le_jid.png|Окно чата с выделенной строкой JID'а собеседника}}
  
  
 === QLineEdit#le_filter === === QLineEdit#le_filter ===
  
-Поиск по JID'ам в конфигураторе конференции+Поиск по JID'ам в конфигураторе конференции: 
 + 
 +{{:psiplus_css_qlineedit_le_filter.png|Окно конфигуратора с выделенной строкой поиска}}
  
-{{:psiplus_css_qlineedit_le_filter.png}} 
  
----- 
  
  
 ==== TabDlg ==== ==== TabDlg ====
  
-Рамка по границам окна чата+Рамка по границам окна чата: 
 + 
 +{{:psiplus_css_tabdlg.png|Окно чата с выделенным фоном}}
  
-{{:psiplus_css_tabdlg.png}} 
  
----- 
  
  
 ==== PsiTabBar ==== ==== PsiTabBar ====
  
-Фон под вкладками открытых чатов+Фон под вкладками открытых чатов: 
 + 
 +{{:psiplus_css_psitabbar.png|Окно чата с выделенной областью расположения вкладок}} 
 + 
  
-{{:psiplus_css_psitabbar.png}} 
  
----- 
 ==== GroupchatTopicDlg ==== ==== GroupchatTopicDlg ====
  
Строка 570: Строка 566:
 {{:psiplus_css_groupchattopicdlg.png|Окно топика конференции}} {{:psiplus_css_groupchattopicdlg.png|Окно топика конференции}}
  
-----+
  
 ==== QToolButton ==== ==== QToolButton ====
Строка 578: Строка 574:
 {{:psiplus_css_qtoolbutton.png|Окно чата с выделенными кнопками на центральной панели}} {{:psiplus_css_qtoolbutton.png|Окно чата с выделенными кнопками на центральной панели}}
  
-----+ 
  
 ==== Q3ListView ==== ==== Q3ListView ====
Строка 586: Строка 583:
 {{:psiplus_css_q3listview.png|Окно чата с выделенным фоном ростера конференции}} {{:psiplus_css_q3listview.png|Окно чата с выделенным фоном ростера конференции}}
  
-----+ 
  
 ==== TypeAheadFindBar>QLineEdit ====  ==== TypeAheadFindBar>QLineEdit ==== 
Строка 593: Строка 591:
  
 {{:psiplus_css_typeaheadfindbar_qlineedit.png|Окно чата с выделенной строкой поиска}} {{:psiplus_css_typeaheadfindbar_qlineedit.png|Окно чата с выделенной строкой поиска}}
- 
----- 
- 
 ==== QMenu ==== ==== QMenu ====
  
Строка 602: Строка 597:
 {{:psiplus_css_qmenu__chat.png|Окно чата с выделенным выпадающим контекстным меню}} {{:psiplus_css_qmenu__chat.png|Окно чата с выделенным выпадающим контекстным меню}}
  
-----+==== HeaderFrame ====
  
 +=== QFrame#headerFrame ===
 +Фрейм заголовка
 +=== QToolButton#hideButton ===
 +Кнопка свернуть 
 +=== QToolButton#maximizeButton ===
 +Кнопка развернуть 
 +=== QToolButton#closeButton ===
 +Кнопка закрыть 
  
  
-*СТРАНИЦА НЕ ЗАКОНЧЕНА И НАХОДИТСЯ В ПРОЦЕССЕ ВЁРСТКИ!* 
ru/skins_css.1283887551.txt.gz · Последнее изменение: 2010/10/17 15:36 (внешнее изменение)
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki