List of Classes and Objects

[Arya_79]

List of classes and objects being used in bluesky.qss
-----------------------------------------------------

QMainWindow
QWidget
QDialog
TextBrowser
QAbstractItemView
QTextEdit
QWidget#MainWindowServerTabsWidget
QWidget#MainWindowChatWidget

------- Splitter -------

QSplitter::handle
QSplitter::handle:horizontal
QSplitter::handle:vertical

QLineEdit
ChatLineEdit

------- PushButtons -------
You can use sub-controls hover, disabled and pressed.
Example:

QPushButton {
       background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop: 0 #6a96b9, stop: 1 #c2d7e1);
       border: 1px solid #0a057b;
       border-radius: 3px;
       padding-left: 14px; padding-right: 14px;
       padding-top: 3px; padding-bottom: 3px;
}

------- MenuBar and Menu -------
for the MenuBar and Menu use sub-controls like hover, selected, disabled

QMenuBar
QMenuBar::item

for example

QMenuBar::item:selected {
       background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #a5d3e8, stop: 1 #e9edef);
       color: #000;
}

QMenu
QMenu::item
QMenu::indicator
QMenu::indicator:non-exclusive:checked
QMenu::separator

------- ComboBox -------

QComboBox
QComboBox:!editable:on
QComboBox::drop-down:editable:on
QComboBox:on
QComboBox QAbstractItemView

For example to enlarge the utcLocalComboBox a bit:

QComboBox#utcLocalComboBox {
       padding-left: 14px;
       padding-right: 7px;
}

------- ListView -------
In the ListView the items have following sub-controls: selected:active and selectd:!active (!=not)

QListView
QListView::item

for example

QListView::item:selected:active {
       background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #505c78, stop: 1 #6f80aa);
       color: #fff;
       border: 1px solid transparent;
}
QListView::item:selected:!active {
       background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #c2d7e1, stop: 1 #ccc);
       color: #0a057b;
       border: 1px solid transparent;
}

QListWidget#identitiesListWidget

Do the same with ::indicator:unchecked & ::indicator:checked/undchecked:hover

QListWidget#pluginsListWidget::indicator:checked
QListView#ServerGroupsListView::indicator:checked

------- ToolBar -------

QToolBar

------- ToolButtons -------
Here found a list of all ToolButtons that i customize

QToolButton
QToolButton[popupMode="1"]
QToolButton::menu-button
QToolButton#newBookmarkButton
QToolButton#newBookmarkFolderButton
QToolButton#removeBookmarkButton
QToolButton#serverQueryRunButton
QToolButton#serverQuerySingleStepsButton
QToolButton#serverQueryStopButton
QToolButton#serverQueryRestartButton
QToolButton#serverQueryAdvancedButton
QToolButton#serverQueryClearHighlightButton
QToolButton#newSQScriptButton
QToolButton#updateSQScriptButton
QToolButton#removeSQScriptButton
QToolButton#idAddButton
QToolButton#idRemoveButton
QToolButton#idSelectDefaultButton
QToolButton#idImportButton
QToolButton#idExportButton
QToolButton#addGroupButton
QToolButton#removeGroupButton
QToolButton#renameGroupButton
QToolButton#displayClientsButton
QToolButton#addClientButton
QToolButton#removeClientButton
QToolButton#makeCurrentChannelDefaultToolButton
QToolButton#improvedIdentityQualityButton
QToolButton#toolButtonIcon
QToolButton#TextFormatButton
QToolButton#searchClearButton
QToolButton#appScanImportButton
QToolButton#appScanReloadButton
QToolButton#fbDirUpButton
QToolButton#fbRootButton
QToolButton#fbRefreshButton
QToolButton#fbUploadButton
QToolButton#fbDownloadButton
QToolButton#fbCreateDirectoryButton
QToolButton#fbDeleteButton
QToolButton#fbFilterButton
QToolButton#descEditButton
QToolButton#fbViewIconsButton
QToolButton#fbViewListButton
QToolButton#filterGoButton
QToolButton#clientUpdateButton
QToolButton#filterClearButton
QToolButton#banAddButton
QToolButton#banRemoveButton
QToolButton#banEditButton
QToolButton#complainRemoveButton
QToolButton#foregroundColorSelectButton
QToolButton#backgroundColorSelectButton
QToolButton#EmoticonButton
QToolButton#iconToolButton
QToolButton#toolButtonBold
QToolButton#toolButtonItalic
QToolButton#toolButtonUnderLine
QToolButton#toolButtonFColor

