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…

1. 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.
2. Then, select Application under the Project window and select Qt Widgets Application.
3. 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.
4. 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.
5. 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.ui because we are about to start designing the program's UI!
6. Double-click mainwindow.ui and 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 .ui extension on the file you're trying to open.
7. 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.
8. Let's go back to the Qt Designer and look at the mainwindow.ui file. 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:
   
9. Now, let's add a push button to our program's UI by clicking on the Push Button item 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.
10. 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.

11. Click Add Color and choose color.
12. Pick a random color from the color picker window, let's say, a pure red color. Then click OK.
13. 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);

14. 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:

1. Menu bar: The menu bar houses application-specific menus that provide easy access to essential functions such as create new projects, save files, undo, redo, copy, paste, and so on. It also allows you to access development tools that come with Qt Creator, such as the compiler, debugger, profiler, and so on.
2. Widget box: This is where you can find all the different types of widget provided by Qt Designer. You can add a widget to your program's UI by clicking one of the widgets from the widget box and dragging it to the form editor.
3. Mode selector: The mode selector is a side panel that places shortcut buttons for easy access to different tools. You can quickly switch between the script editor and form editor by clicking the Edit or Design buttons on the mode selector panel which is very useful for multitasking. You can also easily navigate to the debugger and profiler tools in the same speed and manner.
4. Build shortcuts: The build shortcuts are located at the bottom of the mode selector panel. You can build, run, and debug your project easily by pressing the shortcut buttons here.
5. Form editor: Form editor is where you edit your program's UI. You can add different widgets to your program by selecting a widget from the widget box and dragging it to the form editor.
6. Form toolbar: From here, you can quickly select a different form to edit, click the drop-down box located above the widget box and select the file you want to open with Qt Designer. Beside the drop-down box are buttons for switching between different modes for the form editor and also buttons for changing the layout of your UI.
7. Object inspector: The object inspector lists all the widgets within your current .ui file. All the widgets are arranged according to its parent-child relationship in the hierarchy. You can select a widget from the object inspector to display its properties in the property editor.
8. Property editor: Property editor will display all the properties of the widget you selected either from the object inspector window or the form editor window.
9. Action Editor and Signals & Slots Editor: This window contains two editors, Action Editor and the Signals & Slots Editor, which can be accessed from the tabs below the window. The action editor is where you create actions that can be added to a menu bar or toolbar in your program's UI.
10. Output panes: Output panes consist of several different windows that display information and output messages related to script compilation and debugging. You can switch between different output panes by pressing the buttons that carry a number before them, such as 1-Issues, 2-Search Results, 3-Application Output, and so on.

There's more…

In the previous section, we discussed how to apply style sheets to Qt widgets through C++ coding. Although that method works really well, most of the time the person who is in charge of designing the program's UI is not the programmer, but a UI designer who specializes in designing user-friendly UI. In this case, it's better to let the UI designer design the program's layout and style sheet with a different tool and not mess around with the code.

Qt provides an all-in-one editor called Qt Creator. Qt Creator consists of several different tools, such as script editor, compiler, debugger, profiler, and UI editor. The UI editor, which is also called Qt Designer, is the perfect tool for designers to design their program's UI without writing any code. This is because Qt Designer adopted the What-You-See-Is-What-You-Get approach by providing accurate visual representation of the final result, which means whatever you design with Qt Designer will turn out exactly the same when the program is compiled and run.

The similarities between Qt Style Sheets and CSS are as follows:

• CSS: h1 { color: red; background-color: white;}
• Qt Style Sheets: QLineEdit { color: red; background-color: white;}
• As you can see, both of them contain a selector and a declaration block. Each declaration contains a property and a value, separated by a colon.
• In Qt, a style sheet can be applied to a single widget by calling QObject::setStyleSheet() function in C++ code, for example:

  myPushButton->setStyleSheet("color : blue");

• The preceding code will turn the text of a button with the variable name myPushButton to a blue color. You can also achieve the same result by writing the declaration in the style sheet property field in Qt Designer. We will discuss more about Qt Designer in the next section.
• Qt Style Sheets also supports all the different types of selectors defined in CSS2 standard, including Universal selector, Type selector, Class selector, ID selector, and so on, which allows us to apply styling to a very specific individual or group of widgets. For instance, if we want to change the background color of a specific line edit widget with the object name usernameEdit, we can do this by using an ID selector to refer to it:

  QLineEdit#usernameEdit { background-color: blue }

Note

To learn about all the selectors available in CSS2 (which are also supported by Qt Style Sheets), please refer to this document: http://www.w3.org/TR/REC-CSS2/selector.html.