How to do it…

Let's follow these steps to customize widget properties and sub-controls:

1. Let's create a new Qt project. I have prepared the UI for this purpose. The UI contains three buttons on the left side and a Tab Widget with three pages located on the right side, as shown in the following screenshot:

1. The three buttons are blue because I've added the following style sheet to the main window (not to the individual button):

QPushButton {
    color: white;
    background-color: #27a9e3;
    border-width: 0px;
    border-radius: 3px;
}

1. I will explain what pseudo-states are in Qt by adding the following style sheet to the main window, which you might be familiar with:

QPushButton:hover {
    color: white;
    background-color: #66c011;
    border-width: 0px;
    border-radius: 3px;
}

1. We used the preceding style sheet in the previous Creating a login screen using style sheets recipe, to make the buttons change color when there is a mouse-over event. This is made possible by Qt Style Sheet's pseudo-state, which in this case is the word hover separated from the QPushButton class by a colon. Every widget has a set of generic pseudo-states, such as active, disabled, and enabled, and also a set of pseudo states that are applicable to their widget type. For example, states such as open and flat are available for QPushButton, but not for QLineEdit. Let's add the pressed pseudo-state to change the buttons' color to yellow when the user clicks on it:

QPushButton:pressed {
    color: white;
    background-color: yellow;
    border-width: 0px;
    border-radius: 3px;
}

1. Pseudo-states allow the users to load a different set of style sheets based on the condition that applies to it. Qt pushes this concept further by implementing dynamic properties in Qt Style Sheets. This allows us to change the style sheet of a widget when a custom condition has been met. We can make use of this feature to change the style sheet of our buttons based on a custom condition that we can set using custom properties in Qt. First, we will add this style sheet to our main window:

QPushButton[pagematches=true] {
    color: white;
    background-color: red;
    border-width: 0px;
    border-radius: 3px;
}

1. This changes the push button's background color to red if the pagematches property returns true. Obviously, this property does not exist in the QPushButton class. However, we can add it to our buttons using QObject::setProperty():

• • In your mainwindow.cpp source code, add the following code right after ui->setupUi(this):

ui->button1->setProperty("pagematches", true);

• • The preceding code will add a custom property called pagematches to the first button and set its value as true. This will make the first button turn red by default.
  • After that, right-click on the Tab Widget and choose Go to slot.... A window will then pop up; select the currentChanged(int) option from the list and click OK. Qt will generate a slot function for you, which looks something like this:

private slots:
void on_tabWidget_currentChanged(int index);

• • The slot function will be called whenever we change the page of the Tab Widget. We can then decide what we want it to do by adding our code into the slot function. To do that, open up mainwindow.cpp and you will see the function's declaration there. Let's add some code to the function:

void MainWindow::on_tabWidget_currentChanged(int index) {
    // Set all buttons to false
    ui->button1->setProperty("pagematches", false);
    ui->button2->setProperty("pagematches", false);
    ui->button3->setProperty("pagematches", false);

    // Set one of the buttons to true
    if (index == 0)
        ui->button1->setProperty("pagematches", true);
    else if (index == 1)
        ui->button2->setProperty("pagematches", true);
    else
        ui->button3->setProperty("pagematches", true);

    // Update buttons style
    ui->button1->style()->polish(ui->button1);
    ui->button2->style()->polish(ui->button2);
    ui->button3->style()->polish(ui->button3);
}

1. The preceding code sets the pagematches properties of all three buttons to false when the Tab Widget switches its current page. Be sure to reset everything before we decide which button should change to red.
2. Check the index variable supplied by the event signal, which will tell you the index number of the current page. Set the pagematches property of one of the buttons to true, based on the index number.

1. Refresh the style of all three buttons by calling polish(). You may also want to add the following header to mainwindow.h:

#include <QStyle>

1. Build and run the project. You should now see the three buttons changing to red whenever you switch the Tab Widget to a different page. Also, the buttons will change to green when there is a mouse-over, as well as change to yellow when you click on them: