Qt Style Sheets

Qt's Widgets Application uses a styling system called Qt Style Sheets, which is similar to the web technology's styling system—CSS (Cascading Style Sheet). All you need to do is write the style description of the widget and Qt will render it accordingly. The syntax of Qt Style Sheets is pretty much the same as CSS.

Qt Style Sheets has been inspired by CSS and thus they are both very similar to each other:

• Qt Style Sheets:

QLineEdit { color: blue; background-color: black; } 

• CSS:

h1 { color: blue; background-color: black; } 

In the preceding example, both Qt Style Sheet and CSS contain a declaration block and a selector. Each declaration consists of a property and value, which are separated by a colon.

You can change a widget's style sheet by using two methods—using C++ code directly or by using the properties editor. If you're using C++ code, you can call the QObject::setStyleSheet() function, like so:

myButton->setStyleSheet("background-color: green"); 

The preceding code changes the background color of our push button widget to green. You can also achieve the same result by writing the same declaration into the styleSheet property of the widget in Qt Designer:

QPushButton#myButton { background-color: green } 

To learn more about the syntax and properties of Qt Style Sheets, please refer to the following link: http://doc.qt.io/qt-5/stylesheet-reference.html

Let's continue with our project and apply a custom Qt Style Sheet to our GUI!

1. First, right-click on the Submit button and select Change styleSheet... A window will pop up for you to edit the widget's Style Sheet:

2. Then, add the following to the Style Sheet Editor window:

border: 1px solid rgb(24, 103, 155); 
border-radius: 5px; 
background-color: rgb(124, 203, 255); 
color: white;

3. Once you're done, click the OK button and you should be able to see that the Submit button changes its appearance to this:

The Style Sheet we used earlier is pretty much self-explanatory. It enables the borderline of the Push Button and sets the border color to dark blue using RGB values. Then, it also applies a rounded corner effect to the button and changes its background color to light blue. Finally, the Submit text has also been changed to white.

4. Next, we want to apply a custom Style Sheet to the Form Layout. However, you will notice that there is no Change styleSheet... option when right clicking on it. This is because layouts do not carry that property with it. In order to apply styling to the Form Layout, we must first convert it into a QWidget or QFrame object. To do so, right-click on the Form Layout and select Morph into | QFrame:

5. Once you're done with that, you will notice it is now carrying the styleSheet property and thus we are now able to customize its appearance. Let's right-click on it and select Change styleSheet... to open up the Style Sheet Editor window. Then, insert the following script:

#formFrame { 
border: 1px solid rgb(24, 103, 155); 
border-radius: 5px; 
background-color: white; } 

The word formFrame is referring to the widget's objectName property and it must match the exact name of the widget, otherwise the style will not be applied to it. The reason why we define the widget name for this example (which we didn't do in the previous one) is because the style will also be applied to all its children if we don't specify the widget name. You can try and remove #formFrame {} from the preceding script and see what happens—now, even the Labels and Line Edits have borderlines, and that is not what we intended to do. The GUI now looks like this:

6. Lastly, we want to have a nice-looking background, and we can do this by attaching a background image. To do so, we first need to import the image into Qt's resource system. Go to File | New File or Project...Then, select Qt under the Files and Classes category. After that, pick the Qt Resource File and click the Choose... button. The Qt resource system is a platform-independent mechanism for storing binary files in the application's executable. You can basically store all of those important files here, such as icon images or language files, directly into your executable by using the Qt resource file. These important files will be directly embedded into your program during the compilation process.

7. Then, key in the file name and set its location before pressing the Next button, and follow this by clicking the Finish button. Now, you will see a new resource file being created, which I named resource.qrc:

8. Open up resource.qrc with Qt Creator and select Add | Add Prefix. After that, key in your preferred prefix, for example, /images. Once you're done with that, select Add again and this time, pick Add Files. Add the image file provided by the sample project called login_bg.png. Then, save resource.qrc and right-click on the image and select Copy Resource Path to Clipboard. After that, close resource.qrc and open up mainwindow.ui again:

9. The next thing we need to do is to right-click on the centralWidget object from the Object Inspector and select Change styleSheet..., and then insert the following script:

#centralWidget { 
border-image: url(:/images/login_bg.png); }

10. The text within url() can be inserted by pressing Ctrl + V (or paste) because it was copied to the clipboard when we selected Copy Resource Path to Clipboard in the previous step. The final outcome looks like this:

Please make sure that you also build and run the application, and then check whether the final outcome looks the same, as intended. There are a lot more things to tweak in order to make it look truly professional, but so far it's looking pretty great!