Page 1 of 1

How to: Using Qt Designer to make gradients

Posted: Tue Jun 15, 2010 12:01 am
by Vadi
This shows how to make fancy label gradients via Qt Designer.

Firstly, download it from here: http://qt.nokia.com/downloads - select LGPL, and download the "Qt SDK: Complete Development Environment" for your platform. Start Qt Designer, and you'll get something like this:
Image
Type label top-left, and drag the label over to the window:
Image
Right-click:
Image
Besides the Add Gradient button, click the down arrow and select background-color:
Image
Hit New, see editor. You can click and drag the on the things blue arrows are pointing at to change the look:
Image
When done, hit Ok, Ok, get CSS code:
Image
Copy it, and use it with the setLabelStyleSheet like so:
Code: [show] | [select all] lua
setLabelStyleSheet("mylabel", [[background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0.681, y2:0.778, stop:0.29902 rgba(0, 0, 0, 255), stop:1 rgba(255, 255, 255, 255));]])
See result:
Image

My example is quite ugly, but I'm sure others have better artistic skills than me (and more time to spend fiddling).