Skip to content

October 2, 2015

Styling Qt QTreeView with CSS

by Joe Kuan

Qt offers additional CSS settings such as sub-control and pseudo-states. Although there are reference and brief tutorial with examples, it doesn’t really show how this settings affect the overall look. In this article, we explore how to style the QTreeView via CSS in step by step. First of all, we use a simple treeview directory program (Python/Qt5 ) from this example and style it gradually.

When we first run the example program, the default tree style has a simple white background.
screen1
Lets add the following call to the MainWindow class to give the tree a stripy look:

class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.treeview = QTreeView(self)
        # Setting the treeview model
        ....
        self.treeview.setAlternatingRowColors(True)

Here is the default stripy style (white and grey) for treeview:
screen2
In order to style the treeview easily, we are going to use CSS. So we need to add another call to set the style sheet.

class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setStyleSheet(styleSheet)
        self.treeview = QTreeView(self)
        # Setting the treeview model
        ....
        self.treeview.setAlternatingRowColors(True)

and we set the styleSheet variable to include QTreeView style with alternate light-blue colors:

styleSheet = """
QTreeView {
    alternate-background-color: #f6fafb;
    background: #e8f4fc;
}
"""

Here is the new stripy look:
screen3

Next we can set the opened folder with a stronger color by adding following CSS:

QTreeView {
    . . . .
}
QTreeView::item:open {
    background-color: #c5ebfb;
    color: blue;
}

screen

Note that when an opened directory is selected (‘run’ directory), the selected color is blocked by ‘item::open’ CSS settings.
screen

We can add another CSS settings for selected item as follows:

QTreeView {
    . . . .
}
QTreeView::item:open {
    . . . .
}
QTreeView::item:selected {
    background-color: #1d3dec;
    color: white;
}

screen

Suppose we want to change the background color in the branching area (inside the red rectangle in below image) to white with only directory open and close icons, i.e. without the stripy and the selected colors.
screen

To do that, we use the subcontrol ‘::branch‘ and set the background to white.

QTreeView {
    . . . .
}
. . . .
QTreeView::item:selected {
    . . . .
}
QTreeView::branch {
    background-color: white;
}

Although this sets the background color of the branching area to white, it creates another problem which also removes the arrow icons.
screen
The only way to fix this and still keeping the branching area to white is to re-introduce the arrow icons explicitly.

. . . .
QTreeView::branch {
    background-color: white;
}
QTreeView::branch:open {
    image: url(branch-open.png);
}
QTreeView::branch:closed:has-children {
    image: url(branch-closed.png);
}

screen

This gives a cleaner look and less noisy in the branching area. For the full demo source, click here.

Read more from CSS, Programming, Python, Qt

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: