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);
}
12 Responses to “Qt 4.3 and Style Sheets”
Sounds Cool.
Does this mean it should be easier to achieve an MS Office 2003 look? ala: http://labs.trolltech.com/blogs/2006/10/06/dotnet-style-for-windows/
I wonder; What is behind the restriction no not allow rgba for background gradients?
After some experimenting I discovered that this gradient (modified from your example above) is also valid:
QPushButton{background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 lightblue, stop: 0.8 navy, stop: 1 white);}
(which looks pretty cool by the way 
)
…with emphazis on that there are THREE stops. I can add even more.
This is not mentioned in the documentation at:
http://doc.trolltech.com/4.3/stylesheet.html
Very very cool !
I try to use the new sub-controls but I cannot set a style sheet for a QSlider. I would like to change only the slider handle using a custom png.
QSlider::handle
{
image: url(test.png);
}
I miss something ?
PiXy, i will blog about how to style the new widgets (sliders and friends) in the days to come It looks like the documentation is very lacking with examples since you are unable to figure it out yourself. Is that correct?
Mike : Funny that you should mention this style as I was about to start a new blog entry about it. I’m planning on uploading it to labs very soon.
Hi. Thanks for this article. Very cool. Your problem is that the audience ges used and starts to texpect this kind of stuff from you guys 
I wonder why it doesn’t say in the docs that you can actually specify more than three stops in a gradient, or even stop at 0.9 instead of 1, i.e.:
qlineargradient(x1:0, y1:0, x2:1, y2:1,
stop:0 white, stop: 0.5 black, stop:0.8 green)
… more than two stops, I meant of course… I spell like a loser too.
QPushButton {
border-radius: 6px;
border: 2px solid #8f8f91;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 red, stop: 1 green);
}
QPushButton is painted on the screen in solid red (no gradient at all).
Qt 4.3.0, WinXP, VC++ 7.1
I finally get to work part of QSlider (the horizontal one) and I currently have problems with vertical slider, while I cannot style a QScrollbar (I need to modify at least the groove and the handle using some png images). Yes girish, some more documentation about the new widgets and sub-controls will be very very appreciated !!
I found (in the meantime) a strange behaviour trying to style the QMenu::item::indicator: it seems that I cannot use the image tag….
However I love style sheets
if i take the stylesheet example application and add
QWidget{ background-color: red;}
i get an all red background, if i add agradient instead
the outmost widget is not colored at all.
Ivan, gradients are broken on Windows. This will be fixed in 4.3.1.