In the previous example, you learned how to apply a style sheet to a widget with Qt Designer. Let's go crazy and push things further by creating a few other types of widgets and change their style properties to something bizarre for the sake of learning. This time, however, we will not apply the style to every single widget one by one, but we will learn to apply the style sheet to the main window and let it inherit down the hierarchy to all the other widgets so that the style sheet is easier to manage and maintain in long run.
styleSheet
property. This button will revert the property to the default value, which in this case is the empty style sheet.Insert the following style sheet:
border: 2px solid gray; border-radius: 10px; padding: 0 8px; background: yellow;
QPushButton { border: 2px solid gray; border-radius: 10px; padding: 0 8px; background: yellow; }
QPushButton
. We can also apply the style to just one of the push buttons by mentioning its name in the style sheet, like so:QPushButton#pushButton_3 { border: 2px solid gray; border-radius: 10px; padding: 0 8px; background: yellow; }
QPushButton { color: red; border: 0px; padding: 0 8px; background: white; } QPushButton#pushButton_2 { border: 1px solid red; border-radius: 10px; } QPushButton#pushButton_3 { border: 2px solid gray; border-radius: 10px; padding: 0 8px; background: yellow; }
pushButton_2
. We keep the style sheet of pushButton_3
as it is. Now the buttons will look like this:QPushButton
type to a white rectangular button with no border and red text. Then the second set of style sheet changes only the border of a specific QPushButton
widget called pushButton_2
. Notice that the background color and text color of pushButton_2
remain white and red respectively because we didn't override them in the second set of style sheet, hence it will return to the style described in the first set of style sheet since it's applicable to all QPushButton
widgets. Do notice that the text of the third button has also changed to red because we didn't describe the color property in the third set of style sheet.* { background: qradialgradient(cx: 0.3, cy: -0.4, fx: 0.3, fy: -0.4, radius: 1.35, stop: 0 #fff, stop: 1 #888); color: rgb(255, 255, 255); border: 1px solid #ffffff; }
rgb
function (rgb(255, 255, 255)
) or hex code (#ffffff
) to describe the color value.If you are ever involved in web development using HTML and CSS, Qt's style sheet works exactly the same way as CSS. Style sheets provide the definitions for describing the presentation of the widgets – what the colors are for each element in the widget group, how thick the border should be, and so on and so forth.
If you specify the name of the widget to the style sheet, it will change the style of a particular push button widget with the name you provide. None of the other widgets will be affected and will remain as the default style.
To change the name of a widget, select the widget either from the form editor or the object inspector and change the property called objectName
in the property window. If you have used the ID selector previously to change the style of the widget, changing its object name will break the style sheet and lose the style. To fix this problem, simply change the object name in the style sheet as well.
18.220.245.233