×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Creating a gradient background for a QPushButton with style sheet

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan")
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix links)
 
Line 75: Line 75:
 
</code>
 
</code>
  
Next you need to apply the style to a component. You can apply it on application level (see [[CS001502 - Applying a Qt style sheet to an application via QApplication]]) or on single widget level with {{Icode|QWidget::setStyleSheet(const QString& style)}}.
+
Next you need to apply the style to a component. You can apply it on application level (see [[Archived:Applying a Qt style sheet to an application via QApplication]]) or on single widget level with {{Icode|QWidget::setStyleSheet(const QString& style)}}.
  
 
===Postconditions===
 
===Postconditions===

Latest revision as of 03:45, 29 June 2012

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.

Article Metadata
Tested with
Devices(s): Nokia 5800 XpressMusic
Compatibility
Platform(s): Qt
Symbian
Article
Keywords: Qt, UI, QPushButton, style sheet
Created: taaidant (26 Jun 2009)
Last edited: hamishwillee (29 Jun 2012)

Contents

[edit] Overview

This example shows you how to create a QPushButton with a gradient background using a Qt style sheet.

[edit] Preconditions

[edit] QPushButton gradient example

[edit] Style sheet

QPushButton {
/* Let's make the size of the button 1,5 times of font size. */
min-height: 1.5em;
/* Font size just 1.*/
font: 1em;
/* Margins so that we get a little space on the left and right. */
margin: 0 1px 0 1px;
/* The font color */
color: white;
/* Here's the background gradient with start point, end point,
stop "percentage" and color, stop percentage and color. */

background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #2198c0, stop: 1 #0d5ca6);
/* We'll round the borders. */
border-style: outset;
/* Round radius will be 3px */
border-radius: 3px;
/* Border is only one pixel */
border-width: 1px;
/* Border color is now set */
border-color: #0c457e;
}
 
/* This is style when button is pressed */
QPushButton:pressed {
/* We'll just invert the gradient by changing the colors around. */
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #0d5ca6, stop: 1 #2198c0);
}

Next you need to apply the style to a component. You can apply it on application level (see Archived:Applying a Qt style sheet to an application via QApplication) or on single widget level with QWidget::setStyleSheet(const QString& style).

[edit] Postconditions

You've now created this:

QPG.pngQPG pressed.png

[edit] See also

This page was last modified on 29 June 2012, at 03:45.
275 page views in the last 30 days.
×