QT 4.8 qt Style Sheets Examples

Qt Style Sheets Examples

We'll now see a few examples to get started with using Qt Style Sheets. Style Sheet Usage Customizing the Foreground and Background Colors

Let's start by setting yellow as the background color of all qlineedits in an application. This could is achieved like this:

Qapp->setstylesheet ("Qlineedit {background-color:yellow}");

If we want the property to apply Qlineedits is children (or grandchildren or grand-grandchildren) of a s Pecific dialog, we would rather do this:

Mydialog->setstylesheet ("Qlineedit {background-color:yellow}");

If we want the property to apply only to one specific qlineedit, we can give it a name using Qobject::setobjectname () and Use a ID Selector to refer to it:

Mydialog->setstylesheet ("Qlineedit#nameedit {background-color:yellow}");

Alternatively, we can set the Background-color property directly on the Qlineedit, omitting the selector:

Nameedit->setstylesheet ("Background-color:yellow");

To ensure a good contrast, we should also specify a suitable color for the text:

Nameedit->setstylesheet ("Color:blue; Background-color:yellow ");

It might is a good idea-to-change the colors used-selected text as well:

Nameedit->setstylesheet ("Color:blue;"
                        " Background-color:yellow; "
                        " Selection-color:yellow; "
                        " Selection-background-color:blue; ");

customizing Using Dynamic Properties

There is many situations where we need to present a form that have mandatory fields. To indicate to the user of the field is mandatory, one effective (albeit esthetically dubious) solution are to use yellow As the background color for those fields. It turns out this is very easy to implement using Qt Style Sheets. First, we would use the following application-wide style sheet:

*[mandatoryfield= "true"] {Background-color:yellow}

This means the every widget whose Mandatoryfield Qt property was set to true would has a yellow background.

Then, for each mandatory field widget, we would simply create a Mandatoryfield property on the fly and set it to true. For example:

Qlineedit *nameedit = new Qlineedit (this);
Nameedit->setproperty ("Mandatoryfield", true);

Qlineedit *emailedit = new Qlineedit (this);
Emailedit->setproperty ("Mandatoryfield", true);

Qspinbox *agespinbox = new Qspinbox (this);
Agespinbox->setproperty ("Mandatoryfield", true);

Customizing a Qpushbutton Using the Box Model

This time, we'll show how to create a red Qpushbutton. This qpushbutton would presumably is connected to a very destructive piece of code.

First, we is tempted to use the This style sheet:

Qpushbutton#evilbutton {background-color:red}

However, the result is a boring, flat button with no borders:

What happened is This:we has made a request that cannot be satisfied using the native styles alone (e.g., the Windows XP Theme engine doesn ' t let us specify the background color of a button). Therefore, the button is rendered using style sheets. We haven ' t specified any values for border-width and Border-style, so by default we obtain a 0-pixel wide border of style None.

Let's improve the situation by specifying a border:

Qpushbutton#evilbutton {
    background-color:red;
    Border-style:outset;
    border-width:2px;
    Border-color:beige;
}

Things look already a lot better. But the button looks a bit cramped. Let ' s specify some spacing between the border and the text using the padding. Additionally, we'll enforce a minimum width, round the corners, and specify a larger font to make the button look nicer:

Qpushbutton#evilbutton {
    background-color:red;
    Border-style:outset;
    border-width:2px;
    border-radius:10px;
    Border-color:beige;
    Font:bold 14px;
    Min-width:10em;
    padding:6px;
}

The only issue remaining is and the button doesn ' t react when we press it. We can fix this by specifying a slightly different background color and use a different border style.

Qpushbutton#evilbutton {
    background-color:red;
    Border-style:outset;
    border-width:2px;
    border-radius:10px;
    Border-color:beige;
    Font:bold 14px;
    Min-width:10em;
    padding:6px;
}
qpushbutton#evilbutton:pressed {
    Background-color:rgb (224, 0, 0);
    Border-style:inset;
}

customizing the Qpushbutton ' s Menu Indicator Sub-control

Subcontrols give access to the sub-elements of a widget. For example, a Qpushbutton associated with a menu (using Qpushbutton::setmenu ()) has a menu indicator. Let's customize the menu indicator for the Red push button:

Qpushbutton#evilbutton::menu-indicator {
    image:url (myindicator.png);
}

By default, the menu indicator are located at the bottom-right corner of the padding rectangle. We can change this by specifying Subcontrol-position and Subcontrol-origin to anchor the indicator differently. We can also use top and left-to-move the indicator by a few pixels. For example:

Qpushbutton::menu-indicator {
    image:url (myindicator.png);
    Subcontrol-position:right Center;
    subcontrol-origin:padding;
    Left: -2px;
}

This positions the Myindicator.png to the center right of the Qpushbutton ' s padding rectangle (see subcontrol-origin for M Ore information). Complex Selector Example

Since Red seems to is our favorite color, let's make the text in Qlineedit red by setting the following Application-wide s Tylesheet:

Qlineedit {color:red}

However, we would like to give a visual indication that a qlineedit are read-only by making it appear gray:

Qlineedit {color:red}
qlineedit[readonly= "true"] {Color:gray}

At some point, we design team comes with the requirement, a qlineedits in the registration form (with the Object NA Me registrationdialog) to be brown:

Qlineedit {color:red}
qlineedit[readonly= "true"] {Color:gray}
#registrationDialog qlineedit {Color:brown}

A few UI design meetings later, we decide, we qdialogs should have brown colored qlineedits:

Qlineedit {color:red}
qlineedit[readonly= "true"] {Color:gray}
qdialog qlineedit {Color:brown}

Quiz:what happens if we have a read-only qlineedit in a qdialog? [hint:the Conflict Resolution section above explains what happens in cases like this.] Customizing specific Widgets

This sections provides examples to customize specific widgets using Style Sheets. Customizing Qabstractscrollarea

The background of any qabstractscrollarea (Item views, qtextedit and Qtextbrowser) can be set using the background Propert ies. For example, to set a background-image this scrolls with the scroll bar:

Qtextedit, Qlistview {
    background-color:white;
    Background-image:url (draft.png);
    Background-attachment:scroll;
}

If the background-image is to being fixed with the viewport:

Qtextedit, Qlistview {
    background-color:white;
    Background-image:url (draft.png);
    Background-attachment