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 (updated April 2020):

Firstly, download it from here: https://build-system.fman.io/qt-designer-download Start Qt Designer.

Type label top-left, and drag the label over to the window. Then right-click, select Change stylesheet... and besides the Add Gradient button, click the down arrow and select background-color.

Hit New, see editor. You can click and drag the on the things blue arrows are pointing at to change the look. When done, hit Ok, Ok, get CSS code, copy it, and use it with the setLabelStyleSheet like so:
Code: [show] | [select all] lua
testlabel = Geyser.Label:new({
  name = "testlabel",
  x = "50%", y = "-10%",
  width = "50%", height = "10%",
  fgColor = "black",
  color = "SeaGreen",
  message = [[<center>heey</center>]]
})

testlabel:setStyleSheet([[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:
Selection_552.png
Selection_552.png (4.49 KiB) Viewed 8958 times
My example is quite ugly, but I'm sure others have better artistic skills than me (and more time to spend fiddling).

Re: How to: Using Qt Designer to make gradients

Posted: Mon Apr 20, 2020 4:16 pm
by Akaya
This is an amazing tool for applying gradients. I don't why its taken me 10 years to see it, but thank you none-the-less.

Re: How to: Using Qt Designer to make gradients

Posted: Mon Apr 20, 2020 4:25 pm
by Vadi
If you could make some more gradients with it for the manual so everybody's gauges don't all look the same, that'd be great ;)

Re: How to: Using Qt Designer to make gradients

Posted: Thu Apr 30, 2020 4:51 am
by SlySven
And reviving a singleton post thread after a shade less than 10 YEARS - you must be a high level necromancer! :lol: