girish
Qt
KDE
Posted by girish
 in Qt, KDE
 on Monday, June 04, 2007 @ 10:22

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

11 Responses to “Backgrounds, Pseudo states - Qt 4.3 Style Sheets”

» Posted by NoobSaibot
 on Monday, June 04, 2007 @ 13:58

for some reason QListView:hover { background: ; } does not work. any idea why?

» Posted by NoobSaibot
 on Monday, June 04, 2007 @ 14:12

blog doesn’t accept < and &rt; here’s the correct css

QListView:hover { background: #369; }

» Reply from girish
 on Monday, June 04, 2007 @ 15:10

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

» Posted by NoobSaibot
 on Monday, June 04, 2007 @ 15:19

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.

» Reply from girish
 on Monday, June 04, 2007 @ 16:13

> 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)

» Posted by NoobSaibot
 on Monday, June 04, 2007 @ 18:39

> 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?

» Posted by NoobSaibot
 on Monday, June 04, 2007 @ 18:47

however, *great* job! the reload of CSS file works. muchos gracias.

» Posted by NoobSaibot
 on Monday, June 04, 2007 @ 21:19

*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?

» Posted by inglese
 on Monday, June 18, 2007 @ 16:32

what about a brush with pattern ?
i can’t find the property name to set to have Qt::BDiagPattern, perhaps it’s not implemented ?

» Posted by Marek
 on Wednesday, June 20, 2007 @ 13:59

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?

» Reply from girish
 on Friday, June 22, 2007 @ 06:41

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.



© 2008 Nokia Corporation and/or its subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation in Finland and/or other countries worldwide.
All other trademarks are property of their respective owners.