------- TabBar -------

QTabBar

you can make the Tabs bigger when it´s selected like this, use it for Top and Bottom
for example

QTabBar::tab:selected:top {
       border-top-color: #0a057b;
       border-top-left-radius: 3px;
       border-top-right-radius: 3px;
       margin-top: 3px;
}

------- SpinBox -------

QSpinBox
QDoubleSpinBox#delayPTTSpinBox

------- TreeView -------

In the TreeView you can set an alternate background
for example

QTreeView {
       alternate-background-color: #d4eefb;
       border: 1px solid #000;
       show-decoration-selected: 1;
}
TreeView {
       background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #c2d7e1, stop:1 #eef5f9);
       qproperty-alternatingRowColors: 1;
       color:#000;
       border: none;
}

QTreeView
QTreeView::item

At this place i have to thank _,,.->DarkCode<-.,,_ for his help, to customize the TreeView!!!
If u want to customize QTreeView::branch, try this

QTreeView::branch:hover {
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a96b9, stop: 1.0 #c2d7e1);
}
/* QTreeView::branch:selected:!active -> wird vom :active übernommen */

QTreeView::branch:selected {
	background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop: 0 #505c78, stop: 1 #6f80aa);
}
QTreeView::branch:has-siblings:!adjoins-item {
	border-image: url(styles/bluesky/treeviewS0.png) 0;
}
QTreeView::branch:has-siblings:adjoins-item {
	border-image: url(styles/bluesky/treeviewW0.png) 0;
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
	border-image: url(styles/bluesky/treeviewF0.png) 0;
}
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
	border-image: none;
	image: url(styles/bluesky/treeviewP0.png);
}
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings  {
	border-image: none;
	image: url(styles/bluesky/treeviewM0.png);
}

Do the same with ::indicator:unchecked & ::indicator:checked/undchecked:hover

QTreeView#eventsTreeView::indicator:checked
QTreeView#permissionsTreeView::indicator:checked
QTreeWidget#appsTreeWidget::indicator:checked
QTreeWidget#clientsTreeWidget::indicator:checked

------- ScrollBar -------

Do the same with QScrollBar::horizontal

QScrollBar:vertical
QScrollBar::handle:vertical
QScrollBar::add-line:vertical
QScrollBar::sub-line:vertical

For the arrows, you must use pictures
for example

QScrollBar::up-arrow:vertical {
       background: url("styles/bluesky/up_arrow.png");
       background-repeat: none;
       left: 3px;
       top: 5px;
}

QScrollBar::up-arrow:vertical
QScrollBar::down-arrow:vertical
QScrollBar::add-page:vertical
QScrollBar::sub-page:vertical

------- HeaderView -------

QHeaderView::section

------- TableView -------

Example setting an alternate background:

QTableView {
       alternate-background-color: #d4eefb;
       border: 1px solid #000;
}
QTableView {
       selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #c2d7e1, stop:1 #e9edef);
       selection-color: #0a057b;
       qproperty-alternatingRowColors: 1;
       border: 1px solid #88b4d5;
       gridline-color: #88b4d5;
}

QTableView
QTableView::item

QStatusBar

Excluding background for specific elements because some UI controls because there are issues with linear gradient on Linux, Plastique and Cleanlooks:

