Glossy Qt stylesheet

Glossy Qt stylesheet Introduction

This article shows how to use CSS to customize Qt application with a glossy style. Thanks to the power offered by Qt style sheets it is possible to change the look of standard Qt widgets in an easy way without dealing with C++ code.

Code

The following CSS is applied to a called "GlossyFrame" and to the "title" and which are children of the frame. Qt style sheets don't offer the possibility to change the checkbox style with complex shapes. Using pixmap to skin checkboxes is almost mandatory if you want to make them look better. In this example the checkbox indicator pixmaps have been embedded into the Qt resource file.

QFrame#GlossyFrame {
border: 1px solid white;
border-radius: 3px;
background: qradialgradient(
cx: 0.5, cy: -1.8,
fx: 0.5, fy: 0,
radius: 2,
stop: 0 #9aa9be,
stop: 1 #293859);
font: bold;
}
 
#GlossyFrame QLabel#Title {
background: transparent;
color: white;
}
 
#GlossyFrame QPushButton {
color: #white;
border: 1px solid black;
border-radius: 3px;
padding: 1px;
background: qlineargradient(
x1:0, y1:0, x2:0, y2:1,
stop:0 #bec1d2,
stop: 0.4 #717990,
stop: 0.5 #5c637d
stop:1 #68778e
);
min-height: 36px;
}
 
#GlossyFrame QPushButton:pressed {
background: qlineargradient(
x1:0, y1:0, x2:0, y2:1,
stop:0 #68778e,
stop: 0.4 #5c637d
stop: 0.5 #717990,
stop:1 #bec1d2
);
color: black;
}
 
#GlossyFrame QLineEdit {
background: qlineargradient(
x1:0, y1:0, x2:0, y2:1,
stop:0 gray,
stop: 0.2 white
stop:1 white
);
border-radius: 1px;
border: 1px solid black;
min-height: 24px;
color: black;
}
 
#GlossyFrame QCheckBox {
color: white;
}
 
#GlossyFrame QCheckBox::indicator {
position: absolute;
height: 27px;
width: 64px;
}
 
#GlossyFrame QCheckBox::indicator:checked {
image: url(:/checkbox_on.png);
}
 
#GlossyFrame QCheckBox::indicator:unchecked {
image: url(:/checkbox_off.png);
}

The full code is available here:Media:Glossystylesheet.zip