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. */
}
Possibly related posts:
11 comments
for some reason QListView:hover { background: ; } does not work. any idea why?
blog doesn’t accept < and &rt; here’s the correct css
QListView:hover { background: #369; }
Hmm, NoobSaibot, you just found a bug. But you can easily work around it,
QListView { background: white; } /* add this to make hover work */
QListView:hover { background: green; }
Beautiful! It works. Another question.
iirc, construction like this QListView[active="true"] whereas active is a defined Q_PROPERTY in the QListView ( or in my derived ListView ) class. And something like QWidget[active="true"] QListView { … } should work either. And how interactive is this? Let’s say the property “active” changes to false.
> And how interactive is this? Let’s say the property “active” changes to false.
Behavior is documented in http://doc.trolltech.com/4.3/stylesheet.html#selector-types (Property Selector)
> Warning: If the value of the Qt property changes after the style sheet has been set,
> it might be necessary to force a style sheet recomputation. One way to achieve this is to unset the style sheet and set it again.
what a bummer. Is that subject to change somewhere in the future?
however, *great* job! the reload of CSS file works. muchos gracias.
*cough* sorry for disturbing you again. how is the special class property supposed to work. i have a class MyClass, which is derived from QWidget. no css is applied to MyClass widget by this css: QWidget[class="MyClass"] { … }
am i missing something?
what about a brush with pattern ?
i can’t find the property name to set to have Qt::BDiagPattern, perhaps it’s not implemented ?
background-image works nicely for QTextEdit, but I can’t get same effect with QPushButton (Even I know it worked with wt 4.2)
In details: both
QTextEdit {background-image: url(:/Resources/button.png) }
QPushButton {background: red}
works fine, but:
QPushButton {background-image: url(:/Resources/button.png) }
is not working at all!
(Also it’s not working for * {background-image…..)
Does qt 4.3 disables background-image for buttons?
Marek, Add a border: none to your stylesheet. By default, you get native borders with 4.3 which must be drawing over your background-image.
Comments on this entry are closed.