QLabel
QCheckBox
QRadioButton
QGroupBox
QSlider
HeadlineLabel
QFrame#bookmarksTopFrame
QWidget#advancedWidget
QWidget#statusChangeWidget
QWidget#connectToWidget
QWidget#switchToWidget
QWidget#disableWidget
QWidget#activateWidget
QWidget#recordingWidget
ImprovedTabBarCloseButton
QWidget#avatarWidget
QWidget#ToolbarStretcher
QStackedWidget
one color used without lineargradient
QWidget#ConnectionInfoDialog
FriendFoeManager
ServerLogView
ClientLogView
FileBrowser
BookmarksManager
QWidget#UrlCatcherViewer
QWidget#ServerConnectionInfoDialog
LogDisplay
QDialog#BanDialog
QWidget#addPropertiesWidget
EmoticonsDisplay
QWidget#OfflineMessagesDialog
QWidget#sound3Dwidget
UserVolumeWidget
QWidget#sound3DTestWidget
QWidget#CustomizeToolbar
QWidget#ServerQueryView
QTextEdit#pluginDescTextEdit
QTextEdit#descriptionTextEdit
QTextEdit#vserverWelcomeTextEdit
QTextEdit#changeLogTextEdit
MainWindowServerTabsWidget
MainWindowChatWidget

Disabled Elements

QLineEdit:disabled
QComboBox:disabled
QSpinBox:disabled
QCheckBox:disabled
QRadioButton:disabled
QTextEdit:disabled

------- GroupBox------
Do the same with ::indicator:unchecked & ::indicator:checked/unchecked:hover
QGroupBox#advancedGroupBox::indicator:checked

------- SizeGrip -------

Example exchanging the sizegrip image:

QSizeGrip {
       background-color: transparent;
       image: url("styles/bluesky/sizegrip.png");
       width: 16px;
       height: 16px;
}

InfoFrame
QTextEdit#ChatTab

------- Setup Wizard -------

QWizard QWidget
QWizard QLabel

[Drayu]

very nice! This will be helpful to many!

[DarkCode]

Really good work!
Here a Thx from me too

very nice! This will be helpful to many!

[BioH4ZaRD]

very good work

do you have an update for QT 4.6.2 "?
would be great ..

Thank you very much ...

E.O.L. BioHaZaRD

[Arya_79]

Here u found the new link to Qt Stylesheet documentation...

http://qt.nokia.com/doc/4.6/stylesheet-examples.html

Have nice day
greetz Arya

[BioH4ZaRD]

hi Leutz

first thanks Arya_79 for the link

is it true that the

QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
	border-image: none;
	image: url(styles/bluesky/treeviewP0.png);
}

and not been writing

QTreeView::branch:closed:has-children:!has-siblings,
QTreeView::branch:closed:has-children:has-siblings {
	border-image: none;
	image: url(styles/bluesky/treeviewP0.png);
}

is !?!

E.O.L. BioHaZaRD

[DarkCode]

Yes.

...............

[coRpSE]

Nice work here,

Question, in the QTextEdit#ChatTab area, how would I go about editing the font color of the links and the user names, not the basic font color since that I already have done.

[Arya_79]

Sorry this is hard coded and u can´t change the font colors...

[DvdRom]

There's a new one that is missing here.

QToolButton#copyGroupButton

[Timo92]

Hi,

Thanks for this work.
How can i get all subcommand of Qwidget? Like Qwidget#PermissionsWidget wich not appears here

[Joe2012]

I must be really stupid but I want to make a skin but this is to much for me. Yea I'm stupid.

[kathleenh68]

Thank you for your post. It's very usefull.

[Wrath625]

You have a little tip since the Beta RC3

The Stylesheet Helper.

How it work :
- Settings > Options > Hotkey
- Click on "Add" button
- Click on "Show Advanced Actions" button

At the end of the list, you can see "Stylesheet Help", so add a hotkey for this.
Apply and close the option window.

Now put you mouse where you want and press the hotkey you assigned previously.
And you can see several usefull information about the part of the client where your mouse is.

Stumbled across this after endlessly searching for how to refer to obscure windows. Best. Thing. Ever.

[sakjustin]

Nice work here,

Question, in the QTextEdit#ChatTab area, how would I go about editing the font color of the links and the user names, not the basic font color since that I already have done.

Have there been any news regarding the link and user colors in QTextEdit#ChatTab? I would like to create a dark transparent theme, but red and blue are in that constellation very difficult to read.

Already tried this, but i didnt have success ....

QPalette::Link#ChatTab {
color: #bcbcbc;
font-weight: bold;
}

QPalette::LinkVisited#ChatTab {
color: #bcbcbc;
font-weight: bold;
}

Is it still hardcoded?