<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- /home/gvatteka/dev/qt-4.3/doc/src/stylesheet.qdoc -->
<head>
<title>Qt Style Sheets Examples</title>
<link href="classic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 align="center">Qt Style Sheets Examples<br /><small></small></h1>
<ul><li><a href="#style-sheet-usage">Style Sheet Usage</a></li>
<ul><li><a href="#customizing-the-foreground-and-background-colors">Customizing the Foreground and Background Colors</a></li>
<li><a href="#customizing-a-qpushbutton-using-the-box-model">Customizing a QPushButton Using the Box Model</a></li>
<li><a href="#customizing-the-qpushbutton-s-menu-indicator-sub-control">Customizing the QPushButton's Menu Indicator Sub-Control</a></li>
<li><a href="#complex-selector-example">Complex Selector Example</a></li>
</ul>
<li><a href="#customizing-specific-widgets">Customizing specific widgets</a></li>
<ul><li><a href="#customizing-qabstractscrollarea">Customizing QAbstractScrollArea</a></li>
<li><a href="#customizing-qcheckbox">Customizing QCheckBox</a></li>
<li><a href="#customizing-qcombobox">Customizing QComboBox</a></li>
<li><a href="#customizing-qspinbox">Customizing QSpinBox</a></li>
<li><a href="#customizing-qframe">Customizing QFrame</a></li>
<li><a href="#customizing-qgroupbox">Customizing QGroupBox</a></li>
<li><a href="#customizing-qheaderview">Customizing QHeaderView</a></li>
<li><a href="#customizing-qlineedit">Customizing QLineEdit</a></li>
<li><a href="#customizing-qmenu">Customizing QMenu</a></li>
<li><a href="#customizing-qmenubar">Customizing QMenuBar</a></li>
<li><a href="#customizing-qprogressbar">Customizing QProgressBar</a></li>
<li><a href="#customizing-qpushbutton">Customizing QPushButton</a></li>
<li><a href="#customizing-qradiobutton">Customizing QRadioButton</a></li>
<li><a href="#customizing-qscrollbar">Customizing QScrollBar</a></li>
<li><a href="#customizing-qsizegrip">Customizing QSizeGrip</a></li>
<li><a href="#customizing-qslider">Customizing QSlider</a></li>
<li><a href="#customizing-qsplitter">Customizing QSplitter</a></li>
<li><a href="#customizing-qstatusbar">Customizing QStatusBar</a></li>
<li><a href="#customizing-qtabwidget-and-qtabbar">Customizing QTabWidget and QTabBar</a></li>
<li><a href="#customizing-qtablewidget">Customizing QTableWidget</a></li>
<li><a href="#customizing-qtoolbar">Customizing QToolBar</a></li>
<li><a href="#customizing-qtoolbutton">Customizing QToolButton</a></li>
<li><a href="#customizing-qtreeview">Customizing QTreeView</a></li>
</ul>
</ul>
<a name="style-sheet-usage"></a>
<h2>Style Sheet Usage</h2>
<p>We will now see a few examples to get started with using Qt Style Sheets.</p>
<a name="customizing-the-foreground-and-background-colors"></a>
<h3>Customizing the Foreground and Background Colors</h3>
<p>Let's start by setting yellow as the background color of all <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a>s in an application. This could be achieved like this:</p>
<pre> qApp->setStyleSheet("QLineEdit { background-color: yellow }");</pre>
<p>If we want the property to apply only to the <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a>s that are children (or grandchildren or grand-grandchildren) of a specific dialog, we would rather do this:</p>
<pre> myDialog->setStyleSheet("QLineEdit { background-color: yellow }");</pre>
<p>If we want the property to apply only to one specific <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a>, we can give it a name using QObject::setObjectName() and use an ID Selector to refer to it:</p>
<pre> myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");</pre>
<p>Alternatively, we can set the <a href="stylesheet-reference.html#background-prop">background-color</tt></a> property directly on the <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a>, omitting the selector:</p>
<pre> nameEdit->setStyleSheet("background-color: yellow");</pre>
<p>To ensure a good contrast, we should also specify a suitable color for the text:</p>
<pre> nameEdit->setStyleSheet("color: blue; background-color: yellow");</pre>
<p>It might be a good idea to change the colors used for selected text as well:</p>
<pre> nameEdit->setStyleSheet("color: blue;"
"background-color: yellow;"
"selection-color: yellow;"
"selection-background-color: blue;");</pre>
<p>There are many situations where we need to present a form that has mandatory fields. To indicate to the user that the field is mandatory, one effective (albeit esthetically dubious) solution is to use yellow as the background color for those fields. It turns out this is very easy to implement using Qt Style Sheets. First, we would use the following application-wide style sheet:</p>
<pre> *[mandatoryField="true"] { background-color: yellow }</pre>
<p>This means that every widget whose <tt>mandatoryField</tt> Qt property is set to true would have a yellow background.</p>
<p>Then, for each mandatory field widget, we would simply create a <tt>mandatoryField</tt> property on the fly and set it to true. For example:</p>
<pre> QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);
QLineEdit *emailEdit = new QLineEdit(this);
emailEdit->setProperty("mandatoryField", true);
QSpinBox *ageSpinBox = new QSpinBox(this);
ageSpinBox->setProperty("mandatoryField", true);</pre>
<a name="customizing-a-qpushbutton-using-the-box-model"></a>
<h3>Customizing a QPushButton Using the Box Model</h3>
<p>This time, we will show how to create a red <a href="gui/QPushButton.html"><tt>QPushButton</tt></a>. This <a href="gui/QPushButton.html"><tt>QPushButton</tt></a> would presumably be connected to a very destructive piece of code.</p>
<p>First, we are tempted to use this style sheet:</p>
<pre> QPushButton#evilButton { background-color: red }</pre>
<p>However, the result is a boring, flat button with no borders:</p>
<p align="center"><img src="images/stylesheet-redbutton1.png" alt="A flat red button" /></p><p>What happened is this:</p>
<ul>
<li>We have made a request that cannot be satisfied using the native styles alone (e.g., the Windows XP theme engine doesn't let us specify the background color of a button).</li>
<li>Therefore, the button is rendered using style sheets.</li>
<li>We haven't specified any values for <a href="stylesheet-reference.html#border-width-prop">border-width</tt></a> and <a href="stylesheet-reference.html#border-style-prop">border-style</tt></a>, so by default we obtain a 0-pixel wide border of style <tt>none</tt>.</li>
</ul>
<p>Let's improve the situation by specifying a border:</p>
<pre> QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-color: beige;
}</pre>
<p align="center"><img src="images/stylesheet-redbutton2.png" alt="A red button with a beige border" /></p><p>Things look already a lot better. But the button looks a bit cramped. Let's specify some spacing between the border and the text using the <a href="stylesheet-reference.html#padding-prop">padding</tt></a>. Additionally, we will enforce a minimum width, round the corners, and specify a larger font to make the button look nicer:</p>
<pre> QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}</pre>
<p align="center"><img src="images/stylesheet-redbutton3.png" alt="A red button with a round beige border and big, bold text" /></p><p>The only issue remaining is that the button doesn't react when we press it. We can fix this by specifying a slightly different background color and use a different border style.</p>
<pre> QPushButton#evilButton {
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
QPushButton#evilButton:pressed {
background-color: rgb(224, 0, 0);
border-style: inset;
}</pre>
<a name="customizing-the-qpushbutton-s-menu-indicator-sub-control"></a>
<h3>Customizing the QPushButton's Menu Indicator Sub-Control</h3>
<p>Subcontrols give access to the sub-elements of a widget. For example, a <a href="gui/QPushButton.html"><tt>QPushButton</tt></a> associated with a menu (using QPushButton::setMenu()) has a menu indicator. Let's customize the menu indicator for the red push button:</p>
<pre> QPushButton#evilButton::menu-indicator {
image: url(myindicator.png);
}</pre>
<p>By default, the menu indicator is located at the bottom-right corner of the padding rectangle. We can change this by specifying <a href="stylesheet-reference.html#subcontrol-position-prop">subcontrol-position</tt></a> and <a href="stylesheet-reference.html#subcontrol-origin-prop">subcontrol-origin</tt></a> to anchor the indicator differently. We can also use <a href="stylesheet-reference.html#top-prop">top</tt></a> and <a href="stylesheet-reference.html#left-prop">left</tt></a> to move the indicator by a few pixels. For example:</p>
<pre> QPushButton::menu-indicator {
image: url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
left: -2px;
}</pre>
<p>This positions the <tt>myindicator.png</tt> to the center right of the <a href="gui/QPushButton.html"><tt>QPushButton</tt></a>'s <a href="stylesheet-reference.html#padding-prop">padding</tt></a> rectangle (see <a href="stylesheet-reference.html#subcontrol-origin-prop">subcontrol-origin</tt></a> for more information).</p>
<a name="complex-selector-example"></a>
<h3>Complex Selector Example</h3>
<p>Since red seems to be our favorite color, let's make the text in <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a> red by setting the following application-wide stylesheet:</p>
<pre> QLineEdit { color: red }</pre>
<p>However, we would like to give a visual indication that a <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a> is read-only by making it appear gray:</p>
<pre> QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }</pre>
<p>At some point, our design team comes with the requirement that all <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a>s in the registration form (with the object name</tt> <tt>registrationDialog</tt>) to be brown:</p>
<pre> QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
#registrationDialog QLineEdit { color: brown }</pre>
<p>A few UI design meetings later, we decide that all our <a href="gui/QDialog.html"><tt>QDialog</tt></a>s should have brown colored <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a>s:</p>
<pre> QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
QDialog QLineEdit { color: brown }</pre>
<p>Quiz: What happens if we have a read-only <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a> in a <a href="gui/QDialog.html"><tt>QDialog</tt></a>? [Hint: The <a href="stylesheet-syntax.html#conflict-resolution">Conflict Resolution</tt></a> section above explains what happens in cases like this.]</p>
<a name="customizing-specific-widgets"></a>
<h2>Customizing specific widgets</h2>
<p>This section provides examples to customize specific widgets using Style Sheets.</p>
<a name="customizing-qabstractscrollarea"></a>
<h3>Customizing QAbstractScrollArea</h3>
<p>The background of any <a href="gui/QAbstractScrollArea.html"><tt>QAbstractScrollArea</tt></a> (Item views, <a href="gui/QTextEdit.html"><tt>QTextEdit</tt></a> and <a href="gui/QTextBrowser.html"><tt>QTextBrowser</tt></a>) can be set using the background properties. For example, to set a background-image that scrolls with the scroll bar:</p>
<pre> QTextEdit, QListView {
background-color: white;
background-image: url(draft.png);
background-attachment: scroll;
}</pre>
<p>If the background-image is to be fixed with the viewport:</p>
<pre> QTextEdit, QListView {
background-color: white;
background-image: url(draft.png);
background-attachment: fixed;
}</pre>
<a name="customizing-qcheckbox"></a>
<h3>Customizing QCheckBox</h3>
<p>Styling of a <a href="gui/QCheckBox.html"><tt>QCheckBox</tt></a> is almost indentical to styling a <a href="gui/QRadioButton.html"><tt>QRadioButton</tt></a>. The main difference is that a tristate <a href="gui/QCheckBox.html"><tt>QCheckBox</tt></a> has an indeterminate state.</p>
<pre> QCheckBox {
spacing: 5px;
}
QCheckBox::indicator {
width: 13px;
height: 13px;
}
QCheckBox::indicator:unchecked {
image: url(:/images/checkbox_unchecked.png);
}
QCheckBox::indicator:unchecked:hover {
image: url(:/images/checkbox_unchecked_hover.png);
}
QCheckBox::indicator:unchecked:pressed {
image: url(:/images/checkbox_unchecked_pressed.png);
}
QCheckBox::indicator:checked {
image: url(:/images/checkbox_checked.png);
}
QCheckBox::indicator:checked:hover {
image: url(:/images/checkbox_checked_hover.png);
}
QCheckBox::indicator:checked:pressed {
image: url(:/images/checkbox_checked_pressed.png);
}
QCheckBox::indicator:indeterminate:hover {
image: url(:/images/checkbox_indeterminate_hover.png);
}
QCheckBox::indicator:indeterminate:pressed {
image: url(:/images/checkbox_indeterminate_pressed.png);
}</pre>
<a name="customizing-qcombobox"></a>
<h3>Customizing QComboBox</h3>
<p>We will look at an example where the drop down button of a <a href="gui/QComboBox.html"><tt>QComboBox</tt></a> appears "merged" with the combo box frame.</p>
<pre> QComboBox {
border: 1px solid gray;
border-radius: 3px;
padding: 1px 18px 1px 3px;
min-width: 6em;
}
QComboBox:editable {
background: white;
}
QComboBox:!editable, QComboBox::drop-down:editable {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
}
<span class="comment"> /* QComboBox gets the "on" state when the popup is open */</span>
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}
QComboBox:on { <span class="comment">/* shift the text when the popup opens */</span>
padding-top: 3px;
padding-left: 4px;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 1px;
border-left-color: darkgray;
border-left-style: solid; <span class="comment">/* just a single line */</span>
border-top-right-radius: 3px; <span class="comment">/* same radius as the QComboBox */</span>
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow {
image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
}
QComboBox::down-arrow:on { <span class="comment">/* shift the arrow when popup is open */</span>
top: 1px;
left: 1px;
}</pre>
<p>The popup of the <a href="gui/QComboBox.html"><tt>QComboBox</tt></a> is a <a href="gui/QAbstractItemView.html"><tt>QAbstractItemView</tt></a> and is styled using the descendant selector:</p>
<pre> QComboBox QAbstractItemView {
border: 2px solid darkgray;
selection-background-color: lightgray;
}</pre>
<a name="customizing-qspinbox"></a>
<h3>Customizing QSpinBox</h3>
<p><a href="gui/QSpinBox.html"><tt>QSpinBox</tt></a> can be completely customized as below (the style sheet has commentary inline):</p>
<pre> QSpinBox {
padding-right: 15px; <span class="comment">/* make room for the arrows */</span>
border-image: url(:/images/frame.png) 4;
border-width: 3;
}
QSpinBox::up-button {
subcontrol-origin: border;
subcontrol-position: top right; <span class="comment">/* position at the top right corner */</span>
width: 16px; <span class="comment">/* 16 + 2*1px border-width = 15px padding + 3px parent border */</span>
border-image: url(:/images/spinup.png) 1;
border-width: 1px;
}
QSpinBox::up-button:hover {
border-image: url(:/images/spinup_hover.png) 1;
}
QSpinBox::up-button:pressed {
border-image: url(:/images/spinup_pressed.png) 1;
}
QSpinBox::up-arrow {
image: url(:/images/up_arrow.png);
width: 7px;
height: 7px;
}
QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { <span class="comment">/* off state when value is max */</span>
image: url(:/images/up_arrow_disabled.png);
}
QSpinBox::down-button {
subcontrol-origin: border;
subcontrol-position: bottom right; <span class="comment">/* position at bottom right corner */</span>
width: 16px;
border-image: url(:/images/spindown.png) 1;
border-width: 1px;
border-top-width: 0;
}
QSpinBox::down-button:hover {
border-image: url(:/images/spindown_hover.png) 1;
}
QSpinBox::down-button:pressed {
border-image: url(:/images/spindown_pressed.png) 1;
}
QSpinBox::down-arrow {
image: url(:/images/down_arrow.png);
width: 7px;
height: 7px;
}
QSpinBox::down-arrow:disabled,
QSpinBox::down-arrow:off { <span class="comment">/* off state when value in min */</span>
image: url(:/images/down_arrow_disabled.png);
}</pre>
<a name="customizing-qframe"></a>
<h3>Customizing QFrame</h3>
<p>A <a href="gui/QFrame.html"><tt>QFrame</tt></a> is styled using the <a href="stylesheet-customizing.html#the-box-model">The Box Model</tt></a>.</p>
<pre> QFrame, QLabel, QToolTip {
border: 2px solid green;
border-radius: 4px;
padding: 2px;
background-image: url(images/welcome.png);
}</pre>
<a name="customizing-qgroupbox"></a>
<h3>Customizing QGroupBox</h3>
<p>Let us look at an example that moves the <a href="gui/QGroupBox.html"><tt>QGroupBox</tt></a>'s title to the center.</p>
<pre> QGroupBox {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E0E0E0, stop: 1 #FFFFFF);
border: 2px solid gray;
border-radius: 5px;
margin-top: 1ex; <span class="comment">/* leave space at the top for the title */</span>
}
QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top center; <span class="comment">/* position at the top center */</span>
padding: 0 3px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #FFOECE, stop: 1 #FFFFFF);
}</pre>
<p>For a checkable <a href="gui/QGroupBox.html"><tt>QGroupBox</tt></a>, use the {#indicator-sub}{::indicator} subcontrol and style it exactly like a <a href="gui/QCheckBox.html"><tt>QCheckBox</tt></a> (i.e)</p>
<pre> QGroupBox::indicator {
width: 13px;
height: 13px;
}
QGroupBox::indicator:unchecked {
image: url(:/images/checkbox_unchecked.png);
}
<span class="comment"> /* proceed with styling just like QCheckBox */</span></pre>
<a name="customizing-qheaderview"></a>
<h3>Customizing QHeaderView</h3>
<p><a href="gui/QHeaderView.html"><tt>QHeaderView</tt></a> is customized as follows:</p>
<pre> QHeaderView::section {
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 #616161, stop: 0.5 #505050,
stop: 0.6 #434343, stop:1 #656565);
color: white;
padding-left: 4px;
border: 1px solid #6c6c6c;
}
<span class="comment"> /* style the sort indicator */</span>
QHeaderView::down-arrow {
image: url(down_arrow.png);
}
QHeaderView::up-arrow {
image: url(up_arrow.png);
}</pre>
<a name="customizing-qlineedit"></a>
<h3>Customizing QLineEdit</h3>
<p>The frame of a <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a> is styled using the <a href="stylesheet-customizing.html#the-box-model">The Box Model</tt></a>. To create a line edit with rounded corners, we can set:</p>
<pre> QLineEdit {
border: 2px solid gray;
border-radius: 10px;
padding: 0 8px;
background: yellow;
selection-background-color: darkgray;
}</pre>
<p>The password character of line edits that have QLineEdit::Password echo mode can be set using:</p>
<pre> QLineEdit[echoMode="2"] {
lineedit-password-character: 9679;
}</pre>
<p>The background of a read only <a href="gui/QLineEdit.html"><tt>QLineEdit</tt></a> can be modified as below:</p>
<pre> QLineEdit:read-only {
background: lightblue;</pre>
<a name="customizing-qmenu"></a>
<h3>Customizing QMenu</h3>
<p>Individual items of a <a href="gui/QMenu.html"><tt>QMenu</tt></a> are styled using the 'item' subcontrol as follows:</p>
<pre> QMenu {
background-color: #ABABAB; <span class="comment">/* sets background of the menu */</span>
border: 1px solid black;
}
QMenu::item {
<span class="comment">/* sets background of menu item. set this to something non-transparent
if you want menu color and menu item color to be different */</span>
background-color: transparent;
}
QMenu::item:selected { <span class="comment">/* when user selects item using mouse or keyboard */</span>
background-color: #654321;
}</pre>
<a name="customizing-qmenubar"></a>
<h3>Customizing QMenuBar</h3>
<p><a href="gui/QMenuBar.html"><tt>QMenuBar</tt></a> is styled as follows:</p>
<pre> QMenuBar {
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 lightgray, stop:1 darkgray);
}
QMenuBar::item {
spacing: 3px; <span class="comment">/* spacing between menu bar items */</span>
padding: 1px 4px;
background: transparent;
border-radius: 4px;
}
QMenuBar::item:selected { <span class="comment">/* when selected using mouse or keyboard */</span>
background: #a8a8a8;
}
QMenuBar::item:pressed {
background: #888888;
}</pre>
<a name="customizing-qprogressbar"></a>
<h3>Customizing QProgressBar</h3>
<p>The <a href="gui/QProgressBar.html"><tt>QProgressBar</tt></a>'s <a href="stylesheet-reference.html#border-prop">border</tt></a>, <a href="stylesheet-reference.html#chunk-sub">chunk</tt></a>, and <a href="stylesheet-reference.html#text-align-prop">text-align</tt></a> can be customized using style sheets. However, if one property or sub-control is customized, all the other properties or sub-controls must be customized as well.</p>
<p align="center"><img src="images/progressBar-stylesheet.png" /></p><p>For example, we change the <a href="stylesheet-reference.html#border-prop">border</tt></a> to grey and the <a href="stylesheet-reference.html#chunk-sub">chunk</tt></a> to cerulean.</p>
<pre> QProgressBar {
border: 2px solid grey;
border-radius: 5px;
}
QProgressBar::chunk {
background-color: #05B8CC;
width: 20px;
}</pre>
<p>This leaves the <a href="stylesheet-reference.html#text-align-prop">text-align</tt></a>, which we customize by positioning the text in the center of the progress bar.</p>
<pre> QProgressBar {
border: 2px solid grey;
border-radius: 5px;
text-align: center;
}</pre>
<p>A <a href="stylesheet-reference.html#margin-prop">margin</tt></a> can be included to obtain more visible chunks.</p>
<p align="center"><img src="images/progressBar2-stylesheet.png" /></p><p>In the screenshot above, we use a <a href="stylesheet-reference.html#margin-prop">margin</tt></a> of 0.5 pixels.</p>
<pre> QProgressBar::chunk {
background-color: #CD96CD;
width: 10px;
margin: 0.5px;
}</pre>
<a name="customizing-qpushbutton"></a>
<h3>Customizing QPushButton</h3>
<p>A <a href="gui/QPushButton.html"><tt>QPushButton</tt></a> is styled as follows:</p>
<pre> QPushButton {
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
min-width: 80px;
}
QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
QPushButton:flat {
border: none; <span class="comment">/* no border for a flat push button */</span>
}
QPushButton:default {
border-color: navy; <span class="comment">/* make the default button prominent */</span>
}</pre>
<p>For a <a href="gui/QPushButton.html"><tt>QPushButton</tt></a> with a menu, use the <a href="stylesheet-reference.html#menu-indicator-sub">::menu-indicator</tt></a> subcontrol.</p>
<pre> QPushButton:open { <span class="comment">/* when the button has its menu open */</span>
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
QPushButton::menu-indicator {
image: url(menu_indicator.png);
subcontrol-origin: padding;
subcontrol-position: bottom right;
}
QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {
position: relative;
top: 2px; left: 2px; <span class="comment">/* shift the arrow by 2 px */</span>
}</pre>
<p>Checkable <a href="gui/QPushButton.html"><tt>QPushButton</tt></a> have the <a href="stylesheet-reference.html#checked-ps">:checked</tt></a> pseudo state set.</p>
<a name="customizing-qradiobutton"></a>
<h3>Customizing QRadioButton</h3>
<p>The indicator of a <a href="gui/QRadioButton.html"><tt>QRadioButton</tt></a> can be changed using:</p>
<pre> QRadioButton::indicator {
width: 13px;
height: 13px;
}
QRadioButton::indicator::unchecked {
image: url(:/images/radiobutton_unchecked.png);
}
QRadioButton::indicator:unchecked:hover {
image: url(:/images/radiobutton_unchecked_hover.png);
}
QRadioButton::indicator:unchecked:pressed {
image: url(:/images/radiobutton_unchecked_pressed.png);
}
QRadioButton::indicator::checked {
image: url(:/images/radiobutton_checked.png);
}
QRadioButton::indicator:checked:hover {
image: url(:/images/radiobutton_checked_hover.png);
}
QRadioButton::indicator:checked:pressed {
image: url(:/images/radiobutton_checked_pressed.png);
}</pre>
<a name="customizing-qscrollbar"></a>
<h3>Customizing QScrollBar</h3>
<p>The <a href="gui/QScrollBar.html"><tt>QScrollBar</tt></a> can be styled using its subcontrols like <a href="stylesheet-reference.html#handle-sub">handle</tt></a>, <a href="stylesheet-reference.html#add-line-sub">add-line</tt></a>, <a href="stylesheet-reference.html#sub-line-sub">sub-line</tt></a>, and so on. Note that if one property or sub-control is customized, all the other properties or sub-controls must be customized as well.</p>
<p align="center"><img src="images/stylesheet-scrollbar1.png" /></p><p>The scroll bar above has been styled in aquamarine with a solid grey border.</p>
<pre> QScrollBar:horizontal {
border: 2px solid grey;
background: #32CC99;
height: 15px;
margin: 0px 20px 0 20px;
}</pre>
<pre> QScrollBar::handle:horizontal {
background: white;
min-width: 20px;
}</pre>
<pre> QScrollBar::add-line:horizontal {
border: 2px solid grey;
background: #32CC99;
width: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border: 2px solid grey;
background: #32CC99;
width: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
}</pre>
<p>The <a href="stylesheet-reference.html#left-arrow-sub">left-arrow</tt></a> and <a href="stylesheet-reference.html#right-arrow-sub">right-arrow</tt></a> have a solid grey border with a white background. As an alternative, you could also embed the image of an arrow.</p>
<pre> QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
border: 2px solid grey;
width: 3px;
height: 3px;
background: white;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}</pre>
<p>If you want the scroll buttons of the scroll bar to be placed together (instead of the edges) like on Mac OS X, you can use the following stylesheet:</p>
<pre> QScrollBar:horizontal {
border: 2px solid green;
background: cyan;
height: 15px;
margin: 0px 40px 0 0px;
}
QScrollBar::handle:horizontal {
background: gray;
min-width: 20px;
}
QScrollBar::add-line:horizontal {
background: blue;
width: 16px;
subcontrol-position: right;
subcontrol-origin: margin;
border: 2px solid black;
}
QScrollBar::sub-line:horizontal {
background: magenta;
width: 16px;
subcontrol-position: top right;
subcontrol-origin: margin;
border: 2px solid black;
position: absolute;
right: 20px;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
width: 3px;
height: 3px;
background: pink;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}</pre>
<p>The scroll bar using the above stylesheet looks like this:</p>
<p align="center"><img src="images/stylesheet-scrollbar2.png" /></p><a name="customizing-qsizegrip"></a>
<h3>Customizing QSizeGrip</h3>
<p><a href="gui/QSizeGrip.html"><tt>QSizeGrip</tt></a> is usually styled by just setting an image.</p>
<pre> QSizeGrip {
image: url(:/images/sizegrip.png);
width: 16px;
height: 16px;
}</pre>
<a name="customizing-qslider"></a>
<h3>Customizing QSlider</h3>
<p>You can style horizontal slider as below:</p>
<pre> QSlider::groove:horizontal {
border: 1px solid #999999;
height: 8px; <span class="comment">/* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */</span>
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
}
QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
border: 1px solid #5c5c5c;
width: 18px;
margin: -2px 0; <span class="comment">/* handle is placed by default on the contents rect of the groove. Expand outside the groove */</span>
border-radius: 3px;
}</pre>
<p>If you want to change the color of the slider parts before and after the handle, you can use the add-page and sub-page subcontrols. For example, for a vertical slider:</p>
<pre> QSlider::groove:vertical {
background: red;
position: absolute; <span class="comment">/* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */</span>
left: 4px; right: 4px;
}
QSlider::handle:vertical {
height: 10px;
background: green;
margin: 0 -4px; <span class="comment">/* expand outside the groove */</span>
}
QSlider::add-page:vertical {
background: white;
}
QSlider::sub-page:vertical {
background: pink;
}</pre>
<a name="customizing-qsplitter"></a>
<h3>Customizing QSplitter</h3>
<p>A <a href="gui/QSplitter.html"><tt>QSplitter</tt></a> derives from a <a href="gui/QFrame.html"><tt>QFrame</tt></a> and hence can be styled like a <a href="gui/QFrame.html"><tt>QFrame</tt></a>. The grip or the handle is customized using the <a href="stylesheet-reference.html#handle-sub">::handle</a> subcontrol.</p>
<pre> QSplitter::handle {
image: url(images/splitter.png);
}
QSplitter::handle:horizontal {
height: 2px;
}
QSplitter::handle:vertical {
width: 2px;
}</pre>
<a name="customizing-qstatusbar"></a>
<h3>Customizing QStatusBar</h3>
<p>We can provide a background for the status bar and a border for items inside the status bar as follows:</p>
<pre> QStatusBar {
background: brown;
}
QStatusBar::item {
border: 1px solid red;
border-radius: 3px;
}</pre>
<p>Note that widgets that have been added to the <a href="gui/QStatusBar.html"><tt>QStatusBar</tt></a> can be styled using the descendant declaration (i.e)</p>
<pre> QStatusBar QLabel {
border: 3px solid white;
}</pre>
<a name="customizing-qtabwidget-and-qtabbar"></a>
<h3>Customizing QTabWidget and QTabBar</h3>
<p align="center"><img src="images/tabWidget-stylesheet1.png" /></p><p>For the screenshot above, we need a stylesheet as follows:</p>
<pre> QTabWidget::pane { <span class="comment">/* The tab widget frame */</span>
border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar {
left: 5px; <span class="comment">/* move to the right by 5px */</span>
}
<span class="comment">/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */</span>
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; <span class="comment">/* same as the pane color */</span>
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; <span class="comment">/* same as pane color */</span>
}
QTabBar::tab:!selected {
margin-top: 2px; <span class="comment">/* make non-selected tabs look smaller */</span>
}</pre>
<p>Often we require the tabs to overlap to look like below:</p>
<p align="center"><img src="images/tabWidget-stylesheet2.png" /></p><p>For a tab widget that looks like above, we make use of <a href="http://www.communitymx.com/content/article.cfm?cid=B0029">negative margins</tt></a>. The resulting stylesheet looks like this:</p>
<pre> QTabWidget::pane { <span class="comment">/* The tab widget frame */</span>
border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar {
left: 5px; <span class="comment">/* move to the right by 5px */</span>
}
<span class="comment">/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */</span>
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; <span class="comment">/* same as the pane color */</span>
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; <span class="comment">/* same as pane color */</span>
}
QTabBar::tab:!selected {
margin-top: 2px; <span class="comment">/* make non-selected tabs look smaller */</span>
}
<span class="comment">/* make use of negative margins for overlapping tabs */</span>
QTabBar::tab:selected {
<span class="comment">/* expand/overlap to the left and right by 4px */</span>
margin-left: -4px;
margin-right: -4px;
}
QTabBar::tab:first:selected {
margin-left: 0; <span class="comment">/* the first selected tab has nothing to overlap with on the left */</span>
}
QTabBar::tab:last:selected {
margin-right: 0; <span class="comment">/* the last selected tab has nothing to overlap with on the right */</span>
}
QTabBar::tab:only-one {
margin: 0; <span class="comment">/* if there is only one tab, we don't want overlapping margins */</span>
}</pre>
<p>To move the tab bar to the center (as below), we require the following stylesheet:</p>
<p align="center"><img src="images/tabWidget-stylesheet3.png" /></p><pre> QTabWidget::pane { <span class="comment">/* The tab widget frame */</span>
border-top: 2px solid #C2C7CB;
position: absolute;
top: -0.5em;
}
QTabWidget::tab-bar {
alignment: center;
}
<span class="comment">/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */</span>
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; <span class="comment">/* same as the pane color */</span>
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; <span class="comment">/* same as pane color */</span>
}</pre>
<p>The tear indicator and the scroll buttons can be further customized as follows:</p>
<pre> QTabBar::tear {
image: url(tear_indicator.png);
}
QTabBar::scroller { <span class="comment">/* the width of the scroll buttons */</span>
width: 20px;
}
QTabBar QToolButton { <span class="comment">/* the scroll buttons are tool buttons */</span>
border-image: url(scrollbutton.png) 2;
border-width: 2px;
}
QTabBar QToolButton::right-arrow { <span class="comment">/* the arrow mark in the tool buttons */</span>
image: url(rightarrow.png);
}
QTabBar QToolButton::left-arrow {
image: url(leftarrow.png);
}</pre>
<a name="customizing-qtablewidget"></a>
<h3>Customizing QTableWidget</h3>
<p>Suppose we'd like our selected item in <a href="gui/QTableWidget.html"><tt>QTableWidget</tt></a> to have bubblegum pink fade to white as its background.</p>
<p align="center"><img src="images/tableWidget-stylesheet.png" /></p><p>This is possible with the <a href="stylesheet-reference.html#selection-background-color-prop">selection-background-color</tt></a> property and the syntax required is:</p>
<pre> QTableWidget {
selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
stop: 0 #FF92BB, stop: 1 white);
}</pre>
<a name="customizing-qtoolbar"></a>
<h3>Customizing QToolBar</h3>
<p>The background and the handle of a <a href="gui/QToolBar.html"><tt>QToolBar</tt></a> is customized as below:</p>
<pre> QToolBar {
background: red;
spacing: 3px; <span class="comment">/* spacing between items in the tool bar */</span>
}
QToolBar::handle {
image: url(handle.png);
}</pre>
<a name="customizing-qtoolbutton"></a>
<h3>Customizing QToolButton</h3>
<p>There are three types of QToolButtons.</p>
<ul>
<li>The <a href="gui/QToolButton.html"><tt>QToolButton</tt></a> has no menu. In this case, the <a href="gui/QToolButton.html"><tt>QToolButton</tt></a> is styled exactly like <a href="gui/QPushButton.html"><tt>QPushButton</tt></a>. See <a href="stylesheet-examples.html#customizing-qpushbutton">Customizing </tt>QPushButton</a> for an example.</li>
<li>The <a href="gui/QToolButton.html"><tt>QToolButton</tt></a> has a menu and has the QToolButton::popupMode set to QToolButton::DelayedPopup or QToolButton::InstantPopup. In this case, the <a href="gui/QToolButton.html"><tt>QToolButton</tt></a> is styled exactly like a <a href="gui/QPushButton.html"><tt>QPushButton</tt></a> with a menu. See <a href="stylesheet-examples.html#customizing-qpushbutton">Customizing </tt>QPushButton</a> for an example of the usage of the menu-indicator pseudo state.</li>
<li>The <a href="gui/QToolButton.html"><tt>QToolButton</tt></a> has its QToolButton::popupMode set to QToolButton::MenuButtonPopup. In this case, we style it as follows:<pre> QToolButton { <span class="comment">/* all types of tool button */</span>
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
}
QToolButton[popupMode="1"] { <span class="comment">/* only for MenuButtonPopup */</span>
padding-right: 20px; <span class="comment">/* make way for the popup button */</span>
}
QToolButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
<span class="comment">/* the subcontrols below are used only in the MenuButtonPopup mode */</span>
QToolButton::menu-button {
border: 2px solid gray;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
<span class="comment">/* 16px width + 4px for border = 20px allocated above */</span>
width: 16px;
}
QToolButton::menu-arrow {
image: url(downarrow.png);
}
QToolButton::menu-arrow:open {
top: 1px; left: 1px; <span class="comment">/* shift it a bit */</span>
}</pre>
</li>
</ul>
<a name="customizing-qtreeview"></a>
<h3>Customizing QTreeView</h3>
<p>The branches of a <a href="gui/QTreeView.html"><tt>QTreeView</tt></a> are styled using the <a href="stylesheet-reference.html#branch-sub">::branch</a> subcontrol. The following stylesheet color codes the various states when drawing a branch.</p>
<pre> QTreeView::branch {
background: palette(base);
}
QTreeView::branch:has-siblings:!adjoins-item {
background: cyan;
}
QTreeView::branch:has-siblings:adjoins-item {
background: red;
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
background: blue;
}
QTreeView::branch:closed:has-children:has-siblings {
background: pink;
}
QTreeView::branch:has-children:!has-siblings:closed {
background: gray;
}
QTreeView::branch:open:has-children:has-siblings {
background: magenta;
}
QTreeView::branch:open:has-children:!has-siblings {
background: green;
}</pre>
<p>Colorful, though it is, a more useful example can be made using the following images:</p>
<p><table align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/stylesheet-vline.png" /></td><td><img src="images/stylesheet-branch-more.png" /></td><td><img src="images/stylesheet-branch-end.png" /></td><td><img src="images/stylesheet-branch-closed.png" /></td><td><img src="images/stylesheet-branch-open.png" /></td></tr>
<tr valign="top" class="even"><td>vline.png</td><td>branch-more.png</td><td>branch-end.png</td><td>branch-closed.png</td><td>branch-open.png</td></tr>
</table></p>
<pre> QTreeView::branch:has-siblings:!adjoins-item {
border-image: url(vline.png) 0;
}
QTreeView::branch:has-siblings:adjoins-item {
border-image: url(branch-more.png) 0;
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
border-image: url(branch-end.png) 0;
}
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
border-image: none;
image: url(branch-closed.png);
}
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings {
border-image: none;
image: url(branch-open.png);
}</pre>
<p>The resulting tree view looks like this:</p>
<p align="center"><img src="images/stylesheet-treeview.png" /></p><dl>
<dt><b>See Also:</b></dt>
<dd><a href="qtjambi-stylesheet.html">Style Sheet Example</tt></a>, <a href="richtext-html-subset.html">Supported HTML Subset</tt></a>, <a href="gui/QStyle.html"><tt>QStyle</tt></a></dd>
</dl>
<p /><address><hr /><div align="center">
<table width="100%" cellspacing="0" border="0"><tr class="address">
<td width="30%">Copyright © 2007 <a href="trolltech.html">Trolltech</a></td>
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
<td width="30%" align="right"><div align="right">Qt Jambi </div></td>
</tr></table></div></address></body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
a6711891ce757817bba854bf3f25205a
>
files
>
2530
