views:

138

answers:

2

I'm having some questions about Qt's stylesheet functionality. It's really great, but it feels like the feature isn't around for too long yet, true? It's by far the easiest way to style my GUI though.

  1. Is it possible to add color fading in the stylesheets? Whenever the mouse hovers over a certain widget, I don't want it abruptly changing background color, just fade into the new color in 200ms or something. Is there a nice way for this, or must this be done code-wise?

  2. Can I have a 2D gradient? I know how to use the 1D gradient now, you can change colour gradually over one axis (often either horizontally or vertically). I would like to add a second gradient on top of that, that has a has a low alpha value for example. So if your gradient goes from green (top) to red (bottom), I would also like it to go from transparent (left) to white (right).

  3. Qt has CSS selectors for types (e.g. QPushButton) and for ID's (e.g. #mywidgetname), but I haven't found a way to select or set classes. I have a number of QFrames for example, and to a certain subset I would like to add one particular style. Should I name my frames all the same (same ID)? Sounds bad. But selecting on their type (QFrame) isn't right either...

Thank you!

+2  A: 
  1. Not using CSS that I know of. However, Qt has several nice demos using different techniques (using the animation framework), see for example the demos/examples browser.

  2. You can probably achieve what you want in #2 by using the following construction using relative coordinates of the endpoints:

    qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0.273, stop:0 rgba(0, 0, 0, 255), stop:1 rgba(255, 255, 255, 255))
    

    Qt Designer has a nice editor for gradients (and for CSS in general), you may want to play with this and see what it comes up with and use that for inspiration.

  3. Not quite sure how to best solve this, but you can put multiple matches before the same rule, so you can have:

    QFrame#frame1, QFrame#frame2 { background-color: blue; }
    
Ivo
1. It has some animation demo's yes, but none describing a color fade. I've tried several things now, but do you know of an example that fades the background-color or border-color of a QToolButton? Or makes it fade between two CSS states...Thanks for 2. and 3. :)
Daevius
I mean the application that gives you access to the demos, qtdemo.exe. That does something to the buttons on the left that makes them move a little when you click on them. I assume you can change that to do something with the color as well.
Ivo
Hmm yes, there are some pos examples, but none for color :O, and I'm really inexperienced with Qt.2. This will still make a 1D gradient, it will just rotate somewhat (the direction). What I really want is one gradient over x, and a different one over y...
Daevius
I don't think you can style widgets using two gradients, but again, check Qt Designer's stylesheet editor and play around with it to see if you can accomplish the look you want.
Ivo
A: 

Also you can select all QFrames for particular parent

#ParentName > QFrame will select all QFrames that are children of #ParentName

#ParentName QFrame will select all QFrames contained in #ParentName and it's children

Kamil Klimek