
You don’t have to compile, save, or run anything. One cool feature is that you get to preview the style changes right as you make them. Or you may have mistyped something into the CSS dialog. If your’s doesn’t look like this, you may have forgotten to change the parent widget’s name to “MyLoginForm” or the QFrame’s name to “mainFrame” (yes, capitalization does matter - Qt stylesheets are case sensitive). Let’s type in some CSS into the style sheet editor, like this:Īfter clicking OK on the editor dialog, you should see this: Side note: “CSS” stands for “ Cascading Style Sheets” Since stylesheets cascade down to the child widgets, you can stylize any widget in your form from this point. I prefer to do it this way because you’ll never have to go hunting to find your style sheet - it’s all in one place in your form. You can put a style sheet on any widget in your form, but I prefer to do all my stylizing at the parent widget (“MyLoginForm” in this case). This is where we specify the style sheet for our form. You’ll get a little editor dialog like this: Step 3 In Designer’s object inspector, right-click on the top-level entry in the tree (called “MyLoginForm”), and select “Change styleSheet…” from the menu.
#Qt creator tutorial code
When dealing with stylesheets, it’s convenient to name your widgets in Designer, even if you don’t plan to use them by name in your code (we won’t be writing any code besides CSS in this tutorial). Give your form about 30 pixels of layout margin around its perimeter.

Step 2 Add a QFrame to your form, and apply a vertical layout to your form (any layout will work actually: vertical, horizontal or grid).

Step 1 Create a new empty form, named MyLoginForm. This tutorial assumes that you can get around in Qt Designer, and that you understand a little about Qt layouts.

In this tutorial, we’ll create an example dialog in Qt using Designer and stylesheets. Inspired by the web, stylesheets are a great way to stylize your Qt GUI, but it seems that few people use them. Stylesheets add spicy flavor to your boring Qt GUIs.įor a long time, Qt has allowed you to decorate your GUIs with CSS’ish style sheets.
