QSlider
I have been avoiding QSlider for sometime now. Sliding the QSlider would have been straightforward if the code was correct . You need this teeny weeny patch against 4.3 (If you are using a week old 4.3 snapshot, you are good). Comments inline.


QSlider::groove:horizontal {
border: 1px solid #999999;
height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
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; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
border-radius: 3px;
}


Here’s how it looks:

If you require more control, play around with something like this (note that this is a vertical slider):

QSlider::groove:vertical {
background: red;
position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
left: 4px; right: 4px;
}
QSlider::handle:vertical {
height: 10px;
background: green;
margin: 0 -4px; /* expand outside the groove */
}
QSlider::add-page:vertical {
background: white;
}
QSlider::sub-page:vertical {
background: pink;
}


QHeaderView
I thought I will have a go at something that looks like the header view in this plasmoid and show some advanced usage of the new pseudo states but I gotta run (and this posts been sitting as a draft for way too long).


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;
}


Here’s how it looks:

Qt 4.3 Style Sheets, as you most likely know, introduces styling of most widgets. The documentation is a quite silent when it comes to providing “style templates” – templates that you can just copy/paste and get started with styling the widget. Today, I started creating templates for QProgressBar and QScrollBar. All this will become a part of 4.3.1 Style Sheet documentation.

QProgressBar

QProgressBar:horizontal {
border: 1px solid gray;
border-radius: 3px;
background: white;
padding: 1px;
}
QProgressBar::chunk:horizontal {
background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 green, stop: 1 white);
}


Here’s what you get:

You say “Oh sweet, but I want WindowsXP like progress bars. And the label needs to be outside since its easier to read”. Yeah, sure.

QProgressBar:horizontal {
border: 1px solid gray;
border-radius: 3px;
background: white;
padding: 1px;
text-align: right;
margin-right: 4ex;
}
QProgressBar::chunk:horizontal {
background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 green, stop: 1 white);
margin-right: 2px; /* space */
width: 10px;
}


Note that you need set the height for vertical progress bars. You can use “:indeterminate” for indeterminate progress bars. And there’s a small bug which breaks text alignment (fixed in 4.3.1).

QScrollBar


QScrollBar:horizontal {
border: 2px solid green;
background: cyan;
height: 15px;
margin: 0px 20px 0 20px;
}
QScrollBar::handle:horizontal {
background: gray;
min-width: 20px;
}
QScrollBar::add-line:horizontal {
background: blue;
width: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
background: white;
width: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
width: 3px;
height: 3px;
background: pink;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}


Here’s the awful but didactic screenshot:

Style sheets are so powerful that you can actually place those add-line, remove-line button anywhere!

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;
}


For vertical scroll bars, you will need to replace width with height and use up-arrow and down-arrow. That said, remove those boring borders, slap in a few border-images, gradients and background color and it’s simple to create beautiful custom scroll bars.

It looks like people have taken a deep liking to having line edits with a clear button. Like the one Aaron made. Since many seem to have missed that post, here’s my take on a QLineEdit with a clear button.

lineedit.h
lineedit.cpp

The code is fairly trivial. So, I won’t bother explaining. The clear button appears only when the line edit has text. Here’s how it looks,

Line edit with no text,

Line edit with some text (clear button appears)

Line edit with lotsa text (text doesn’t go underneath clear button)

Update: I got a question asking how to implement the search line edit with a menu, like in thunderbird. The clear button is a QToolButton. Just set a menu To move it to the left, just use padding-left and move the clear button appropriately.

Since I will be posting lot of Style sheets, I figured this is about the right time to point out that Qt 4.3 Designer has a built-in CSS Syntax validator and highlighter. Just right click on any widget and “Edit Stylesheet…”. (screenshot here.)

Background
Qt 4.3 introduces support for background images in any QAbstractScrollArea derivative. This means you can set a background-image on a QTextEdit, QTextBrowser or any of the item views. Use background-attachment to fix or scroll the background-image w.r.t the viewport.


QTextEdit, QListView {
background-color: white;
background-image: url(/tmp/draft.png);
background-attachment: scroll;
}


Here’s how the QTextEdit looks when you are at beginning of the document,

The background-image scrolls as you scroll,

CSS3 brings a lot of new background properties. Their usefulness is debatable but we implemented them for sake of completeness . Here’s a really whacky example,

QTextEdit {
margin: 5px;
border: 2px solid green;
padding: 3px;
background-color: white;
background-image: url(/tmp/draft.png);
background-origin: content;
background-clip: border;
background-attachment: scroll;
background-repeat: repeat-y;
background-position: top right;
}


Pseudo States
Qt 4.3 almost triples the number of Pseudo States. Well, they should really be called Pseudo classes now but our documentation team prefers sticking to the 4.2 terminology to avoid confusion. Orientation, direction, position and many UI properties of widgets that are useful in styling like “default”, “flat”, “no-frame”, “read-only” have been added.

We also added support for negation using “!” (CSS3 recommends ::not).


QPushButton:flat:default:!focus:!hover {
/* applies to a flat default push button that does not have focus or hover state. */
}


There’s been a tremendous amount of action in the Qt Style Sheet world for 4.3. I have been extremely busy managing the release, but now with 4.3.0 out, I have all the time to blog about the Style Sheet features we have added for 4.3 .

To start with, have you noticed Style Sheet documentation lately? 4.3 brings a whole new bunch of Pseudo States, Sub-controls. The widget documentation explains in detail how to style each and every widget. For 4.3.1, our doc team is working on a shiny new example and more detailed text in the documentation.

Over the coming weeks, I will go over each enhancement in detail. I will start with my personal favorite – specifying gradients in Style Sheets. Gradients are specified in ObjectBoundingMode (Thanks, Zack!).

Try this,

QPushButton {
border-radius: 6px;
border: 2px solid #8f8f91;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde);
}

QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa);
}


This is how it looks (default and pressed):

First thing to notice, the notorious border-radius bug is fixed. The background is now clipped when specifying a border-radius. Second, all colors are now Brushes. A Brush can be a color (as in 4.2) or gradients or a palette entry. It follows that we can specify the text color as a gradient too,


QGroupBox {
color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 lightblue, stop: 1 navy);
}


Since I am too lazy to take more screenshots , Here’ some more stuff to try,

QListWidget, QLineEdit {
selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 lightblue, stop: 1 navy);
}


There we have it – A single source package that you can use to compile Qt on any platform. The zip package is for users who prefer Windows line endings in Qt source files. In contrast, the tar.gz package contains Unix line endings. The tar.bz2 packages are, ummm, a mistake (they will die shortly).

The term “all” is a bit misleading since the package contains only sources of Qt/X11, Qt/Win and Qt/Mac (and does not contain Qtopia Core). Thus, the name of the package is subject to change before the final 4.3.0 release.

We haven’t quite found the time to test shadow builds for 4.3. This doesn’t mean that they do not work. It only means that they are completely unsupported

Commercial customers, please contact our support department to get access to the “all” commercial package. Note that you will have access to this package only if you have X11, Windows AND Mac licenses.

Update: Updated note for commercial customers.