Revision as of 09:29, 28 June 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Archived:How to make a stylesheet in Qt, Part 2

From Nokia Developer Wiki
Jump to: navigation, search

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 (based on QWidget) is deprecated.

This (archived) code snippet demonstrates how to create and dynamically test a stylesheet using Qt Creator. The advantage of using Qt designer (part of Qt Creator) is that it shows the preview as soon as you change the style. When you apply a style to a window or application the style will affect all the widgets in the application.

Article Metadata
Tested with
Devices(s): Emulator
Platform(s): Qt
Platform Security
Signing Required: Self-Signed
Capabilities: None
Keywords: stylesheet, Push Button, Text Label
Created: james1980 (06 Jan 2009)
Last edited: hamishwillee (28 Jun 2012)


  • Download and install the Qt SDK.

Procedure for creating a style

  • Create a new Qt project
 file->new->Qt project->GUI Widget
  • Add the Widgets using the Widget box and arrange them in a layout.
  • Right click on any of the widget and select the change stylesheet.


  • Now Type the code given below in the new window.
 QPushButton {
 border: 2px solid #8f8f91;     
 border-radius: 6px;     
 background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #f6f7fa, stop: 1 #dadbde);     
 min-width: 80px; }


  • Now One by one click on the each widget and change the stylesheet. Write the following code for the lineedit and Frame.
 QLineEdit {     
 border: 2px solid gray;     
 border-radius: 10px;     
 padding: 0 8px;     
 background: yellow;     
 selection-background-color: darkgray;


  • Write the following code for the frame.
 border: 2px solid green;   
 border-radius: 4px;     
 padding: 2px;    
 background-color: rgb(125,125,30);



  • Generated Style


This page was last modified on 28 June 2012, at 09:29.
112 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.