Use style sheets with Qt Designer
In this example, we will learn how to change the look and feel of our program and make it look more professional by using style sheets and resources. Qt allows you to decorate your Graphical User Interfaces (GUIs) using a style sheet language called Qt Style Sheets, which is very similar to Cascading Style Sheets (CSS) used by web designers to decorate their websites.
How to do it…
- The first thing we need to do is open up Qt Creator and create a new project. If this is the first time you have used Qt Creator, you can either click the big button that says New Project with a + sign, or simply go to File | New File or New Project.
- Then, select Application under the Project window and select Qt Widgets Application.
- After that, click the Choose button at the bottom. A window will then pop out and ask you to insert the project name and its location.
- Once you're done with that, click Next several times and click the Finish button to create the project. We will just stick to all the default settings for now. Once the project has been created, the first thing you will see is the panel with tons of big icons on the left side of the window that is called the Mode Selector panel; we will discuss this more later in the How it works... section.
- Then, you will also see all your source files listed on the Side Bar panel which is located right next to the Mode Selector panel. This is where you can select which file you want to edit, which, in this case, is
mainwindow.uibecause we are about to start designing the program's UI! - Double-click
mainwindow.uiand you will see an entirely different interface appearing out of nowhere. Qt Creator actually helped you to switch from the script editor to the UI editor (Qt Designer) because it detected the.uiextension on the file you're trying to open. - You will also notice that the highlighted button on the Mode Selector panel has changed from the Edit button to the Design button. You can switch back to the script editor or change to any other tools by clicking one of the buttons located in the upper half of the Mode Selector panel.
- Let's go back to the Qt Designer and look at the
mainwindow.uifile. This is basically the main window of our program (as the filename implies) and it's empty by default, without any widget on it. You can try to compile and run the program by pressing the Run button (green arrow button) at the bottom of the Mode Selector panel, and you will see an empty window popping up once the compilation is complete:
- Now, let's add a push button to our program's UI by clicking on the
Push Buttonitem in the widget box (under the Buttons category) and dragging it to your main window in the form editor. Then, keep the push button selected, and now you will see all the properties of this button inside the property editor on the right side of your window. Scroll down to somewhere around the middle and look for a property called styleSheet. This is where you apply styles to your widget, which may or may not inherit to its children or grandchildren recursively depending on how you set your style sheet. Alternatively, you can also right-click on any widget in your UI at the form editor and select Change Style Sheet from the pop-up menu. - You can click on the input field of the styleSheet property to directly write the style sheet code, or click on the … button besides the input field to open up the Edit Style Sheet window which has a bigger space for writing longer style sheet code. At the top of the window you can find several buttons, such as Add Resource, Add Gradient, Add Color, and Add Font, that can help you to kick-start your coding if you can't remember the properties' names.
Let's try to do some simple styling with the Edit Style Sheet window.
- Click Add Color and choose color.
- Pick a random color from the color picker window, let's say, a pure red color. Then click OK.
- Now, you will see a line of code has been added to the text field on the Edit Style Sheet window, which in my case is as follows:
color: rgb(255, 0, 0); - Click the OK button and now you will see the text on your push button has changed to a red color.
How it works...
Let's take a bit of time to get ourselves familiar with Qt Designer's interface before we start learning how to design our own UI:
The rest of the chapter is locked
83
Tech Concepts
36
Programming languages
73
Tech Tools
Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
50+ new titles added per month and exclusive early access to books as they are being written.
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime
Authors (1)
Personalised recommendations for you
Based on your interests and search pattern
