Backgrounds, Pseudo states – Qt 4.3 Style Sheets

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,
Unscrolled QTextEdit

The background-image scrolls as you scroll,
Scrolled QTextEdit

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. */
}

twitter