×
Namespaces

Variants
Actions

Glossy Qt stylesheet

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Platform(s):
Symbian
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.


GlossyStyleSheet.png

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

This page was last modified on 24 July 2012, at 04:49.
565 page views in the last 30 days.