Glossy Qt stylesheet

Article Metadata

---

Code Example

Source file: Media:Glossystylesheet.zip

---

Article

Created: gnuton (23 Dec 2010)

Last edited: hamishwillee (24 Jul 2012)

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 QFrame called "GlossyFrame" and to the "title" QLabel and QPushbuttons 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